一、概述

Microsoft 2012年推出

类型错误

是一个在代码运行之前运行的工具（静态编译）

ECMAScript是JS的标准、TS是JS的超集

类型检查

优化编译
// 解决TS和JS冲突问题
1.tsc --init
// 自动编译
2.tsc --watch

// 降级编译
{
  "compilerOptions": {
    "target": "es5"
  }
}

// 严格模式
{
  "compilerOptions": {
    "strict": true,                                
    "noImplicitAny": true,                        
    "strictNullChecks": true
  }
}

{
  "compilerOptions": {
    "rootDir": "./src",  
    "outDir": "./dist"                                
  }
}

数组：type[]、Array<type>

类型别名（给类型定义一个名字，用这个名字来代替定义的类型）

// 扩展接口
interface IAnimal {
    name: string
}
interface IDog extends IAnimal {
    bark: string
}

type Animal = {
    name: string
}
type Dog = Animal & {
    bark: string
}

// 向现有的类型添加字段
interface IPerson {
    name: string
}
interface IPerson {
    age: number
}

类型断言
1.const myCanvas1 = document.getElementById("canvasId") as HTMLCanvasElement
2.const myCanvas2 = <HTMLCanvasElement>document.getElementById("canvasId")

function request(url: string, method: 'GET' | 'POST') { }
// 方式一
const params = {
    url: 'www.baidu.com',
    method: 'GET' as 'GET'
}
request(params.url, params.method)

// 方式二
const params = {
    url: 'www.baidu.com',
    method: 'GET'
}
request(params.url, params.method as 'GET')

// 方式三
const params = {
    url: 'www.baidu.com',
    method: 'GET'
} as const
request(params.url, params.method)

枚举：一组命名常量

bigint：非常大的整数
symbol：全局唯一引用

// "target": "es2020" 
const a: bigint = BigInt(100)
const b: bigint = 100n

in操作符缩小："value" in x

type Fish = {
    swim: () => void
}
type Bird = {
    fly: () => void
}

function move(animal: Fish | Bird) {
    if ('swim' in animal) {
        return animal.swim()
    }
    return animal.fly()
}

type DescribabletionFunction = {
    describe: string
    (someArg: number): boolean
}

function doSomething(fn: DescribabletionFunction) {
    console.log(fn.describe)
    console.log(fn(10))
}

// 泛型函数-限制条件
function longest<T extends { length: number }>(a: T, b: T) {
    if (a.length > b.length) {
        return a
    } else {
        return b
    }
}

unknown：代表任何值，这与any类型类似，但更安全，因为对未知unknown值做任何事情都是不合法的

注

@千（gysr）[22]【b-qfjy】