学习路线——TypeScript

TypeScript

TypeScript

自从 Vue3 横空出世以来，TypeScript 好像突然就火了。这是一件好事，推动前端去学习强类型语言，开发更加严谨。并且第三方包的 ts 类型支持的加入，让我们甚至很多时候都不再需要打开文档对着 api 撸了。
关于 TypeScript 学习，其实几个月前我还对于这门 JavaScript 的超集一窍不通，经过两三个月的静心学习，我能够去理解一些相对复杂的类型了，
可以说 TypeScript 的学习和学一个库或者学一个框架是完全不同的，

入门

除了官方文档以外，还有一些比较好的中文入门教程。
TypeScript Handbook 入门教程
TypeScript Deep Dive 非常高质量的英文入门教学。
TypeScript Deep Dive
工具泛型在日常开发中都非常的常用，必须熟练掌握。
TS 一些工具泛型的使用及其实现
视频课程，还是黄轶大佬的，并且这个课程对于单元测试、前端手写框架、以及网络请求原理都非常有帮助。
基于 TypeScript 从零重构 axios

进阶
这五篇文章里借助非常多的案例，为我们讲解了 ts 的一些高级用法，请务必反复在 ide 里尝试，理解，不懂的概念及时回到文档中补习。
巧用 TypeScript 系列一共五篇
TS 进阶非常重要的一点，条件类型，很多泛型推导都需要借助它的力量。
conditional-types-in-typescript
以及上面那个大佬博客中的所有 TS 文章。
https://mariusschulz.com

实战
一个参数简化的实战，涉及到的高级知识点非常多。
1. 🎉TypeScript 的高级类型（Advanced Type）
2. 🎉Conditional Types (条件类型)
3. 🎉Distributive conditional types (分布条件类型)
4. 🎉Mapped types（映射类型）
5. 🎉 函数重载
  TypeScript 参数简化实战
实现一个简化版的 Vuex，同样知识点结合满满。
1. 🎉TypeScript 的高级类型（Advanced Type）
2. 🎉TypeScript 中利用泛型进行反向类型推导。(Generics)
3. 🎉Mapped types（映射类型）
4. 🎉Distributive Conditional Types（条件类型分配）
5. 🎉TypeScript 中 Infer 的实战应用（Vue3 源码里 infer 的一个很重要的使用）
  TS 实现智能类型推导的简化版 Vuex
  刻意训练
  它几乎是一门新的语言（在类型世界里来说），需要你花费很大的精力去学好它。
  我对于 TypeScript 的学习建议其实就是一个关键词：刻意训练，在过基础概念的时候，不厌其烦的在vscode中敲击，理解，思考。在基础概念过完以后去寻找实践文章，比如我上面进阶和实战部分推荐的几篇，继续刻意训练，一定要堆积代码量，学习一门新的语言是不可能靠看文档获得成功的。
  我会建立一个仓库，专门记录我遇到的TypeScript 的有趣代码，自己动手敲一遍，并且深入理解。
  能力分级
  其实 TypeScript 的能力也是两级分化的，日常写业务来说，你定义一些 interface，配合 React.FC 这种官方内置的类型也就跑通了，没什么特别难的点。
  但是如果是造轮子呢？如果你自己写了一个工具库，并且类型比较复杂，你能保证推导出来吗？亦或者就拿 Vue3 来说，ref 是一个很复杂的嵌套类型，
  假如我们这样定义一个值const value = ref(ref(2))，对于嵌套的 ref，Vue3 会做一层拆包，也就是说其实ref.value会是 2，
  那么它是如何让 ts 提示出 value 的类型是 number 的呢？
  如果你看到源码里的这段代码，你只有基础的话，保证懵逼。
  Vue3 跟着尤雨溪学 TypeScript 之 Ref 类型从零实现
```
// Recursively unwraps nested value bindings.
export type UnwrapRef<T> = {
cRef: T extends ComputedRef<infer V> ? UnwrapRef<V> : T
ref: T extends Ref<infer V> ? UnwrapRef<V> : T
array: T
object: { [K in keyof T]: UnwrapRef<T[K]> }
}[T extends ComputedRef<any>
? 'cRef'
: T extends Array<any>
? 'array'
: T extends Ref | Function | CollectionTypes | BaseTypes
? 'ref' // bail out on types that shouldn't be unwrapped
: T extends object ? 'object' : 'ref']
```
  业务开发人员
  如果短期内你对自己的要求是能上手业务，那么你理解 TypeScript 基础的interface和type编写和泛型的普通使用（可以理解为类型系统里的函数传参）也已经足够。
  框架开发人员
  但是长期来看，如果你的目的是能够自己编写一些类型完善的库或框架，或者说你在公司扮演前端架构师、轮子专家等等角色，经常需要写一些偏底层的库给你的小伙伴们使用，那么你必须深入学习，这样才能做到给你的框架使用用户完美的类型体验。
  面试题
  TypeScript 相关的面试题我见得不多，不过力扣中国的面试题算是难度偏高的，其中有一道 TS 的面试题，可以说是实用性和难度都有所兼顾，简单来说就是解包。 ```javascript // 解开参数和返回值中的Promise asyncMethod(input: Promise): Promise> ↓ asyncMethod(input: T): Action

// 解开参数中的Action syncMethod(action: Action): Action ↓ syncMethod(action: T): Action `` 我在高强度学习了两三个月 TS 的情况下，已经能把这道题目相对轻松的解出来，相信这也是说明我的学习路线没有走偏（题解就不放了，尊重面试题，其实就是考察了映射类型和infer`的使用）。
力扣面试题

TypeScript

入门

进阶

实战

刻意训练

能力分级

业务开发人员

框架开发人员

面试题