TS notes

Up front: I read a wave of TS documentation and learned some basic concepts that were quickly forgotten without actually developing the project. Now when Vue3+TS+Vite is hot, so I learn new, expand my own technology stack, this is some summary of TS syntax and personal memory points.

1. Basic types

  • Symbol (unique value),void(null value),any(arbitrary value),never(never exist)

2. Type annotations

  1. let a :number = 1024; Function (a :number,b :string){};
  2. let a :bumber | string; (Assign multiple valid types to variables at the same time, but determine the type when assigning)
  3. Let a = “ABC” let a = “ABC”

3. Interface (interface)

(Used to define type rules, such as function types, and tuple types can be annotated (const people: Person) or inherited from other interfaces)

The interface cannot be transmitted more, less, or incorrectly

Annotate the shape of the object

Interface Porson {readonly ID: 123, // Read-only property, unmodifiable assignment age? [propName string]: any, // any attribute value, but the attribute name must be string name: string, // type annotation}Copy the code

The partial behavior of the class

Interface Array{[index: number] : any,// define the subscript type length: number,// define the length type cassee: function,// define the callback type}Copy the code

4. The enumeration (enum)

Used to manage the different forms of an object.

enum Status_Type{
    pengding:"Waiting".success:"Success".error:"Failure",}Copy the code

5. Tuples and arrays

The data of array is unlimited length, tuple is the array of limited length,TS only has a tuple,JS does not exist the so-called tuple, just a fixed length array.

Let arr :number[] = [1,2,3]; let arr2 = new Array<number>(3); Interface NumberArray{[index :number]:number,} let arr3 :NumberArray = [1,2,3]; Function num(){let args = IArguments = arguments; } // tuple // let arrAny :any[] = [1," test "] let tuplel: [number,string, Boolean] = [1," number ",false]Copy the code

6. Function type (type)

A custom function type used to describe the specification of complex data types

It can be used to define the parameter types of functions, and generics can be nested, and can be combined with type and interface for extension.

7. Function (function)

  1. Function arguments can be annotated by type, with optional arguments (a? :string), default arguments (a:string = 3), and remaining arguments (… Arg :string[]).TS optional parameter must be followed by mandatory parameter. JS optional parameter, but undefined is used if not specified
  2. Functions can be annotated with interfaces
  3. Let add = (a1:number, a2:number) :number(return value type) => a1 + a2;
  4. Function overloading is when the same function name executes different code depending on the number of arguments passed in, and returns different results. Function overloading can only be defined using function, not type or interface

8. Generics

Instead of using type annotations when defining functions or interfaces, it can be used when calling to pass in the actual type. T is resolved to the number type, which is more flexible

9. Assertion

type C = {name:"Bob"}; console.log(b as C).name; // An assertion is an arbitrary conclusion that TS does not know the type of the data. An assertion is an arbitrary assertion that the programmer tells TS to type the data without knowing the type of the data.Copy the code

10. Null value discrimination

//let a :any = '0'; //let a :unknow = '0'; Unknow means I don't know what type to start with, but when I use it I specify the type //void to indicate that a function has no return value.Copy the code

End