1.8W字TypeScript入门指南：附大量代码实例（收藏！）

我就是我 2022-08-31 00:00 338阅读 0赞

![a8933f6739247587bff6e6e9a4fb458b.png][]

# 前言 #

作为前端开发的趋势之一，TypeScript 正在越来越普及，很多人像我一样写了 TS 后再也回不去了，比如写再小的demo也要用 TS，JS 只有在配置文件如Webpack（实际上，接下来肯定会有用TS写配置文件的趋势，如Vite）、ESLint等时才会用到。还有另外一部分人认为TS学习成本太高，所以一直没有开始学习的决心。

然而严谨的来说，TS 的学习成本实际上并不高，我认为它可以被分成两个部分：

预实现的 ES 提案，如 装饰器， 可选链?. ，空值合并运算符??，类的私有成员private等。除了部分极端不稳定的语法（装饰器）以外，大部分的TS实现实际上就是未来的 ES 语法。

对于这一部分来说，无论你先前是只学习过 JS（就像我一样），还是有过 Java、C\#的使用经历，都能非常快速地上手，这也是实际开发中使用最多的部分，毕竟和另一块-类型编程比起来，还是这一部分更接地气。

类型编程，无论是一个普通接口(interface)，还是密密麻麻的T extends SomeType ，或者是各种奇奇怪怪的工具类型（Partial、Required等），其实都属于类型编程的范畴。这一块对代码的功能层面没有任何影响，即使你一行代码十个any，遇到类型错误就@ts-ignore，代码该咋样还是咋样。

然而这也就是类型编程一直不受到太多重视的原因：相比于语法，它会带来代码量大大增多（类型定义可能接近甚至超过业务代码量），上手成本较高等问题，但好处也是显而易见的，那就是类型安全。

另外一个特点是，在类型编程这一方面上，假设你花费 1 单位脑力使用基础的 TS 以及简单的类型编程（即interface、type等），你就能够获得 5 个单位的回馈。但接下来，有可能你花费 10 个单位脑力，也只能再获得 2 个单位的回馈。所以类型编程往往不会受到过多重视。

前言铺垫完毕，接下来就进入正文部分。这篇文章的主要面向对象是还没有走出新手村的同学，可以把本文当成你们的新手任务。

## 一、TypeScript 是什么 ##

1.1 TypeScript 与 JavaScript 的区别  
1.2 获取 TypeScript  
1.3 典型 TypeScript 工作流程  
1.4 TypeScript 初体验

## 二、TypeScript 基础类型 ##

2.1 Boolean 类型  
2.2 Number 类型  
2.3 String 类型  
2.4 Symbol 类型  
2.5 Array 类型  
2.6 Enum 类型  
2.7 Any 类型  
2.8 Unknown 类型  
2.9 Tuple 类型  
2.10 Void 类型  
2.11 Null 和 Undefined 类型  
2.12 object, Object 和 \{\} 类型  
2.13 Never 类型

![de1506b912bb2cd599a925176f7189dd.png][]

## 三、TypeScript 断言 ##

3.1 类型断言  
3.2 非空断言  
3.3 确定赋值断言

## 四、类型守卫 ##

4.1 in 关键字  
4.2 typeof 关键字  
4.3 instanceof 关键字  
4.4 自定义类型保护的类型谓词

## 五、联合类型和类型别名 ##

5.1 联合类型  
5.2 可辨识联合  
5.3 类型别名

## 六、交叉类型 ##

6.1 同名基础类型属性的合并  
6.2 同名非基础类型属性的合并

![01f3e0aed8e27d479964ea8b19e1d0cf.png][]

## 七、TypeScript 函数 ##

7.1 TypeScript 函数与 JavaScript 函数的区别  
7.2 箭头函数  
7.3 参数类型和返回类型  
7.4 函数类型  
7.5 可选参数及默认参数  
7.6 剩余参数  
7.7 函数重载

## 八、TypeScript 数组 ##

