TypeScript & 高级语法 & 详细解释 in、keyof、extends、索引签名、Record、typeof 的含义（不定时更新）

前言

很早就听过 TypeScript，当时自己试了下觉得挺简单的，就是给数据声明一个类型提高可读和维护性，不过当时 TS 还不盛行，项目也没机会用到就一直落着，随着 TS 不断普及，许多项目都开始引入了 TS，这不最近在 github 看到一些 TS 代码后，心里开始吐槽：
这好好的非要给 JS 装饰的这么花里胡哨的？我都认不出来这是什么语言了，你确定这是提升 JS 语言可读性而不是添乱？有同学跟我一样的请举个手！

后来静下心来想了想，既来之则安之，与其吐槽，不如静下心来好好重温下 TS ，在这期间也提取了一些有必要掌握的关键字，现在再去读一些 TS 代码心里总算有底了，可以说理解这些关键字的含义，对大部分的 TypeScript 代码都能看得懂。

当然了，光看懂还不行，还得学会运用，但我们现在的目标还是先看懂吧~

提示：本文假设你已经认识一些基本的 TS 语法，如果是第一次接触 TS，建议看下我前面写过的 TypeScript 日常基本语法

正文

1. keyof

keyof 可以获取对象里的所有 key ，跟 JS 中的 Object.keys() 类似，假如我们想要获取某个 interface 接口里的所有 key，就可以用到 keyof，我们来看下例子：

interface User {
   
	name: string;
	age: number;
	birthday: string;
}

// 下面等同于 type keysType = 'name' | 'age' | 'birthday'
type keysType = keyof User

const key:keysType = 'name'

看起来好像有点鸡助的样子，无非就是复制 key ，别急，它的真正作用在于搭配其它关键字，我们往下看就能知道了。

2. in

2.1 in keyof

in 可以用来配合 keyof，我们从上面得知 keyof 是获取所有的 key，假如我们想对每个 key 进行额外的处理怎么做呢？
这里就可以用到 in 关键字，我们来看下例子：

interface Properties {
   
	name: string;
	age: number;
	ate: () => void;
	likeColors: string[];
}

// 将 Properties 的 key: valueType 都复制过来了
type CopyProperties = {
   
  [K in keyof Properties]: Properties[K]
}
// 等同于
// type CopyProperties = Properties

由上面例子得知，通过 in keyof 遍历的同时，还能使其它地方能访问到这个 K，有没有开始感受到 keyof 带来的作用了？

2.2 单独用 in

in 单独使用的话跟 JS 中的 in 类似

// 表示 foo 定义的 key 必须包含 a 或 b 或 c
type Foo = {
   
	[K in 'a' | 'b' | 'c']: number
}
const obj: Foo = {
   
  a: 100,
  b: 200,
  c: 300,
  d: 400  // 报错
}

3. extends

3.1 interface extends

从字面上理解 interface extends 好像就叫接口继承，你可以这么称呼，但我个人更喜欢叫接口合并，我们来看例子。

interface