TS interface

Time:2021-2-18

Using tools such as vscode to trace the source, we often encounter the xxx.d.ts file. Basically, if we understand it in most cases, we will know the correct opening posture of the current JS library.

New type of TS

any

If there is no declared type in TS, the default is any type

let a: number = 1
A ='Hello '// error

let a: any = 1
a = 'Hello' // OK

enum

The idea of enumeration is the same as Java enumeration, and is the same as iota in golang

enum Gender {
    Male = 'Male',
    Female = 'Female'
}

let gender: Gender = Gender.Male
gender = Gender.Female
console.log(gender) // 'Female'
gender =  Gender.Woman  //Error report

Interface

In TS, interface generally refers to the description of variables, such as attributes

interface Human {
    readonly name: string
}
let jack: Human = {
    name: 'Jack'
}
jack.name  ='Ivan' // error: name is read-only

Another example is optional attributesage, computable propertiespropName

interface Human {
    gender: string,
    age?: number
}

interface Rect {
    height: number;
    width: number;
    [propName: string]: number
}

Function interface

This kind of operation is similar to the function members of golang structure

interface Fn {
    (a: number, b: number): number;
}

let add: Fn = function(a: number, b: number): number {
    return a + b
}
console.log(add(1, 2))

This interface is equivalent to an anonymous function, which only declares the function prototype signature (input and output parameters)

Extension interface

An explicit interface inheritance is implemented

interface Animal {
    move(): void;
}

interface Human extends Animal {
    name: string;
    age: number;
}

let jack: Human = {
    age: 18,
    name: 'Jack',
    move() {
        console.log('move')
    }
}

Type Asserts

Type compatibility in typescript is based on structure subtypes. Type conversions can be preceded by the generic notation < > as follows

var a:int=<int>someNumberAsString;

Namespace

In TS, internal module is called namespace, and external module is called module
Multi file usageReference tags (statements that start with three backslashes)To tell the compiler about the association between files

/// <reference path="Validation.ts" />
namespace Validation {
    const lettersRegexp = /^[A-Za-z]+$/;
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return lettersRegexp.test(s);
        }
    }
}

This work adoptsCC agreementReprint must indicate the author and the link of this article

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]