8.1 数组解构  
8.2 数组展开运算符  
8.3 数组遍历

## 九、TypeScript 对象 ##

9.1 对象解构  
9.2 对象展开运算符

## 十、TypeScript 接口 ##

10.1 对象的形状  
10.2 可选 | 只读属性  
10.3 任意属性  
10.4 接口与类型别名的区别

## 十一、TypeScript 类 ##

11.1 类的属性与方法  
11.2 ECMAScript 私有字段  
11.3 访问器  
11.4 类的继承  
11.5 抽象类  
11.6 类方法重载

![204c90eff21a9882d1ae9b1de8cd77bd.png][]

## 十二、TypeScript 泛型 ##

12.1 泛型语法  
12.2 泛型接口  
12.3 泛型类  
12.4 泛型工具类型

## 十三、TypeScript 装饰器 ##

13.1 装饰器是什么  
13.2 装饰器的分类  
13.3 类装饰器  
13.4 属性装饰器  
13.5 方法装饰器  
13.6 参数装饰器

## 十四、TypeScript 4.0 新特性 ##

14.1 构造函数的类属性推断  
14.2 标记的元组元素

## 十五、编译上下文 ##

15.1 tsconfig.json 的作用  
15.2 tsconfig.json 重要字段  
15.3 compilerOptions 选项

## 十六、TypeScript 开发辅助工具 ##

16.1 TypeScript Playground  
16.2 TypeScript UML Playground  
16.3 JSON TO TS  
16.4 Schemats  
16.5 TypeScript AST Viewer  
16.6 TypeDoc  
16.7 TypeScript ESLint

![1e6e77ebe26d8c906094c6cc3e1662d0.png][]

#### 由于篇幅限制，仅截图展示部分内容，完整版PDF资料免费分享，只需你点赞支持，[点击此处就可免费领取][Link 1] ####

## 十七、最后 ##

TypeScript是一把双刃剑，对开发者来说具有一定门槛，在使用不当的时候，其实对于项目来说会变得更加的复杂，可读性并没有过多的提升。

根据自身团队的实际情况，慢慢推动TypeScript的基建，保持当前生态体系下的框架和库对TypeScript的支持度良好的情况下逐步替换到TypeScript是一个不错的选择。

打个比方：如果你现在使用的是vue2，那么不妨可以考虑下，用TypeScript写组件真的好吗？

TypeScript上手需要一定的学习的学习成本和任务负担，并不是说会javaScript就会TypeScript，其中OOP的思想来说，对团队成员其实是有一定的影响的。尤其是在敏捷项目开发下，影响还是蛮大的。

因此，如果项目迭代本身高频快，那么在估量开发需求时，质量和效率很明显并不能兼得之。可以慢慢的进行推动。

TypeScript不会防止屎山的出现，也没有大多数人传言中的那么香。它只是一个类型系统，并没有传的那么神乎其神，能做的只是杜绝了很多奇技淫巧，让代码可以在一个较为正常的环境下进行开发。

![bfd815c89eed79fac30d018c3f21c94c.png][]

[a8933f6739247587bff6e6e9a4fb458b.png]: /images/20220829/c3e6c34443314559803f0e9297721788.png
[de1506b912bb2cd599a925176f7189dd.png]: /images/20220829/83d7b006558b4f36bbe59396bb676daa.png
[01f3e0aed8e27d479964ea8b19e1d0cf.png]: /images/20220829/0723081abc7c43c4844273f51c67ed16.png
[204c90eff21a9882d1ae9b1de8cd77bd.png]: /images/20220829/6111fe834a6d4e94a59a0d61a4b60105.png
[1e6e77ebe26d8c906094c6cc3e1662d0.png]: /images/20220829/264382a48b8e449bb172a889049389c2.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=NgZqxZAa
[bfd815c89eed79fac30d018c3f21c94c.png]: /images/20220829/ea4934e879934fccbbe8b85db4d7d426.png