Detailed explanation of TypeScript basics (will be supplemented later)

official document

optimize compilation

Generate json configuration file

tsc --init

Turn on ts hot update to generate js

tsc --watch

An error will be reported for inappropriate places (it could have been compiled successfully)

tsc --noEdmitOnError

Downgrade compilation, modify in json

"target": "es2016", 

value type

basic type

String
Number 没有int,float等，都是Number
Boolean
any 不进行任何类型检查

array

:[]
:number[]
例如：
let fibonacci: number[] = [1, 1, 2, 3, 5];
:string[]
:any[]
泛型定义
:Array<number>
例如：
let fibonacci: Array<number> = [1, 1, 2, 3, 5];

type alias

type newtype = string
type point = {
    
    
   x:number,
   y:number
}
let a:newtype = "hello"

interface

interface point {
    
    
    name: string,
    x: number,
    y: number
}
(function fun(obj: point): string {
    
    
    console.log(obj.name);
    return obj.name
})({
    
    
    name: "hello",
    x: 100,
    y: 1000
})

Extension type

interface point {
    
    
    name: string,
    x: number,
    y: number
}
type point2 = point &{
    
    
   price:number
}

Add fields to existing types, note that type is not allowed to do so

interface point {
    
    
    name: string
}
interface point {
    
    
    x: number,
    y: number
}

Equivalent, will not overwrite, will merge

interface point {
    
    
    name: string,
    x: number,
    y: number
}

type inference

text type

let sex:'男'|'女' = '男'
function fun(sex:'男'|'女'){
    
    
}

enumerate

primitive language

function

function type

function add(x: number, y: number): number {
    
    
    return x + y;
}
定义类型
let myAdd = function(x: number, y: number): number {
    
     return x + y; };
完整类型
let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number {
    
     return x + y; };
推断类型
let myAdd: (x: number, y: number) => number =
    function(x, y){
    
     return x + y; };

Optional parameters and optional attributes
? Represents optional

b?: String:    表示该参数可传可不传
obj.b?.toUpperCase() 这里的？可以确保b这个参数是否传入，相当于加入一个判断

function sum(obj:{
    
    a: String, b?: String}):void {
    
    
    console.log(obj.b?.toUpperCase());
}

The remaining parameters
are just added types on the basis of the original

(function buildName(firstName: string, ...restOfName: string[]): void {
    
    
    console.log(firstName + " " + restOfName.join(" "));
})("Joseph", "Samuel", "Lucas", "MacKinzie")

this and arrow functions

generic

define function

function identity(arg: any): any {
    
    
    return arg;
}

A type variable, which is a special kind of variable, is only used to represent a type rather than a value.

function identity<T>(arg: T): T {
    
    
    return arg;
}
参数是数组
function loggingIdentity<T>(arg: T[]): T[] {
    
    
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

We can also use the generic variable T as part of the type instead of the entire type

function loggingIdentity<T>(arg: Array<T>): Array<T> {
    
    
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

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

generic interface

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

generic class

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

Generics also have some attribute constraints, which can be broken by implementing the interface (the interface contains the attribute) through the class

interface Lengthwise {
    
    
    length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): void {
    
    
    console.log(arg.length); 
}

enumerate

slightly

advanced type

union type

function fun(a:number|string){
    
    
   if(typeof a === 'number'){
    
    
       console.log('number'); 
   }else{
    
    
       console.log('string');
       
   }
}