你不知道的 TypeScript 高级类型(小结)

type Extract<T, U> = T extends U "htmlcode">

interface Worker {
 name: string
 age: number
 email: string
 salary: number
}

interface Student {
 name: string
 age: number
 email: string
 grade: number
}


type CommonKeys = Extract<keyof Worker, keyof Student>
// 'name' | 'age' | 'email'



工具泛型
TypesScript 中内置了很多工具泛型，前面介绍过 Readonly 、 Extract 这两种，内置的泛型在 TypeScript 内置的 lib.es5.d.ts 中都有定义，所以不需要任何依赖都是可以直接使用的。下面看看一些经常使用的工具泛型吧。

Partial


type Partial<T> = {
 [P in keyof T]"htmlcode">

import React from 'react'

interface ButtonProps {
 type: 'button' | 'submit' | 'reset'
 text: string
 disabled: boolean
 onClick: () => void
}

// 将按钮组件的 props 的属性都改为可选
const render = (props: Partial<ButtonProps> = {}) => {
 const baseProps = {
 disabled: false,
 type: 'button',
 text: 'Hello World',
 onClick: () => {},
 }
 const options = { ...baseProps, ...props }
 return (
 <button
  type={options.type}
  disabled={options.disabled}
  onClick={options.onClick}>
  {options.text}
 </button>
 )
}


Required


type Required<T> = {
 [P in keyof T]-"htmlcode">

type Record<K extends keyof any, T> = {
 [P in K]: T
}


Record 接受两个类型变量， Record 生成的类型具有类型 K 中存在的属性，值为类型 T。这里有一个比较疑惑的点就是给类型 K 加一个类型约束， extends keyof any ，我们可以先看看 keyof any 是个什么东西。

大致一直就是类型 K 被约束在 string | number | symbol 中，刚好就是对象的索引的类型，也就是类型 K 只能指定为这几种类型。
我们在业务代码中经常会构造某个对象的数组，但是数组不方便索引，所以我们有时候会把对象的某个字段拿出来作为索引，然后构造一个新的对象。假设有个商品列表的数组，要在商品列表中找到商品名为 「每日坚果」的商品，我们一般通过遍历数组的方式来查找，比较繁琐，为了方便，我们就会把这个数组改写成对象。


interface Goods {
 id: string
 name: string
 price: string
 image: string
}

const goodsMap: Record<string, Goods> = {}
const goodsList: Goods[] = await fetch('server.com/goods/list')

goodsList.forEach(goods => {
 goodsMap[goods.name] = goods
})



Pick


type Pick<T, K extends keyof T> = {
 [P in K]: T[P]
}


Pick 主要用于提取接口的某几个属性。做过 Todo 工具的同学都知道，Todo工具只有编辑的时候才会填写描述信息，预览的时候只有标题和完成状态，所以我们可以通过 Pick 工具，提取 Todo 接口的两个属性，生成一个新的类型 TodoPreview。


interface Todo {
 title: string
 completed: boolean
 description: string
}

type TodoPreview = Pick<Todo, "title" | "completed">

const todo: TodoPreview = {
 title: 'Clean room',
 completed: false
}



Exclude


type Exclude<T, U> = T extends U "htmlcode">

interface Worker {
 name: string
 age: number
 email: string
 salary: number
}

interface Student {
 name: string
 age: number
 email: string
 grade: number
}


type ExcludeKeys = Exclude<keyof Worker, keyof Student>
// 'name' | 'age' | 'email'



取出的是 Worker 在 Student 中不存在的 salary 。
Omit


type Omit<T, K extends keyof any> = Pick<
 T, Exclude<keyof T, K>
>


Omit 的作用刚好和 Pick 相反，先通过 Exclude<keyof T, K> 先取出类型 T 中存在，但是 K 不存在的属性，然后再由这些属性构造一个新的类型。还是通过前面的 Todo 案例来说，TodoPreview 类型只需要排除接口的 description 属性即可，写法上比之前 Pick 精简了一些。


interface Todo {
 title: string
 completed: boolean
 description: string
}

type TodoPreview = Omit<Todo, "description">

const todo: TodoPreview = {
 title: 'Clean room',
 completed: false
}



总结
如果只是掌握了 TypeScript 的一些基础类型，可能很难游刃有余的去使用 TypeScript，而且最近 TypeScript 发布了 4.0 的版本新增了更多功能，想要用好它只能不断的学习和掌握它。希望阅读本文的朋友都能有所收获，摆脱 AnyScript。

                                
                                

                                    TypeScript,高级类型 
                                

                                    标签：
                                        
TypeScript,高级类型