为什么要学习TS
TypeScript
- JavaScript的超集,用于解决大型项目的代码复杂性
- 强类型,支持静态和动态类型
- 可以在编译期间发现并纠正错误
- 不允许改变变量的数据类型
JavaScript
-
一种脚本语言,用于创建动态网页
-
动态弱类型语言
-
只能在运行时发现错误
-
变量可以被赋值成不同类型
TypeScript带来了什么?
-
- 类型安全
- 下一代JS特性
- 完善的工具链
- 不仅仅是一门语言,更是生产力工具。
TS基础
基础类型
- boolean,number,string
- 枚举enum
- any,unknown,void
- never #防御性编程时会使用
- 数组类型 [ ]
- 元组类型tuple
函数类型
- 定义:TS定义函数类型时要定义输入参数类型和输出类型
- 输入参数:参数支持可选参数和默认参数
- 输出参数:输出可以自动推断,没有返回值时,默认为void类型
- 函数重载:名称相同但参数不同,可以通过重载支持多种类型
interface
- 定义:接口是为了定义对象类型
- 特点:
- 可选类型:?
- 只读类型:readonly
- 可以描述函数类型
- 可以描述自定义属性
- 总结:接口非常灵活 duck typing
类
- 定义:写法和JS差不多,增加了一些定义
- 特点:
- 增加了public,private,protected修饰符
- 抽象类:
- 只能被继承,不能被实例化
- 作为基类,抽象方法必须被子类实现
- interface约束类,使用implements关键字
高级类型
-
联合类型|
-
交叉类型&
-
类型断言(省去相关类型推断,告诉编译器实例的具体类型)
类型前置或arg方式
泛型
应用场景:定义一个print函数,函数功能是把传入的参数打印出来,再返回这个参数。传入参数的类型是string,函数返回类型是string。
想支持打印number类型?
想支持打印数组类型?任意类型?
任意类型:any or 泛型
基本定义:
- 泛型的语法是<>里面写类型参数,一般用T表示;
- 使用时有两种方法指定类型:
- 定义要使用的类型;
- 通过TS类型推断,自动推导类型;
- 泛型的作用是临时占位,之后通过传来的类型进行推导;
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:泛型约束
泛型常用工具类型
Partial:将类型属性变为可选
Required:将类型属性变为必选
Readonly:将类型属性变为只读
Pick,Record...
TS实战
声明文件
- declare:三方库需要类型声明文件
- .d.ts:声明文件定义
- @types:三方库TS类型包
- tsconfig.json:定义JS的配置