33-漫谈篇:面试中的 TypeScript
课程
1
开篇:用正确的方式学习 TypeScript
已学完
学习时长: 7分24秒
2
工欲善其事:打造最舒适的 TypeScript 开发环境
学习时长: 19分14秒
3
进入类型的世界:理解原始类型与对象类型
学习时长: 37分40秒
4
掌握字面量类型与枚举,让你的类型再精确一些
学习时长: 24分53秒
5
函数与 Class 中的类型:详解函数重载与面向对象
学习时长: 50分40秒
6
探秘内置类型:any、unknown、never 与类型断言
学习时长: 34分58秒
7
类型编程好帮手:TypeScript 类型工具(上)
学习时长: 33分34秒
8
类型编程好帮手:TypeScript 类型工具(下)
学习时长: 40分52秒
9
类型编程基石:TypeScript 中无处不在的泛型
学习时长: 43分46秒
10
结构化类型系统:类型兼容性判断的幕后
学习时长: 20分48秒
11
类型系统层级:从 Top Type 到 Bottom Type
学习时长: 45分16秒
12
类型里的逻辑运算:条件类型与 infer
学习时长: 52分44秒
13
内置工具类型基础:别再妖魔化工具类型了!
学习时长: 44分47秒
14
反方向类型推导:用好上下文相关类型
学习时长: 18分37秒
15
函数类型:协变与逆变的比较
学习时长: 21分38秒
16
了解类型编程与类型体操的意义,找到平衡点
学习时长: 4分27秒
17
内置工具类型进阶:类型编程进阶
学习时长: 83分3秒
18
基础类型新成员:模板字符串类型入门
学习时长: 32分58秒
19
类型编程新范式:模板字符串工具类型进阶
学习时长: 69分27秒
20
工程层面的类型能力:类型声明、类型指令与命名空间
学习时长: 53分23秒
21
在 React 中愉快地使用 TypeScript:内置类型与泛型坑位
学习时长: 78分9秒
22
让 ESLint 来约束你的 TypeScript 代码:配置与规则集介绍
学习时长: 57分13秒
23
全链路 TypeScript 工具库,找到适合你的工具
学习时长: 25分13秒
24
说说 TypeScript 和 ECMAScript 之间那些事儿
学习时长: 29分14秒
25
装饰器与反射元数据:了解装饰器基本原理与应用
学习时长: 81分53秒
26
控制反转与依赖注入:基于装饰器的依赖注入实现
学习时长: 69分6秒
27
TSConfig 全解(上):构建相关配置
学习时长: 55分33秒
28
TSConfig 全解(下):检查相关、工程相关配置
学习时长: 76分19秒
29
基于 Prisma + NestJs 的 Node API :前置知识储备
学习时长: 44分50秒
30
基于 Prisma + NestJs 的 Node API :项目开发与基于 Heroku 部署
学习时长: 46分40秒
31
玩转 TypeScript AST:AST Checker 与 CodeMod
学习时长: 85分18秒
32
感谢相伴:是结束,也是开始
学习时长: 3分21秒
33
漫谈篇:面试中的 TypeScript
学习时长: 4分25秒
juejin_logo copyCreated with Sketch.

TypeScript 在前端领域的重要性正在不断提升,那么很自然地,面试过程中对 TypeScript 技能的考察也会逐渐上升到和 Vue / React 技能一样的地位。

那么,如果 TypeScript 在面试中出现,它又会变成什么样子?首先你可以放心的是,面试中大概率不会出现超出这本小册的知识难度,如果出现了,那可能说明这场面试比较奇妙...

在这一节中,我们会来聊聊几个可能出现的面试题,依次进行一下从及格线到优秀回答的进阶。

本节不会包含过于基础的内容,如 TypeScript 中包含的基础类型、类型断言的语法这种。

interface 与 type 异同点

这可能是最经典的一道 TS 面试题了,因此这里我们放在第一个知识点来讲解。

及格线

不论如何,以下这些概念是你需要基本了解的,否则很容易被怀疑是否真的深入使用过 TypeScript 。

  • 在对象扩展情况下,interface 使用 extends 关键字,而 type 使用交叉类型(&)。
  • 同名的 interface 会自动合并,并且在合并时会要求兼容原接口的结构。
  • interface 与 type 都可以描述对象类型、函数类型、Class 类型,但 interface 无法像 type 那样表达元组、一组联合类型等等。
  • interface 无法使用映射类型等类型工具,也就意味着在类型编程场景中我们还是应该使用 type 。

优秀回答

只是回答这些概念定义显得过于枯燥,而且很容易被认为像是在背书,因此你可以穿插自己在工程中的实践, 比如小册中提过的,使用 interface 来定义对象类型,使用类型别名来处理函数签名、联合类型、工具类型等等。这同样也代表了你对这两个工具的理解:interface 就是描述对象对外暴露的接口,其不应该具有过于复杂的类型逻辑,最多局限于泛型约束与索引类型这个层面。而 type alias 就是用于将一组类型的重命名,或是对类型进行复杂编程。

另外,你也可以提到在官方的 Wiki 中,特别说明了在对象扩展的情况下,使用接口继承要比交叉类型的性能更好。

类型兼容性比较

这一问题主要考察你是否了解 TypeScript 类型系统的基本工作原理,以及使用的深入程度。因为通常来说,只有具有一定经验的使用者才会开始了解类型兼容性的相关规则,而了解这部分规则也就意味着你至少能够独立解决相当一部分类型报错。

