typescript进阶

·  阅读 138

如果想了解ts基础知识,可以看这篇

本文会讲几个可能需要特别注意的用法

函数重载

文档

一个函数可以以多种参数类型调用,我们可以用重载来表示。
重载包括两部分,前面的签名和具体的实现,其中签名只有类型,实现要兼容前面的所有签名,但不可以直接以实现的签名来调用。
比如

//签名,可以接收一个或三个参数
function makeDate(timestamp: number): Date;
function makeDate(m: number, d: number, y: number): Date;
//实现包括1个参数或三个参数两种情况,虽然具体实现支持两种参数的场景,但是只能按照上述签名来调用
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
  if (d !== undefined && y !== undefined) {
    return new Date(y, mOrTimestamp, d);
  } else {
    return new Date(mOrTimestamp);
  }
}
const d1 = makeDate(12345678);
const d2 = makeDate(5, 5, 5)
复制代码

keyof 操作符

文档

获取一个对象的key组成的字面量union类型,比如

type Point = { x: number; y: number };
type P = keyof Point;

//type P=x|y
复制代码

如果key是string类型的话,也兼容number,即

type Mapish = { [k: string]: boolean };
type M = keyof Mapish;
//type M = string | number

复制代码

Conditional Types

文档

条件类型类似于条件表达式,格式为

SomeType extends OtherType ? TrueType : FalseType;
复制代码

即如果类型someType 属于 otherType,则该表达式返回TrueType,否则返回FalseType

主要用于泛型,比如

type NameOrId<T extends number | string> = T extends number
  ? IdLabel
  : NameLabel;
复制代码

如果返回的类型是never,则可用于对指定类型进行操作,比如

type ToArray<Type> = Type extends any ? Type[] : never;

ToArray<string>// string[]
复制代码

或者利用Type Constraints

type MessageOf<T> = T extends { message: unknown } ? T["message"] : never;
复制代码

我们还可以使用关键字Infer进行类型推断,然后返回推断类型相关的类型,比如

type Flatten<Type> = Type extends Array<infer Item> ? Item : Type;
复制代码

Mapped Types

文档

用来将对象类型转化为另一种对象类型。
其中对象key可以用[Property in keyof Type]表示,比如

type OptionsFlags<Type> = {
  [Property in keyof Type]: boolean;
};
复制代码

使用 as 进行映射

type MappedTypeWithNewProperties<Type> = {
    [Properties in keyof Type as NewKeyType]: Type[Properties]
}
复制代码

这里也可以用返回never来过滤类型,比如(案例可以参考这里

type P<T, K extends keyof T> = {
    [P in keyof T as P extends K ? P:never]: T[P];
};

//等效于

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

//等效于 

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};
复制代码

工具类型

文档

这里其实就是对指定类型进行的操作,对应源码在这里,相关解读可以看TypeScript: Understand Built-In/Utility Types

其他资料

分类:
前端
收藏成功!
已添加到「」, 点击更改