深入浅出 TypeScript

TypeScript VS JavaScript

TypeScript	JavaScript
JavaScript的超集，用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页
强类型，支持静态和动态类型	动态弱类型语言
可以在编译期间发现并纠正错误	只能在运行时发现错误
不允许改变变量的数据类型	变量可以被赋值成不同类型

TypeScript基础

1. 基础类型

boolean、number、string
undefined、null
any、unknown、void
never
数组类型 []
元组类型 tuple

2. 函数类型

定义：TS定义函数类型时要定义输入参数类型和输出类型输入参数：参数支持可选参数和默认参数输出参数：输出可以自动推断，没有返回值时，默认为void类型函数重载：名称相同但参数不同，可以通过重载支持多种类型

3. interface接口

定义：接口是为了定义对象类型特点：

可选属性：？
只读属性：readonly
可以描述函数类型
可以描述自定义属性总结：接口非常灵活 duck typing

4. Class类

定义：写法和JS差不多，增加了一些定义特点：

增加了public、private、protected修饰符
抽象类：
- 只能被继承，不能被实例化
- 作为基类，抽象方法必须被子类实现
interface约束类，使用implements关键字

TypeScript进价

1. 高级类型

联合类型 |

let num:number | string
num = 8
num = 'eight'

交叉类型 &

interface Person {
    name:string
    age:number
}

type Student = Person & {grade:number}

类型断言

const number = arg as number

类型别名 (type VS interface)

interface Personl{
    name:string
    age:number
}

type Person2 = {
    name:string
    age:number
}

定义：给类型起个别名
相同点：
- 都可以定义对象或函数
- 都允许继承
差异点：
- interface是TS用来定义对象，type是用来定义别名方便使用；
- type可以定义基本类型，interface不行；
- nterface可以合并重复声明，type不行；

2. 泛型

软件工程中，我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型。

基本定义：

泛型的语法是<>里面写类型参数，一般用T表示； 2.使用时有两种方法指定类型：
- 定义要使用的类型
- 通过TS类型推断，自动推导类型
泛型的作用是临时占位，之后通过传来的类型进行推导

3. 泛型工具类型

基础操作符

typeof:获取类型
keyof:获取所有键
in:遍历枚举类型
T[K]:索引访问
extends:泛型约束

常用工具类型

Partial:将类型属性变为可选
Required:将类型属性变为必选
Readonly:将类型属性变为只读
Pick、Record..

TS实战

1. 声明文件

declare:三方库需要类型声明文件
.d.ts:声明文件定义
@types:三方库TS类型包
tsconfig.json:定义TS的配置

2. 后端接口约束

使用extends keyof 约束泛型类型

import axios from 'axios'

interface API{
    '/book/detail':{
    	id:number,
    },
    '/book/comment':{
        id:number
        comment:string
    }
}

function request<T extends keyof API>(url:T,obj:API[T]){
	return axios.post(url,obj)
}

request('/book/comment',{}
    id:1,
    comment:"非常棒！"
})

泛型参数 T 来表示 API 接口中的键。

泛型约束 <T extends keyof API> 表示泛型参数 T 必须是 API 接口中的键之一。

这段代码中的泛型和索引类型的搭配使用，可以在类型检查阶段验证传入的 url 和 obj 参数是否符合 API 接口的定义。

例如以上代码会在request路径错误或参数错误时提示。

深入浅出 TypeScript | 青训营