Ts系列之条件类型

Ts系列之条件类型

前言

本片文章主要对ts条件类型的用法做一个讲解。

一、初遇

1、首先我们来看看一个小例子：

interface Person {
  name: string;
  age: number;
}
interface Son extends Person{
  hobby: string;
}
const son1: Son = {
  name: 'son1',
  age: 1,
  hobby: 'son2'
}

解析：

这里定义了两个接口，分别是Person和Son，然后定义son1去实现Son接口

2、做个小改动，那么我现在想要根据不同的类型，去返回指定类型的事情，要怎么做
示例：

type Person = {
    name: string;
    age: number
}
type Car = boolean
type TestType<T> = T extends object ? Person : Car
type T1 = TestType<string>
const test: T1 =  true

解析：
那么这里定义Person和Car两个类型，首先去判断，泛型T是不是继承object类型，如果是的话那么返回Person类型，如果不是那么返回Car类型
那么示例中的string类型当然不是object类型，所以测试变量test需要赋值为boolean类型才可以。

二、条件判断

1、看到上面的类型表达式，是不是和js中的三元表达式很像。
在js中支持的链式判断，在ts中也是同样支持这种写法。这里需要注意是写法，并不是用法也是一样的。
先看js中的链式判断：
const test = a ? b : c ? d : e
这很好理解：先判断a是true吗是的话返回b不是的话返回c，后面依次类推，就不详说了。
那么来看看ts的链式判断：

type TypeName<T> = T extends string
    ? "string"
    : T extends number
        ? "number"
        : T extends boolean
            ? "boolean"
            : T extends undefined
                ? "undefined"
                : T extends Function
                    ? "function"
                    : "object"
type T0 = TypeName<string>; // "string"
type T1 = TypeName<"a">; // "string"
type T2 = TypeName<true>; // "boolean"
type T3 = TypeName<() => void>; // "function"
type T4 = TypeName<string[]>; // "object"

解析：
这里的意思是当传入的泛型T，可被赋值为string、number、boolean、undefined、Function、的时候返回不同结果类型。

2、当然如果你传入的泛型是联合类型，那么给你返回结果也会是联合类型。
因为如下示例：

type T10 = TypeName<string | (() => void)>; // "string" | "function"
type T12 = TypeName<string | string[] | undefined>; // "string" | "object" | "undefined"
type T11 = TypeName<string[] | number[]>; // "object"

而传入的联合类型会扩展为如下示例：

//T10:
string extends string
    ? "string"
    : T extends number
    ? "number"
    : T extends boolean
    ? "boolean"
    : T extends undefined
    ? "undefined"
    : T extends Function
    ? "function"
    : "object" | 
"function" extends string
    ? "string"
    : T extends number
    ? "number"
    : T extends boolean
    ? "boolean"
    : T extends undefined
    ? "undefined"
    : T extends Function
    ? "function"
    : "object"

所以很好理解为什么传入泛型T为联合类型的时候，返回的类型结果也会是联合类型。

三、待补充