This is a Typescript series of articles. Designed to take advantage of fragmentary time to make it easy to understand how to get started with Typescript. Or to revisit old Typescript gaps

As someone who has been using Typescript for a long, long time, I really feel the magic of Typescript, which makes code much more maintainable. Easy code refactoring (refactoring once a month, 6 times a year, either on the road to refactoring or refactoring…)

List of articles:

  • Typescript basic types
  • [b] Typescript enumeration
  • [c] Typescript interface
  • …

Basic types of

  1. Javascript type:

Boolean Number String Array Funciton Object Symbol undefined null

  1. Supplementary type

Void any Never A meta-ancestor enumeration of advanced types

The basic grammar

(variable/function): type [type is the data type above]

The simplest types of declarations are as follows:

let bool: boolean = true
let num: number = 111
let str: string = 'aaa'
let s1: stmbol = Symbol()
Copy the code

An array type

There are two ways to declare an element type, one followed by [], and one that uses Array generics, Array< element type >.

letArr1: number [] = [1, 2, 3]letArr2: Array < number > = [1, 2, 3]Copy the code

If we want an array in both number and a string, just in generic plus < number | string > is as follows:

letArr2: Array < number | string > = [1, 2, 3,'4']  
Copy the code

Or use the meta way

tuples

Effect: limits the type and number of arrays. For example, the first must be number, the second must be string, and can have no more than two values

let tuple: [number , string] = [1 , '2'] // New elements can be added to the ancestor, but cannot be accessed "out of bounds"Copy the code

Don’t cross the line and look at examples

let tuple: [number , string] = [1 , '2']
tuple.push('3'); // Normal push tuple[2] // error reported because access is out of boundsCopy the code

undefined null

If a value declares undefined, it cannot be assigned to any other type of value. See the example

letx:undefined = undefined; / / normalletX: undefined = '1'; / / an errorCopy the code

Similarly, undefined and null cannot be assigned to other types. As follows:

leth: number = undefined; // error if strictNullChecks istrue 
Copy the code

However, in a project, it is occasionally necessary to use undefined and specified type scenarios. For example, if the interface does not return, you may need to use undefined as the default value and assign it after the interface returns. How to support this scenario?

  1. Set strictNullChecks to false in tsconfig.json.This method is not recommended
  2. Use union type recommendations
let num: number | undefined |  null = 111 
Copy the code

void

A function that returns nothing, void, nothing to say…

function warnUser(): void {
}
Copy the code

Any type

When you’re new to typescript, it’s easy to write ‘any’ all over the place. But if you use any, you don’t need to use ts 😄

Never type

Rarely used, the function throws an error or an infinite loop

function error(message): never {
    throw new Error(message);
}
function infiniteLoop(): never {
    while (true) {}}Copy the code

This series of articles will be brief, with some daily usage impressions based on the official API. You can browse quickly and consolidate knowledge with fragmentation. If you are interested ~ welcome to pay attention to the follow-up continue to launch the article.

The last

  • Welcome to add my wechat (A18814127), pull you into the technology group, long-term exchange learning…
  • Welcome to pay attention to “front-end plus”, seriously learn front-end, do a professional technical people…