及格线

TypeScript 使用鸭子类型,也即结构化类型系统进行类型兼容性的比较,即对于两个属性完全一致的类型,就认为它们属于同一种类型。而对于 A 类型、A + B 类型,认为后者属于前者的子类型。另外 TypeScript 类型中还存在着一部分特殊的规则,如 object、{} 以及 Top Type 等。

优秀回答

能回答出上面这些内容已经不错了,但你可是阅读完了这本小册的同学,怎么能轻易止步。如果想进一步升华回答,还可以从以下方面进行扩展。

  • 结构化类型系统到标称类型系统,你可以表达你不仅了解结构化类型系统,还了解与其可以作为对比的标称类型系统,包括存在意义与比较方式,以及如何在 TS 中实现标称类型系统。

  • 类型层级,类型兼容性的比较本质上其实也就是在类型层级中进行比较,一个类型能够兼容其子类型,就这么回事,因此,不妨扩展地讲一讲 TS 的类型层级是怎么样的。

any、unknown 与 never

这一部分主要考察你对内置 Top Type、Bottom Type 的理解,属于相对少见的考察,因此通常也不会要求过高。

及格线

具体内容已经在小册中详细描述,这里只做简单叙述。any 与 unknown 在 TypeScript 类型层级中属于最顶层的 Top Type,也就意味所有类型都是它俩的子类型。而 never 则相反,作为 Bottom Type 的它是所有类型的子类型。

优秀回答

面试的重要原则之一就是 WHY,在回答一个知识点的同时,如果能把这个知识点背后的存在原因也讲述清楚,很难不让面试官暗暗点头为你折服,因此你可以考虑从以下这么几个角度出发来进行扩展。

  • 为什么需要 Top Type 与 Bottom Type ? 在实际开发中,我们不可能确保对所有地方的类型都进行精确的描述,因此就需要 Top Type 来表示一个包含任意类型的类型。而在类型编程中,如果对两个不存在交集的类型强行进行交集运算,也需要一个类型表示这个不存在的类型。这就是 Top Type 与 Bottom Type 的存在意义。
  • 类型层级,Top 与 Bottom 本身就是在描述它们在类型层级中的位置,因此,如果你能给面试官讲一遍从 Bottom 向上到 Top 的类型链,我觉得起码在 TypeScript 这个技能点上你已经基本得到肯定了。
  • 条件类型,Top Type 与 Bottom Type 带来的底层规则还不止表现在类型兼容性方面,在条件类型中同样存在对它们的特殊逻辑,请回想 any 与 never 在条件类型中的表现。

工具类型实现

这一部分有可能需要你进行手写,但对于完成了整本小册阅读的你来说,肯定不是难事,这一部分就不做过多叙述了。

及格线

比较简单的工具类型手写可能包括 Partial(Require)、Pick(Omit)、ReturnType(ParameterType),小册中均已介绍了相关实现与原理,这里就不再赘述。

优秀回答

在完成手写的基础上,其实你也可以主动进行扩展。

  • 我不仅能写出这些基础实现,还能写出其在实际应用场景中的增强版,比如 DeepPartial 与 MarkAsPartial,PickByType 与 PickByStrictType 等等。
  • 我不仅了解这些工具类型的实现,还了解它们可以被归纳为访问性修饰工具类型、结构处理工具类型、集合工具类型与模式匹配工具类型等等,同时对它们实现过程中使用到的类型工具也有较为深入的了解。

总结

这一节我们专项学习了几个可能在面试中被作为高频考点的 TypeScript 知识点,至于它们为什么会高频出现,其实也是有原因的,相比其它部分知识,这些考点难度适中,又能很少地筛选掉没有实际使用经验的候选人。而如果要进一步考察技能水平,则可能会考察类型工具使用、类型的控制流分析、复杂的类型编程以及装饰器等知识,这些内容同样在小册中有所体现。

留言
Ctrl + Enter
全部评论(10)
chuck的头像
删除
公众号:前端F2E
一刷结束,1月继续二刷
点赞
回复
SPA枸杞泡脚盆的头像
删除
打卡,啥时来个react干货小册[白眼的狗][白眼的狗][白眼的狗]
点赞
回复
藍胖Jackie的头像
删除
确实是非常优质的一本小测,里面的知识点适合回过头来常看
点赞
回复
影风莫的头像
删除
前端工程师
怎么到后面学的人愈来愈少[捂脸]
点赞
2
删除
后面越来越难了,而且用到的不多,更加偏向理解!就像用30%的精力能学完前一半,用70%的精力才能学懂后一半
点赞
回复
删除
确实,而且很多东西还需要使用在回头来看看,毕竟我们大部分人是普通人,不是大佬看一下就理解的很深,不知道对不对
后面越来越难了,而且用到的不多,更加偏向理解!就像用30%的精力能学完前一半,用70%的精力才能学懂后一半
1
回复
陌小路的头像
删除
前端无敌划水怪 @ 淘宝
优秀 mark![奋斗]
点赞
回复
歷史總是驚人的相似的头像
删除
打卡
点赞
回复
泯泷的头像
删除
前端小朋友捏 @ 小破站
m
点赞
回复
我睡前一定喝牛奶的头像
删除
社会闲散青年 @ 无业
mark![奋斗]
1
回复
The action has been successful