成为优秀的TS体操高手 之 TS 类型体操前置知识储备_ts类型体操

TS 类型体操前置知识储备

 

如果你正在学习 TS，可是像我一样仅仅停留在定义类型，定义 interface/type 的层面的话， 这份体操类型练习题一定不要错过 ！ type-challenges

写这篇文章的时候我只做完了体操类型的中等级别的题目（还有 2-3 道其实没完全解出来）

更多面试题库

看更多面试题

简单搭建一下做题环境

我喜欢做一题拷贝一题，所以我 clone 了一份 type-challenges。然后在 type-challenges 新建了一个文件夹（my-type-challenges），专门用来做 TS 体操

每次想做题的时候都只需要记住编号，比如第一题 13-helloword 。只需要输入就可以了

npm run copy 13

详细的脚本在 Jioho/my-type-challenges。写了脚本后，就可以愉快的写代码了

体操入门基本语法

• 以下的内容纯粹是个人的见解，如有说错或理解不到位的地方请指出

虽然说 TS 图灵完备（如果一个计算系统可以计算每一个图灵可计算函数，那么这个系统就是图灵完备的）

不过 TS 并没有那么多语法，比如 if，switch，return 之类的。

TS 用的最多的都是三目运算符,判断相等,数组,递归等一些技巧后面都会一一介绍到

TS 内置的高级类型（内置的体操）

入门第一步一定要看文档（虽然我也不爱看，看不懂），不过还是需要有基础的了解 utility-types

目前的内置方法就如下：

比如拿一个后续可能用的比较多的来说一下：

Pick 方法

官网的 demo：

interface Todo {  title: string;
  description: string;
  completed: boolean;
}type TodoPreview = Pick<Todo, "title" | "completed">;const todo: TodoPreview = {  title: "Clean room",  completed: false,
};

Pick 的作用就是从一个对象中，挑选需要的字段出来，比如从 TODO 里面只取出 title 和 completed

如果没有类型体操的话，TodoPreview 还得额外定义一个类型

interface TodoPreview {  title:string;
  completed: boolean;
}

之前有一个练手项目我就是遇到了这样的情况，明明都是同一个对象上的字段，为了适应不同场景，硬是定义了一大堆的附属字段，关键是如果想改一个类型，还得全部跟着改。。如果有 Pick 就一了百了，想要啥就 pick 啥

想看 Pick 实现也很简单，随便起一个 type，按住 ctrl+点击 Pick 就可以看到 Pick 实现

代码实现如下：

/**
 * From T, pick a set of properties whose keys are in the union K
 */type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

不过第一次看到这代码， extends ， keyof ， in 这都是什么东西？这就是这篇文章存在的意义。往下看

判断常用 extends 关键字

分享更多面试题库

看更多面试题

看前端面试题题库

extends 翻译是延伸的意思

在 TS 充当了 if 和 在 XXX 范围内 的一个作用。extends 后面通常就要接三目运算符了（也有例外）

举个