TS中的条件类型(ReturnType)

本偏介绍TS另一种高级类型-条件类型。

官方文档：https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types

1、条件类型是一种由条件表达式所决定的类型

2、条件类型使类型具有了不唯一性,同样增加了语言的灵活性

例如：

T extends U ? X : Y

若类型T可被赋值给类型U,那么结果类型就是X类型,否则就是Y类型。

条件类型约束

泛型约束的例子：

type MessageOf<T extends { message: unknown }> = T["message"];

在此示例中，我们使用 message: unknown 约束泛型T。

如果我们想 MessageOf 支持任何类型，我们可以通过将约束和条件类型一起使用：

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

如果条件成立，在 true 分支内，TypeScript 知道 T 将具有一个 message 属性。否则将会返回 never 类型。

分布条件类型

当条件类型给定联合类型时，它们将变为分布式。

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

如果我们将联合类型传入ToArray，则条件类型将应用于该联合的每个成员。

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

type StrArrOrNumArr = ToArray<string | number>;

StrArrOrNumArr 类型是 string[] | number[]

避免这种分配性的行为。可以用方括号将 extends 关键字的每一侧括起来。

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

type StrOrNumArr = ToArrayNonDist<string | number>;

StrArrOrNumArr 类型是 (string | number)[]

内置条件类型

预定义的有条件类型

TypeScript 2.8在lib.d.ts里增加了一些预定义的有条件类型：

Exclude<T, U> -- 从T中剔除可以赋值给U的类型。
Extract<T, U> -- 提取T中可以赋值给U的类型。
NonNullable<T> -- 从T中剔除null和undefined。
ReturnType<T> -- 获取函数返回值类型。
InstanceType<T> -- 获取构造函数类型的实例类型。

用法看这里：文档链接

type T00 = Exclude<"a" | "b" | "c" | "d", "a" | "c" | "f">;  // "b" | "d"
type T01 = Extract<"a" | "b" | "c" | "d", "a" | "c" | "f">;  // "a" | "c"

type T02 = Exclude<string | number | (() => void), Function>;  // string | number
type T03 = Extract<string | number | (() => void), Function>;  // () => void

type T04 = NonNullable<string | number | undefined>;  // string | number
type T05 = NonNullable<(() => string) | string[] | null | undefined>;  // (() => string) | string[]

function f1(s: string) {
    return { a: 1, b: s };
}

class C {
    x = 0;
    y = 0;
}

type T10 = ReturnType<() => string>;  // string
type T11 = ReturnType<(s: string) => void>;  // void
type T12 = ReturnType<(<T>() => T)>;  // {}
type T13 = ReturnType<(<T extends U, U extends number[]>() => T)>;  // number[]
type T14 = ReturnType<typeof f1>;  // { a: number, b: string }
type T15 = ReturnType<any>;  // any
type T16 = ReturnType<never>;  // any
type T17 = ReturnType<string>;  // Error
type T18 = ReturnType<Function>;  // Error

type T20 = InstanceType<typeof C>;  // C
type T21 = InstanceType<any>;  // any
type T22 = InstanceType<never>;  // any
type T23 = InstanceType<string>;  // Error
type T24 = InstanceType<Function>;  // Error

重点：ReturnType：获取函数返回值的类型

function getUser() {
  return {name: 'xxx', age: 10}
}

type GetUserType = typeof getUser;
type ReturnUser = ReturnType<GetUserType>

TypeScript提供了几种实用的内置工具类型，以方便进行常见的类型转换。官方链接：地址

Parameters：获取函数参数的类型

function getUser() {
  return {name: 'xxx', age: 10}
}

type GetUserType = typeof getUser;
type ReturnUser = Parameters<GetUserType>

ConstructorParameters 获取构造函数的参数类型

class Person {
  name: string;
  constructor (name: string) {
    this.name = name
  }
  getName() {
    console.log(this.name)
  }
}
// 获取函数的参数类型
type Params = ConstructorParameters<typeof Person>