深入浅出TypeScript

一、为什么要学习TS

相较于JS，更用于解决大型项目的的代码负责型。
为强类型语言，对静态和动态都支持。
不允许改变变量的数据类型

二、TS基础

基础数据类型

boolean,number,string
enum枚举类型
any,unknown,void
never
数组类型[]
元组类型tuple

函数类型

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

接口（interface）

定义；接口是为了定义对象类型
特点：
- 可选属性：？
- 只读属性：readonly
- 可以描述函数类型
- 可以描述自定义属性
- 非常灵活

类

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

三、高级类型

联合类型：|

let num: number|string

num = 8
num = 'eight'

交叉类型：& （属性与原类型为并集）

interface Person{
	name : string
    age : number 
}

type Student = Person & {grade : number}
const stu:Student
stu.age
stu.name
stu.grade

交叉类型之后，grade属性可以被Student访问

类型断言

允许开发人员告诉TypeScript编译器，某个值确实具有特定的类型，即使编译器无法在上下文中推断出准确的类型。

类型别名（type VS interface）

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

泛型

应用场景：

我们如果需要设计一个print函数，将传入的参数打印出来，再返回这个参数，传入参数的类型时string，函数返回类型也要为string

那么如果需要支持其他任意类型的数据，我们需要用到泛型解决输入输出可关联的问题：

function print<T>(arg:T):T {
    console.log(arg)
    return arg
}

print<string>('hello') //定义T为string类型
print('hello') //TS类型判断。，自动推导类型为string

基础操作符

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

四、实战

声明文件

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

后端接口约束

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: '非常棒'
})

五、总结

在本次的学习中，Typescript在JavaScript的基础上添加了强类型的特性，我们能够更早的捕捉到错误、提高代码的质量。在本次的学习中我对泛型、类型断言、模块化等有了更深入的认识，期待之后的学习更加深入。

深入浅出TypeScript | 青训营