首页 | Ben 前端工程师

TypeScript深入学习

技术笔记2021-11-18538

如果你已经在用 TypeScript，相信一定感受到它带来的类型安全和智能提示。但除了基础的类型声明，TypeScript 还提供了许多“隐藏的宝藏”——高级类型。它们就像工具箱里的瑞士军刀，可以帮我们写出更灵活、更优雅的代码。接下来，我们就一起来看看这些高级类型的原理，以及它们在实际开发中的妙用吧。

is

功能

is 关键字一般用于函数返回值类型中，判断参数是否属于某一类型，并根据结果返回对应的布尔类型。

场景

typescript 复制代码

function isString (s: unknown): boolean {
  return typeof s === 'string'
}
function toUpperCase (x: unknown) {
  if (isString(x)) {
    x.toUpperCase() // × Error, Object is of type 'unknown'
  }
}

const isString = (s: unknown): s is string => typeof val === 'string'

function toUpperCase (x: unknown) {
  if (isString(x)) {
    x.toUpperCase()
  }
}

infer

功能

infer 是让 TypeScript 自己推断，并将推断的结果存储到一个类型变量中，infer 只能用于 extends 语句中。

场景

typescript 复制代码

type T0 = ReturnType<() => string> // string
type T1 = ReturnType<(s: string) => void> // void
type T2 = ReturnType<<T>() => T> // unknown

//  元组转联合类型
type Flatten<T> = T extends Array<infer U> ? U : never

type T0 = [string, number]
type T1 = Flatten<T0> // string | number

keyof

功能

将一个类型的属性名全部提取出来当做联合类型

场景

typescript 复制代码

// 1. 定义一个接口
interface Person {
  name: string
  age: number
}
type newPerson = keyof Person // 等于type PersonKeys = 'name' | 'age'
const x1: newPerson = 'name' // √
const x2: newPerson = 'age' // √
const x3: newPerson = 'height' // ×

typeof

功能

此操作符可以获取一个变量或对象的类型

场景

typescript 复制代码

//  一
interface Person {
  name: string
  age: number
}
const sem: Person = { name: 'semlinker', age: 30 }
type Sem = typeof sem // type Sem = Person

//  二
const kakuqo = {
  name: 'kakuqo',
  age: 30,
  address: {
    province: '广东'
  }
}
type Kakuqo = typeof kakuqo
/*
 type Kakuqo = {
    name: string;
    age: number;
    address: {
        province: string;
        city: string;
    };
}
*/

//  三
function toArray (x: number): Array<number> {
  return [x]
}

type Func = typeof toArray // -> (x: number) => number[]

扩展

typeof 和 keyof 操作符
typeof 操作符可以用来获取一个变量或对象的类型。
keyof 操作符可以用于获取某种类型的所有键，其返回类型是联合类型。
它们可以结合一起使用：

示例

typescript 复制代码

const COLORS = {
  red: 'red',
  blue: 'blue'
}
// 首先通过typeof操作符获取Colors变量的类型，然后通过keyof操作符获取该类型的所有键，
// 即字符串字面量联合类型 'red' | 'blue'
type Colors = keyof typeof COLORS
let color: Colors
color = 'red' // √
color = 'blue' // √
color = 'yellow' // × Type '"yellow"' is not assignable to type '"red" | "blue"'.

pick

功能

从类型 T 中选择出属性 K，构造成一个新的类型。

场景

从一个复合类型中，取出几个想要的类型的组合

typescript 复制代码

// 原始类型
interface Todo {
  title: string
  description: string
  completed: boolean
}
// 如果我只想要name和age怎么办，最粗暴的就是直接再定义一个
interface TodoPreview {
    title: 'Clean room',
    completed: false,
}
// 弊端：在Todo发生改变的时候，TodoPreview 并不会跟着一起改变，所以应该这么写
interface TodoPreview extends Pick<Todo , 'title' | 'completed'>;

实现

typescript 复制代码

type MyPick<T, K extends keyof T> = {
  [k in K]: T[k]
}

扩展

