TypeScript入门 | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 4 天。今日学习内容为：Typ

这是我参与「第五届青训营」伴学笔记创作活动的第 4 天

今日学习内容：TypeScript入门

一、什么是TypeScript？

JavaScript：动态类型、弱类型语言

TypeScript：静态类型、弱类型语言

动态类型：程序执行阶段才能确定类型匹配

静态类型：将类型匹配流程提前

弱类型语言：类型转换

优势：

可读性增强：基于语法解析TSDoc，ide增强
可维护性增强：在编译阶段暴露大部分错误，在多人协作项目中获得更好的稳定性和开发效率

作为JS的超集，TS：

包含与兼容所有JS特性，支持共存
支持渐进式引入与升级

二、基本语法

1. 基础数据类型

const q: string = 'string'
const w: number = 1
const e: boolean = true
const r: null = null
const t: undefined = undefined

2. 对象类型

const bytedancer: IBytedancer {
    jobId: 123456,
    name: 'Lin',
    sex: 'male',
    age: 28
}

interface IBytedancer {
    readonly jobId: number
    name: string
    sex: 'male' | 'female' | 'other'
    age: number
    hobby?:string // 可选属性
    [key: string]: any // 任意属性：约束所有对象属性都必须是该属性的子类型
}

3. 函数类型

function add(x: number, y: number): number {
    return x + y
}
const mult: (x: number, y: number): number = (x, y) => x * y

函数重载:

interface IGetDate {
    (type: 'string', timestamp?: string): string;
    (type: 'date', timestamp?: string): Date;
    (type: 'string' | 'date', timestamp?: string): Date | string
}

4. 数组类型

// 「类型+方括号」
type IArr1 = number[]
// 泛型表示
type IArr2 = Array<string | number | Record<string, number>>
// 元组表示
type IArr3 = [number, number, string, string]
// 接口表示
interface IArr4 = {
    [key: number]: any
}

5. 枚举类型

enum EnumExample {
    add = '+'
    mult = '*'
}

6. 泛型

// 泛型接口 & 多泛型
interface IX<T, U> {
    key: T;
    val: U
}
// 泛型类
class IMan<T> {
    instance: T
}
// 泛型别名
type ITypeArr<T> = Array<T>

三、高级类型

1. 联合 / 交叉类型

设想这样的一个场景：我们需要为书籍列表编写类型，包括IHistoryBook、IStoryBook、IBookList等，类型声明繁琐，存在较多重复

于是我们可以使用联合或交叉类型

联合类型IA | IB：联合类型表示一个值可以是几种类型之一
交叉类型IA & IB：多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

2. 类型保护与类型守卫

当使用联合类型时，类型IB上可能不存在某一个IA上存在的属性

因此得出揭露：访问联合类型时，出于程序安全，仅能访问联合类型中的交集部分

类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域

function getIsIA(arg: IA | IB): arg is IA {
  return !!(arg as IA).a
}

3. 高级类型

若一个obj类型复杂，则两个类似的类型声明便需要大量重复，容易出错

索引类型：关键字keyof，其相当于取值对象中的所有key组成的字符串字面量，如：

type IKeys = keyof {a: string, b: number}

关键字「in」：相当于取值字符串字面量的一种可能，配合泛型P，即表示每个key

关键字「?」：通过设定对象可选选项，即可自动推导出子集类型

4. 函数返回值类型

关键字extends：跟随泛型出现时，表示类型推断，其表达可类比三元表达式
关键词infer：出现在类型推荐中，表示定义类型变量，也可以用于指代类型

四、TS工程应用

1.`webpack`

工作流程：

配置webpack loader相关配置
配置tsconfig.js文件
运行webpack启动 / 打包
loader处理ts文件时，会进行编译与类型检查

2. `Node`

使用TSC进行编译

安装Node和npm
配置tsconfig.js文件
使用npm安装tsc
使用tsc运行编译得到js文件

TypeScript入门 | 青训营笔记