深入浅出TypeScript | 青训营

为什么要学习TypeScript

TS 基础

变量类型

boolean、number（整数，浮点数，负数）、string
枚举enum 成员名到成员映射
any、unknown、void （unknown只允许被赋值，当进行反向赋值得时候，只能赋值给any或unknown，会更安全些）
never 永远不存在值的类型
数组类型【】
元组类型tuple

函数类型

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

接口

定义：为了定义对象类型
特点：
- 可选属性
- 只读属性
- 描述函数类型
- 描述自定义属性

类 ------ 与java相似

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

特点：

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

TS高阶-高级类型

联合类型 |

ts 复制代码

let num:number | string

num = 8
num = 'eight'

交叉类型 & （eg：其他属性的扩展

ts 复制代码

interface Person{
	name:string
	age:number
}

type Student = Person & {grade:number}

const stu:Student
stu.age/grade/name

类型断言（非空断言和确定具体值的断言）

ts 复制代码

function getLength(arg : number | string): number{
	return arg.length
}

function getLength(arg : number | string): number{
	const str = arg as string
	if(str.length){
		return str.length
	}else{
		const number=arg as number
		return number.toStirng().length
	}
}

类型别名（类似interface）
- 定义：给类型起个别名
- 相同点：
  - 都可以定义对象或函数
  - 都允许继承
- 差异点：
  - interface 是 TS 用来定义对象，type是用来定义别名方便使用
  - type 可以定义基本类型， interface 不行
  - interface 可以合并重复声明，type不行
- 一般使用组合或交叉类型的人来说，用type

TS进阶-泛型

泛型创建可重用的组件

应用场景：定义一个功能，把传入的参数打印出来。传入string，返回string，若想支持number。若想打印数组任意类型？

ts 复制代码

function print(arg:string):stirng {
	console.log(arg)
	return arg;
}

function print(arg:string | number ):string | number{
	console.log(arg)
	return arg;
}
function print(arg:any):any{
	console.log(arg)
	return arg
}
function print<T> (arg:T):T {
	console.log(arg)
	return arg
}

基本定义
1. 语法就是<>写参数类型，用T表示
2. 有两种：定义要使用的类型 + TS类型推断，自动推导类型
3. 泛型的作用是临时占位
ts 复制代码
```
function print<T> (arg:T):T {
	console.log(arg)
	return arg
}
```

TS进阶-泛型工具类型-基础操作符

typeof : 获取类型
keyof：获取所有健
in : 遍历枚举类型

ts 复制代码

type Keys = "a" | "b" | "c"
type Obj = {
	[p in Keys]:any
}

T【k】：索引访问

ts 复制代码

interface IPeson { 
	name:string;
	age:number;
}
let type1 : IPerson['name']
let type2 : IPerson['age']

extends：泛型约束

ts 复制代码

interface Lengthwise { 
	length : number;
}
function loggingIdentity<T extends Lengthwise>(arg : T): T {
	console.log(arg.length);
	return arg;
}

loggingIdentity({value:3})
loggingIdentity({length:5})

TS进阶-泛型工具类型-常用工具类型

实战

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

实战-泛型约束后端接口类型

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:'good'
})