The Typescript note

If you’re just starting to learn typescript, you may feel a little confused. Keep notes on common typescript methods to help you find them later

interface

Start with a capital letter, plus? This parameter is optional

/ / an array declaration
interface Arr {
    [index: number] :string
}

ArrayThe < {name:string,age? :number} >// Declare an Object of arbitrary type
interface Obj {
    [index: number] :string
}

// Declare the Object that specifies the key value
interface Obj {
    key: string
}
Copy the code

Using extends

interface A {
    a: string
}

interface B extends A {
    b: string
}

// In this case, the type of B is as follows
type B = {
    a: string
    b: string
}
Copy the code

class

• Class must be declaredconstructorInitialize assignment
• Variables in a class can be modified with the following modifiers. The default ispublic
  • Public public
  • Private Private – Can only be used in the class that declares it
  • Protected allows access by inherited instances
  • Readonly read-only

class A {
  public name: string
  private age: number
  protected sex: 'male' | 'woman'

  constructor(name: string, age: number, sex: 'male' | 'woman') {
    this.name = name
    this.age = age
    this.sex = sex
  }
}

class B extends A {
  public height: number
  readonly readonly: string
  
  constructor(height: number,name: string,age: number, sex: 'male' | 'woman') {
    super(name, age, sex)
    this.height = height
    this.readonly = 'I'm read-only'
  }
  
  changeSex() {
    this.sex = 'male' // Can be modified
  }
  // An error is reported here
  changeReadonly() {
    this.readonly = 'Try to modify' // Cannot assign "readonly" because it is read-only}}const ZhangSan = new B(160.'Joe'.18.'male')
// An error is reported here
ZhangSan.age // The property "age" is private and can only be accessed in class "A"
// An error is reported here
ZhangSan.sex = 'woman' // The property "sex" is protected and can only be accessed in class "A" and its subclasses
Copy the code

function

The remaining arguments to the function can be passed through… In order to get

function buildName(firstName: string. restOfName:string[]) {
  return firstName + "" + restOfName.join("");
}

let employeeName = buildName("Joseph"."Samuel"."Lucas"."MacKinzie");
Copy the code

The generic

function identity<T> (arg: T) :T {
    return arg;
}

// 1 Specifies the type
let output = identity<string> ("myString");  // type of output will be 'string'
// 2 No need to specify, automatic judgment
let output = identity("myString");

// For an Array, specify T[] or Array
      
        as follows
      
function loggingIdentity<T> (arg: T[]) :T[] {
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}
Copy the code

Defining the generic T indicates that <> is a declaration, and that once we define the generic function, we can use it in two ways.

Used in classes and interfaces

interface GenericIdentityFn<T> {
    (arg: T): T;
}

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) = > T;
}
Copy the code

The enumeration

// Enumeration of numbers, if not set to 1, will start from 0 +1 increment
enum Direction {
    Up=1,
    Down,
    Left,
    Right,
}
// Common enumeration
enum Response {
    No = 0,
    Yes = 1,}// Use benefits that can eliminate magic strings as much as possible
Direction.Down
Response.No
Copy the code

Auxiliary function

Partial

Make all values optional

interface Todo {
    title: string;
    description: string; } Partial<Todo> { title? :string; description? :string;
}

Copy the code

Readonly

Make all values read-only

Record<K,T>

Generate an object type with key K and assign type T to the key inside

interface PageInfo {
    title: string;
}

type Page = 'home' | 'about' | 'contact';

Record<Page, PageInfo>
{
    home: { title: string },
    about: { title: string },
    contact: { title: string}};Copy the code

Pick<T,K>

Custom selection properties

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

Pick<Todo, 'title' | 'completed'>;
{
    title: string;
    completed: boolean;
}

Copy the code

Omit<T,K>

Custom delete several properties

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

Omit<Todo, 'description'>;
{
    title: string;
    completed: boolean;
}
Copy the code

Exclude<T,U>

To produce by elimination

type T0 = Exclude<"a" | "b" | "c"."a">;  // "b" | "c"
type T1 = Exclude<"a" | "b" | "c"."a" | "b">;  // "c"
type T2 = Exclude<string | number | (() = > void), Function>;  // string | number
Copy the code

NonNullable

Exclude null and undefined from types

type T0 = NonNullable<string | number | undefined>;  // string | number
type T1 = NonNullable<string[] | null | undefined>;  // string[]
Copy the code

Parameters

The constructor returns an array of the parameter type

declare function f1(arg: { a: number, b: string }) :void
type T0 = Parameters< () = >string>;  / / []
type T1 = Parameters<(s: string) = > void>;  // [string]
type T2 = Parameters<(<T>(arg: T) = > T)>;  // [unknown]
type T4 = Parameters<typeof f1>;  // [{ a: number, b: string }]
type T5 = Parameters<any>;  // unknown[]
type T6 = Parameters<never>;  // never
type T7 = Parameters<string>;  // Error
type T8 = Parameters<Function>;  // Error
Copy the code

ConstructorParameters

Extract all parameter types, form the return, is the advanced Parameters

type T0 = ConstructorParameters<ErrorConstructor>;  // [(string | undefined)?]
type T1 = ConstructorParameters<FunctionConstructor>;  // string[]
type T2 = ConstructorParameters<RegExpConstructor>;  // [string, (string | undefined)?]
Copy the code

ReturnType

Construct a type T consisting of the return type of the function

declare function f1() :{ a: number.b: string }
type T0 = ReturnType<() = > string>;  // string
type T1 = ReturnType<(s: string) = > void>;  // void
type T2 = ReturnType<(<T>() = > T)>;  / / {}
type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>;  // number[]
type T4 = ReturnType<typeof f1>;  // { a: number, b: string }
type T5 = ReturnType<any>;  // any
type T6 = ReturnType<never>;  // any
type T7 = ReturnType<string>;  // Error
type T8 = ReturnType<Function>;  // Error
Copy the code

InstanceType

Construct an interface that is identical to the instance type

class C {
    x = 0;
    y = 0;
}

type T0 = InstanceType<typeof C>;  // C {x:number,y:number}
type T1 = InstanceType<any>;  // any
type T2 = InstanceType<never>;  // any
type T3 = InstanceType<string>;  // Error
type T4 = InstanceType<Function>;  // Error

Copy the code

Required

Remove all options from the type, as opposed to Partial

interfaceProps { a? :number; b? :string;
};

const obj: Props = { a: 5 }; // OK

const obj2: Required<Props> = { a: 5 }; // Error: property 'b' missing
Copy the code