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 Action {
	bark: () => void
}
interface People  extends Action{
	name: string;
	age: number;
}

// 上面的 People 等同于下面 
interface Peoople {
	name: string;
	age: number;
	bark: () => void
}

3.2 <T extends U>

敲黑板：请忘记之前我们学过的继承概念，因为下来要讲的 extends 根本不叫继承。

从字面上理解 <T extends U > 好像就叫泛型继承？不！这叫泛型约束，什么是泛型约束？这里我总结一下就是：
泛型传递进来的类型必须满足 U 里的所有属性和类型
我们来看例子：

interface U {
	name: string;
	age: number;
}
type Foo<T extends U> = {
	colors: string[];
	sex: boolean;
	user: T
}

interface User {
  name: string;
  age: number;
}
// User 满足 U，所以 TS 不会报错
const firstPerson: Foo<User> = {
  colors: ['Blue'],
  sex: true,
  user: {
    name: 'Jack',
    age: 20
  }
}

interface Water {
	color: 'Transparent';
	age: 10900000000000
}
// Water 这个类型不满足 U，所以 TS 会报错
const secondPerson: Foo<Water> = {}

通过例子可以得出，定义的泛型被限制住了，不能随便传递，我们再来举另外一个例子来加深印象：

interface Properties {
	length: number;
}

function countStrLength<T extends Properties>(arg: T) {
	console.log('字符串的长度是' + arg.length)
}
// 正确，字符串里有 length 属性而且是 number 类型
countStrLength('Hello,world') 
// 传递的 number 类型没有 length 属性， TS 报错！
countStrLength(1000)

注意：泛型约束不仅仅约束 key ，它还限制了 valueType，像上面的 length: number 如果改为 length: string，TS 也会报错，因为 length 返回的是一个 number 类型而不是 string

4. 索引签名

索引签名 指的是 [K : keyType]: valuetype， 其中 K 可以随意命名，说的通俗点就是用来定义未知数量的 keyType: valueType，我们来看下例子就懂了

interface User {
	name: string;
	age: 20;
}

/*
假设 User 只有 name/age 两个属性，但后续可能会新增其它属性，且数量是未知的，
这种情况下我们就可以用索引签名来代表未知的 keyType: valueType
稍作修改就会变成下面这样
*/

interface User {
	name: string;
	age: number;
	[k: string]: any
}
// 接下来新增的的属性 TS 都不会报错了。
const firstPeople: User =  {
	name: 'Jack',
	age: 20,
	sex: 0,
	colors: ['Blue', 'Yellow']
}


// 如果你想让 [k: string]: any 变成可选状态，只需在后面加个问号 `?` 即可

interface User {
	name: string;
	age: number;
	[k: string]?: any
}
const secondPeople: User = {
	name: "Tony',
	age: 24,
}

提示：key 的 type 一般只有 string/number/symbol 这三个属性，对我而言 string 已经可以满足大部分需求了，少数情况才会用到 symbol，至于 number 那是少之又少了。

4. Record

Record 与 索引签名很像，都是用于定义未知数量的 keyType: valueType 形式，我们来看下例子

type R = Record<string, {
	name: string;
	age: number;
}>

const Players: R = {
	one: {
		name: 'Jack',
		age: 20
	},
	two: {
		name: 'Tony',
		age: 21
	},
	// ...
}

4.1 Record 与 索引签名有什么不同？

你觉得哪个能满足你的需求就用哪个。

5. infer

infer 从字面义理解起来比较抽象，但使用起来是比较简单，它就是一个提取类型的作用，
而且要使用它的是有前提条件的，它是必须由extends 和 ? 构成组合 ，我们来看下例子：

interface Animal {
  name: string;
  age: number;
  action: () => number
}

type GetType<T> = T extends { action: () => infer R} ? R : T

/**
因为 Animal 里的 action 存在，所以提取 action => 里的返回值，并用 R 表示。
以下等同于 type getAnimalType = number
*/
type getAnimalType = GetType<Animal> 

/**
因为不存在 action 所以返回 T
以下等同于 type getAnimalType = boolean
*/
type getAnimalType = GetType<boolean>

infer 不仅可以提取类型，它还支持联合

interface Animal {
	name: string;
	age: number;
}
type GetType<T> = T extends { name: infer R; age: infer R; } ? R : T

/**
因为 Animal 里的 name 和 age 都存在，所以提取 name/age 的类型并用 R 表示。
以下等同于 type getAnimalType = string | age
*/
type getAnimalType = GetType<Animal> 

6. typeof

typeof 可以用来复制某个变量里的类型声明
首先我们知道，当声明一个变量时，在没有指定类型的情况下 TS 会自动推导类型，比如

const UserName = 'Jack' 

// TS 自动推导后
const UserName:string = 'Jack' // 如果你有用 vscode 编辑器可以用鼠标移动到这个变量就可以看到效果了

知道这点后，我们再来看看下面的例子就能懂了

const UserName = 'Jack'
const AnotherUser: typeof UserName = 'Tony'

再来举个例子：假如某个函数里有个参数需要复制某个对象里的声明类型，我们就可以这样做：

const dog = {
	title: 'Dog	can speaking'
	properties: {
		name: 'Duolo',
		type: 'Big',
		color: 'Yellow',
	},
	actions: {
		say() { console.log('Hi, I am a human, not a dog at all.')},
	}
	
}

// 现在这个 properties 默认推导成 properties: any 类型，
function getPropertyByType(properties) {
	if (feature.name === 'Duolo') {
		dog.actions.say()
	}
}

// 如果我们要求 properties 传递进来的必须包含 dog.properties 类型，
// 这时就可以用到 typeof 
function getPropertyByType(properties: typeof dog['properties']) {
	if (feature.name === 'Duolo') {
		dog.actions.say()
	}
}

学完这几个关键字后，还需要不断去应用加深印象，
否则过不了多久还是会忘记，又得重新回来学习。

有错误欢迎指出，完！

最后

以上就是不安月饼为你收集整理的TypeScript & 详细解释 in、keyof、extends、索引签名、Record、typeof 的含义（不定时更新）的全部内容，希望文章能够帮你解决TypeScript & 详细解释 in、keyof、extends、索引签名、Record、typeof 的含义（不定时更新）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。