想了解TS，看这儿就明白了

1.TS数据类型

let isDone: boolean = false
let age: number = 123
let sname: string = '123'
let message: string = '123'
let u: undefined = undefined
let n: null = null
let num: number = undefined
let notSure: any = 4
// 任何类型随意赋值或者调用不存在方法也不会报错
notSure = '123'
notSure.getNmae()

let arrOfNumber: number[] = [1,2,3]
arrOfNumber.push(3)

function test () {
    console.log(arguments);
    let htmlCollection: HTMLAllCollection
    
}
// 元组
let user: [string, number] = ['va', 2]
// 可以通过数组的方法来改变原数组，但只能时字符串和数字类型
user.push('true')

2.interface

可以用来约束一个函数，对象，以及类的结构和类型

// interface约束描述对象类型
interface IPersom {
    // 规定该属性只读
    readonly id: number,
    name: string,
    age: number
}
// 重复定义interface会自动合并
interface IPersom {
    // 规定该属性 可有可无
    ss?: number
}
let viking: IPersom = {
    id: 1,
    name: '123',
    age: 12,
    ss: 123
}

viking.id = 2


// (: xxx, : xxx)     ): number 规定函数返回类型必须是number
const add = (x: number, y: number, z?: number): number => {
    return x + y + z
}

add(1,2)
// interface描述函数类型
interface IFun {
    (x: number, y: number): number
}
// add函数自动获得函数类型
let add2: IFun = add

add2(1, 23)

3.类型推论、联合类型、类型断言

let str = 's'
// 类型推论 没有明确规定类型时，ts会自动触发类型推论
str = 123
// union types  允许一部分的类型
let numberOrString: number | string
// 只能访问number和string的特有属性
numberOrString.toLocaleString()

function getLength (input: string | number): number {
    // 类型断言as 入参input断言称string类型 告诉编辑器比它更了解变量类型，你不应该在报错
    const str = input as string
    if (str.length) {
        return str.length
    } else {
        const number = input as number
        return number.toString().length
    }
}

4.ts class

// ts中class类的修饰符
// public 公共的 可以被实例访问
// private 私有的 只能类自己调用，不能被外部或实例访问
// protected 受保护的 只能被子类访问
class Animal {
    name: string
    constructor (name) {
        this.name = name
    }
    // 如果没有修饰符前缀 ts中默认是public
    run () {
        return `${this.name} is running`
    }
    // 只能在类里自行调用
    private said () {
        return `${this.name} is saiding`
    }
    saidAndRun () {
        return this.said() + `and running`
    }
    // 只能被类中或子类中被访问 super.eat()
    protected eat () {
        return `${this.name} is eat`
    }
}

class Cat extends Animal {
    readonly attr: string
    constructor (name, attr) {
        super(name)
        this.attr = attr
    }
    run () {
        return 'mo: ' + super.eat()
    }
}
const snake = new Animal('snake')
console.log(snake.run());
console.log(snake.saidAndRun());

const cat  = new Cat('cat', 123)
console.log(cat.run());

5.implements

implements 是 OOP 中的一个概念，称之为实现

// interface 在这里像是一个规范，implements 就表示，你的类必须要按照我的 interface
// class类特性抽出
interface Radio {
    // void 啥都不返回
    switchRadio (trigger: boolean): void
}

interface Bettery {
    checkBatterStatus (): void
}
// 接口间的继承
interface RadioWithBettery extends Radio {
    checkBatterStatus (): void
}
// implements约束类 必须按照interface定义的接口来实现
class Car implements Radio {
    switchRadio (trigger: boolean) {

    }
}

class Cellphone implements RadioWithBettery {
    switchRadio (trigger: boolean) {

    }
    checkBatterStatus () {

    }
    ss () {

    }
}

6.泛型Generics

generics 在定义函数、接口、类时 先不指定类型 而是在是使用时在指定类型 实现返回值的类型与传入参数的类型是相同的

function echo <T> (arg: T): T {
    return arg
}
// typeof aecho === number
const aecho = echo(123)

// 泛型在接收函数入参时，触发类型推论
function swap <F, S> (arr: [F, S]): [S, F] {
    return [arr[1], arr[0]]
}
const aswap = swap([123, 'str'])

// 灵活的约束泛型接收类型 必须有length这个属性
interface Ilength {
    length: number
}
function echoWithLength <T extends Ilength> (arg: T): T {
    // return arg.length
    console.log(arg.length);
    return arg
    
}
const strs = echoWithLength('str')
const obj = echoWithLength({length: 2})
const arrs = echoWithLength([1, 2,3])

// 泛型约束类实例调用push方法必须传入number类型
class Queue <T> {
    private data = []
    push (item: T) {
        return this.data.push(item)
    }
    pop (): T {
        return this.data.shift()
    }
}

const queue = new Queue<number>()
queue.push(1)
queue.pop()

// 泛型来约束interface定义的类型
interface keyPair <T, U> {
    key: T,
    value: U
}

let objO: keyPair<number, string> = {key: 1, value: '2'}

let objT: keyPair<{}, Boolean> = {key: { ss: 1 }, value: true}

let arro: Array<number> = [1, true]