泛型中使用 extends 并不是用来继承的，而是用来约束类型的。所以这个 K extends keyof T，应该是说 key 被约束在 T 的 key 中，不能超出这个范围，否则会报错

Readonly

功能

将接口设置为只读属性，不能修改
与 ES6 中的 const 很相似，但 readonly 只能用在类（TS 里也可以是接口）中的属性上，相当于一个只有 getter 没有 setter 的属性的语法糖。

场景

保护属性不被修改，否则报错

typescript 复制代码

public readonly state = {
  name: 'jsben',
};
state.name ='xiaoxing' // × 只读属性能修改

实现

typescript 复制代码

type MyReadonly<T> = {
  readonly [p in keyof T]: T[p]
}

Partial

功能

将接口属性设为可选类型

场景

将接口属性设为可选，非必填

typescript 复制代码

type PersonOptional = {
  name: string
  age: number
}
function test(parmas:PersonOptional)=>{}

test({name:'jsben'}) × // 缺失age属性

type newPersonOptional =  Partial(PersonOptional)

//  等价于
type newPersonOptional = {
  name?: string
  age?: number
}
function test(parmas:newPersonOptional )=>{}

test({name:'jsben'}) √ // age属性为可选

实现

typescript 复制代码

type myPartial<T> = {
  [K in keyof T]?: T[K]
}

扩展

Readonly 和 Partial 属于映射类型
映射类型可以将已知类型的每个属性都变为可选的或者只读的。

Exclude

功能

排除联合类型中的一部分的内容

场景

从 T 中剔除可以赋值给 U 的类型。

typescript 复制代码

Exclude<T,U>
type myTypes = 'name' | 'age' | 'height'
type someMyTypes = Exclude<myTypes, 'name'>
// 等于 type someMyTypes = 'age' | 'height'

实现

typescript 复制代码

type myExclude = <T,U> = T extends U ? never : T

扩展

Exclude | Extract | NonNullable | ReturnType | InstanceType 属于条件类型
条件类型用来表达非均匀类型映射，可以根据一个条件表达式来进行类型检测，从两个类型中选出其中一个。

元组转对象

功能

传入一个元组类型，将这个元组类型转换为对象类型，这个对象类型的键/值都是从元组中遍历出来的

场景

typescript 复制代码

const tuple = ['tesla', 'model 3'] as const
const result: TupleToObject<typeof tuple> // expected { tesla: 'tesla', 'model 3': 'model 3'}

实现

typescript 复制代码

type TupleToObject = <T extends readonly any[]> = {
  [k in T[number]] : k
}

获取第一个元素

功能

实现一个通用 First<T>，它接受一个数组 T 并返回它的第一个元素的类型

场景

泛型传入一数组获取到第一个元素类型

typescript 复制代码

type arr1 = ['a', 'b', 'c']
type arr2 = [3, 2, 1]
type head1 = First<arr1> // expected to be 'a'
type head2 = First<arr2> // expected to be 3

实现

typescript 复制代码

type First = <T extends readonly any[]> = T['length'] extends 0 ? never : T[0]

获取数组长度

功能

创建一个通用的 Length，接受一个 readonly 的数组，返回这个数组的长度。

场景

泛型传入一数组获取到第一个元素类型

typescript 复制代码

type tesla = ['tesla', 'model 3']
type spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON']

type teslaLength = Length<tesla> // expected 2
type spaceXLength = Length<spaceX> // expected 3

实现

复制代码

type Length = <T extends readonly any[]> = T['length']

Awaited

功能

用泛型来描述 Promise 返回的类型。

场景

假如我们有一个 Promise 对象，这个 Promise 对象会返回一个类型。在 TS 中，我们用 Promise 中的 T 来描述这个 Promise 返回的类型。请你实现一个类型，可以获取这个类型

typescript 复制代码

Promise<T>

实现

typescript 复制代码

type Awaited<R extends Promise<any>> = R extends Promise<infer T> ? T : R

https://www.wenjiangs.com/doc/typescript-infer

暂无评论，欢迎给我评论！