TypeScript学习|青训营笔记

为什么学习TS?

与JS相比

1. JS是一种脚本语言，用于创建动态网页。而TS是JS的超集，用来解决大型项目的代码复杂性。
2. JS是动态弱类型语言，而TS是强类型，且支持静态和动态类型。
3. JS只能在运行时发现错误，但TS在编译期间就可以发现并纠正错误。
4. JS中变量可以被赋值成为不同的类型，但TS中变量的数据类型不允许改变。

TS优势——生产力工具

1. 类型安全
2. 下一代JS特性
3. 完善的工具链

基础

基础类型

1. boolean,布尔类型，可以赋值为true,false; number,所有的数字类型，包括整数，浮点数等；string，即字符串类型
2. undefined, null
3. any, unknown, void
4. never
5. 数组类型[]
6. 元组类型tuple

函数类型

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

interface

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

类

• 定义：写法和JS差不多，增加了一些定义
• 特点：增加了public，private，protected修饰符；抽象类：只能被继承不能被实例化，作为基类，抽象方法必须被子类实现。
• interface约束类，使用implements关键字

进阶

高级类型

1. 联合类型 |
2. 交叉类型 &
3. 类型断言
4. 类型别名

泛型——解决输入输出可关联的问题

让我联想到了C++语言中的模板类。

• 基本定义：

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

• 基础操作符

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

• 常用工具类型

1. Partial:将类型属性变为可选
2. Required:将属性类型变为必选
3. Readonly:将类型变为只读
4. Pick, Record, etc.

实战

声明文件

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

个人心得体会

本节课的学习让我由浅入深地初步了解了TypeScript这种语言，也是生产工具，在前端的开发中非常有用，也是前端开发目前的主流。不仅是强语言类型，还包含所有JavaScript的语法，适合构建大型应用，也适合团队开发。虽然需要一定的学习成本，但还是非常值得好好学习。