[JavaScript知识库]typescript用法注解全都在这里了

typescript语法讲解都写在这里了，通过注释就能看懂ts到底怎么使用，代码从上往下看，知识点都是由易到难

“写文案讲解代码真的很累不如直接手撸来得快，今天偷懒通过注释的形式讲解看不懂的地方多看两遍就懂”

// -------------> 定义类型
let num: number = 0
let str: string = '123'
let bol: boolean = true
let all: any = false

// -------------> 联合类型
let angle: number | string;
angle = "123";
angle = 123;

// -------------> 数组类型
let numer: number[] = [13,1,2,1]  
let objArr: object[] = [{name: 123}, {name: 254}] 
// objArr.push(123) // 错误的添加类型
objArr.push({name: '123'})

let arr: [number] = [1] // 写了一个类型就只能对应一个数字

// -------------> 元祖 (理解为数组中定义多个不同类型)
let oArr: [number , string] = [123, "123"]  // 元祖定义类型的先后顺序赋值也必须一致

// -------------> interface接口 声明对象
interface person {
    name: string;
    age: number;
    address ?: string;  // 可选
    readonly mail: string; // 必读
}

let mine: person = {
    name: 'frank',
    age: 23,
    // address: '中国重庆',
    mail: '123@qq.com',
}

// -------------> 函数类型
const add = (x: number = 1,y:number, z?:number): number => {
    if(typeof z === 'number') {
        return x + y + z
    } else {
        return x + y
    }
}

const add2: (x:number, y:number ,z: number) => number = add   //函数类型声明
const add3: (x:number, y:number) => number = add

// let str1 = '123'
// str1 = 123 // 类型推断

// -------------> class 类型
class Animal {
    name: string;
    constructor (name: string) {
        this.name = name
    }
    run () {
        return `${this.name} 在奔跑`
    }
}

const snake = new Animal('蛇')

// 继承
class Dog extends Animal {
    bark () {
        return `${this.name} is barking`
    }
}

const xiaogou = new Dog('bob')
console.log(xiaogou.run())
console.log(xiaogou.bark())

// 多肽
class Cat extends Animal {
    constructor(name: string) {
        super(name) // 必须使用子类super调用父类name
        console.log(this.name)
    }
    run () {
        return `猫咪， 在玩耍` + super.run ()
    }
    static stateFun () {
        return '静态属性'
    }
}

const maomao = new Cat('maomao')
console.log(maomao.run())
console.log(Cat.stateFun())

// 类修饰符
/**
 public 公用的
 private 只能在类里进行访问，子类都无法访问属性
 protected  子类可以访问,只能父类和子类访问
 readonly  只读，不可修改
 static 静态方法定义
**/

// -------------> 类和接口
interface Radio {
    switchRadio (triggerL: boolean): void;
}
// 接口继承
interface RadioWithBatter extends Radio {
    checkBatterStatus(): void;
}

class Car implements Radio{
    switchRadio () {

    }    
}
//实现(implements) 继承多个接口
class Cellphone implements RadioWithBatter {
    switchRadio () {

    }
    checkBatterStatus() {

    }
}

// -------------> 枚举
enum Direction {
    one = 0, // 数字类型赋值必须从0开始，否则未Direction[0]输出undfined
    two = 1,
    three = 2, 
    four = 3
}
/**  
 * 枚举有点双向映射的意思
 */
console.log(Direction[3])  // four
console.log(Direction.one)  // 0 

const value = 2
if(value === Direction.three) {
    console.log('bingo') // true
}

// -------------> 泛型 (ts难点)
// 概念如何做到函数在调用中的参数可以传入不同类型
function echo <T> (arg: T): T {
    return arg
} // T是否传入什么类型

const result1 = echo('123')
const result2 = echo(123)

// 元祖类型参数
function swap <T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1] , tuple[0]]
}

const result3 = swap(['ts', 'hello'])
console.log(result3.join(','));

// 约束泛型
interface IWidthLength {
    length: number
}
// 继承IWidthLength声明类型
function echoWidthLength<T extends IWidthLength>(arg: T): T {
    return arg
}
const strFun = echoWidthLength('str')
const objFun = echoWidthLength({length: 1, a: 2})
const arrFun = echoWidthLength([1,2,3])
// echoWidthLength(123)  //报错不能传number类型
// 对象泛型
interface KeyPair<T, U> {
    key: T;
    value: U
}

let kp1: KeyPair<number , string> = {
    key: 1,
    value: '123'
}
// 函数泛型
interface funPair<T> {
    (x: T, y: T): T
}

function plus (x: number , y: number): number {
    return x + y
}
function strPlus (val: string): string {
    return `hello, ${val}`
}

const aBtn: funPair<number> = plus
const strBtn: funPair<string> = strPlus

// ------------->  类型别名
type PlusType = (x: number , y : number) => number

function sum(x:number , y: number): number {
    return x + y
}
const sum2: PlusType  = sum
type NameResolver = () => string

type strNum = string | number  // 也可以理解为将代码变得更可读
function strNumFun(val: strNum): number {
    if(typeof val === 'string') {
        return val.length
    } else {
        return val
    }
}

// -------------> 类型断言 概念：你比系统更懂当前需要什么类型
function getLength(input: string | number): number {
    // 第一种写法  用as来声明当前类型
    // const str = input as String
    // if(str.length) {
    //     return str.length
    // } else {
    //     const number = input as Number
    //     return number.toString().length
    // }

    // 第二种写法
    if((<string>input).length) {
        return ((<string>input).length)
    } else {
        return input.toString().length
    }
}