Typescript 类型编程，从入门到念头通达

357次阅读  |  发布于2年以前

前言

探索经历

我不知道我不知道

我曾经以为 Tyepscript 只是在 Javascript 基础上加一些类型注释，是 JavaScript 的增强版而已，属于有手就会。

我知道我不知道

直到我用到了 Prisma 这个 NodeJS ORM 工具，其生成的类型定义，可以根据你的参数，完美应对关联查询、部分查询等各种场景，完全吊打其他 NodeJS ORM。出于好奇，我看了以下源码：

这还是我认识的 Typescript 吗？？？

我只知道我知道的

后面浏览 Github Trending[1] 时发现了 type-challenges[2] 这个项目（俗称类型体操）。

微信截图_20220806230248.png

然后就开始了我的 TS 编程挑战，但在刷的过程中，我发现已经做过的，似乎感觉会了，但到下一题还是写不出来，甚至过几天重刷还会忘记怎么写。

154390DB.png

我不知道我知道的

然后我停止刷题，开始思考他们到底有什么规律，我似乎顿悟了：

TS 类型本身就是一个很复杂的、独立的语言，不仅仅是 JS 的增强和类型注释。

然后我就尝试着从语言的层面理解 TS 类型，瞬间豁然开朗，仿佛进入了桃花源，那些类型挑战不过是这些基础知识的应用而已，再也不用死记硬背。

0070XTeOgy1gtv57eag5fj606l05y0sq02.jpg

学习建议

学习目标

大纲

前面我们说了 TS 类型自己就是一门复杂、独立的语言，那么从我们语言的角度设计这门指南：

手册指南

类型变量定义

类型变量的方式有三种，分别为 type、interface、enum，他们都相当于 JS 中的 const，一旦定义就不可改变，三者的区别是：

例如：

/** type 方式定义 */
type A = string; // 普通类型
type B = number[]; // 数组
type C = (num: number) => number; // 函数
type D = { age: number; name: string  }; // 对象

/** enum */
enum Color {
    GREEN,
    RED,
    BLUE
}

/** interface 定义 */
interface Sum {  // 函数（没必要这样定义，除非你的函数有其他属性）
  (num1: number, num2: number): number;
}
const getSum: Sum = (a: number, b: number) => a + b

interface Person { // 对象
    name: string;
    age: number;
}
复制代码

类型数据和值

在官方文档中第一篇就介绍了 TS 的基础类型包括了：

但是这里要问一下大家，除了这些难道就没有其他的值了吗？？？

大家请看下面的例子：

type A = 1;
const a: A = 1; //完全正确

type B = { name: 'zhang', age: 18 };
const b: B = { name: 'zhang', age: 18 }; // 毫无报错

type C = [1, number, 2, string];
const c: C = [1, 111, 2, "hello"]; // 没任何毛病

type S = `num - ${A}`; // 'num - 1' 可以使用字符串模板，简直离谱
复制代码

从上面的例子大家也可以得出一个结论：

JS 中合法的值，在 TS 类型中同样合法，也就是 _TS 类型的值 = TS 基础类型 + JS 值_，并且可以混用。

类型的父子关系

类型是有父子关系的，子类型的值可以赋值给父类型，但是父类型的值是不能够赋值给子类型的。例如：

type ParentType = 1 | 2 | string
type SubType = 1

let parentData: ParentType = 2;
let subData: SubType = 1;

subData = parentData; // ❌ 父类型不能赋值给子类型的值
parentData = subData; // 
复制代码

这一特性对于后面要讲的泛型和条件判断有着至关重要的作用，我们先简单看一下类型中的条件语句：

type IsSub = SubType extends ParentType ? true : false; // IsSub 的类型值为 true
复制代码

了解了父子类型的基本概念后，我们还需要掌握在 类型数据和值 中提到的各种 TS 类型之间的父子关系，为后面学习泛型、条件、递归等打下基础。

1、具体值是基础类型的子类型

const a: 1 = 1;
const b: number = a; // ok

const c: true = true;
const d: boolean = c; // ok
复制代码

2、联合类型中的部分是整体的子类型

3、never 类型是所有类型的子类型

function foo(): never {
  throw new Error()
}

const a: 1 = foo(); // 可以赋值，类型不会报错就证明了 never 类型是 1 的子类型
复制代码

4、对象判断子类型，需要逐个属性比较

type ButtonProps = {
  size: 'mini' | 'large',
  type: 'primary' | 'default'
}

type MyButtonProps = {
  size: 'mini',
  type: 'primary' | 'default',
  color: 'red' | 'blue'
}

type IsSubButton = MyButton extends Button ? true : false; // true
复制代码

在进行比较时，首先 MyButtonProps 的 size 和 type 都是 ButtonProps 中对应属性的子类型，虽然 MyButtonProps 比 ButtonProps 多了个 size ，但其不参与比较。

5、undefined 在 tsconfig strictNullChecks 为 true 的情况下是 void 和 any 类型子类型，为 false 的情况下则除 never 的子类型

// strictNullChecks 为 true（默认行为）

let a: undefined;

let b: number = 1;
let c: void;
let d: any = 'jack'

b = a; // ❌ undefined 不是其他类型子类型
c = a; //  undefined 是 void 类型子类型
d = a; //  undefined 是 any 类型子类型
复制代码
// strictNullChecks 为 false

let a: undefined;

let b: number = 1;
let c: void;

b = a; //  undefined 是其他类型子类型
c = a; //  undefined 是 void 类型子类型
d = a; //  undefined 是 any 类型子类型
复制代码

6、undefined 在 tsconfig strictNullChecks 为 true 的情况下是 any 类型子类型，为 false 的情况下则除 never 的子类型

父子关系与联合类型

当子类型与父类型组成联合类型时，实际效果等于父类型。例如：

type A = number | 1; // number
type B = never | string; // string （never 前面说了是所有类型的子类型）
复制代码

变量取属性

我们知道在 JS 中对象是可以通过 . 操作符，而在 TS 类型中，也能进行相似的操作。例如：

// 普通对象
interface Person {
    name: string;
    age: number;
}
type Name = Person['name']; // string

// enum 枚举
enum Color {
    Red,
    Green,
    Blue
}
type Red = Color.Red; // 0

// 数组（数组是没法获取 length 属性的，因为有多少项是不固定的）
type Names = string[];
type FirstName = Names[0]; // string
type Len = Names['length']; // ❌

// 元组（元组是可以获取 length 属性的，因为其长度是固定的）
type Language = ['js', 'java', 'python', 'rust'];
type Rust = Language[3]; // rust
type Len = Language['length']; // 

// 字符串
type Str = 'hello';
type S = Str[0]; // ⚠️ 注意是 string，不是 h
type StrLen = Str['length'] // number 而非具体的数字
复制代码

⚠️ 注意，基础类型是可以取到原型的定义的，所以并非无属性。

// 字符串原型方法
type Concat = 'h'['concat']; // String.prototype.concat 的类型定义

// 数字原型方法
type N = 1;
type ToFixed = 1['toFixed'] // Number.prototype.toFixed 的类型定义
复制代码

获取类型所有属性 key

想要知道对象有哪些属性，可以使用 keyof 关键词。例如：

interface Person {
    name: string;
    age: number;
}

type Keys = keyof Person; // 返回属性的联合联合类型
复制代码

⚠️箭头函数类型和空对象没有 key。例如:

type F = () => void;
type K = keyof F; // never;
type Foo = keyof {}; // never;
复制代码

条件语句

TS 类型编程中并没有其他语言中的 if/else 语法，而是使用了三元运算符 X extends Y ? expr1 : expr2。

type A = 1 extends number ? 1 : never; // 1
type IsRed = 'blue' extends 'red' ? true : false; // false
复制代码

类型中的函数（泛型）

泛型基础和定义

TS 泛型就像 JS 的函数一样，可以根据输出的类型，决定返回的类型。我们看一个简单的例子：

// JS 函数
function foo(arg) {
    return arg;
}

// TS 泛型
type Foo<T> = T;
复制代码

在 foo 函数作用是，你给他什么值，它就返回什么值；Foo 泛型则是你给他什么类型，它返回什么类型。

除了上面的定义方式，还可以使用 interface 定义。例如：

interface FormData<T> {
    name: string;
    data: T;
}
复制代码

泛型约束

我们写 JS 函数的时候，为了代码的健壮性，通常会对输入参数进行校验，泛型中通过 extends 关键字也实现了类似的功能。例如：

class Person {
    name: string;
}
function getName(user) {
    if (!(user instanceof Person)) {
        throw new Error(`${user} is not instanceof "Person"`);
    }
    return user.name;
}


type GetName<U extends Person> = U['name'];
复制代码

泛型参数默认值

我们知道 ES6 后函数支持参数默认值，同样的，在 TS 类型编程中，泛型也有默认值的能力。例如：

// js 函数参数默认值
function getSum(a = 0, b = 0) {
    return a + b;
}
const sum = getSum(); // 0

// TS 泛型默认值
type UnionType<T = number, U = string> = T | U;
type MyType = UnionType; // string | number
复制代码

泛型与条件判断

上面的示例中，我们只列举了简单的场景，当配合条件语句的时候，泛型的灵活性就更大了。例如：

type IsBoolean<T> = T extends boolean ? true : false;

type A = IsBoolean<true>; // true
type B = IsBoolean<1>; // false;
复制代码
// 嵌套条件语句
type Upper<T extends string> = T extends 'a' 
    ? 'A'
    : (
        T extends 'b' ? 'B' : T // 嵌套了另一个条件语句
    );

type B = Upper<'b'>; // "B";
复制代码

学完本小节，你可以试着挑战：

泛型与条件与类型推断变量

如果以上介绍的内容对你来说虽然既陌生又熟悉，接下来我们引入的一个关键词你可能从未听过，即 infer。

infer 可以在 X extends Y ? expr1 : expr2 的 Y 中使用类型变量，并且这个类型变量，可以在后续的 expr1 中使用。

例如我们需要得到函数的返回值的类型可以如下操作：

type ReturnType<T> = T extends ((...args: any) => infer R) ? R : never;

type GetSum = (a: number, b: number) => number;

type A = ReturnType<GetSum> // number;
复制代码

其中 R 既类型推断变量。

extends 是一个大忙人：

  • 在 JS 中，担当类的继承重担，例如 App extends Component
  • 在 TS 类型中，当泛型约束，例如 type ToUpper<S extends string> = xxx
  • 在 TS 类型中，条件判断的关键词 type ReturnType<T> = T extends () => infer R ? R : never'

学完本小节，你能完成的挑战：

内置泛型工具

Typescript 给我们内置了一些极其有用的泛型工具，我们本小节挑一些简单说明：

type Person = {
    name: string;
    age: number;
    id: number;
}

// Pick 挑选出指定属性，生成新对象类型
type UserInfo = Pick<Person, 'name' | 'age'>; // 挑选出 { name: string; age: number }

// Omit 排除指定的属性，生成新的对象类型
type UserInfo2 = Omit<Person, 'id'>; // 排除 id，生成  { name: string; age: number }

// Partial 将对象所有属性变为可选
type PartialPerson = Partial<Person>; // { name?: string; age?: number; id?: number }

// Readonly 将对象所有属性变为只读
type ReadonlyPerson = Readonly<Person>; // { readonly name: string; readonly age: number; readonly id: number }

// Record 生成对象类型，例如
type PersonMap = Record<number, Person>; // { [index: number]: Person }

// Exclude 排除一些联合类型
type UserInfoKeys = Exclude<keyof Person, 'id'>; // 'name' | 'age'
复制代码

对象类型的操作

属性修饰

对象的属性是可以有修饰符的，目前有两种修饰符，分别是 readonly 关键字对应的可选属性 和 ?: 对应的可选属性。例如：

type Person = {
    name: string;
    age?: number; // 1、可选属性
    readonly id: number; // 2、只读属性
}

const person: Person = {
    name: '张三',
    id: 1,
    // 没有 age 属性，不报错，说明 age 可选
}

person.id = 2; // 报错，不能修改只读属性
person.age = 18; // 正常
复制代码

属性修饰与父子关系

父子类型主要讨论属性的存在与否，所以：

type A = { name: string };
type B = { name?: string };

let a: A = { name: 'a' };
let b: B = {  };

a = b; // ❌ B 类型中 name 是 `string |undefined`, 是 A 类型中 `string` 的父类型，所以不能赋值
b = a; // OK，string 可以赋值给 `string |undefined`
复制代码
type A = { name: string };
type B = { readonly name: string };

let a: A = { name: 'a' };
let b: B = { name: 'b' };

a = b; // OK
b = a; // OK

a.name = 'abc'; // OK，a 的类型还是 A，所以可以修改
复制代码

对象类型的遍历

我们知道在 JS 中可以使用 for/in 遍历对象的属性，在 TS 类型编程中也有类似的方式，不过更加简洁。

例如我们把所有的属性都加上 readonly 修饰符：

// js 对象遍历
const person = {
    name: '张三',
    age: 18,
    id: 1,
}

for (const key in person) {
    console.log(key, person[key]);
}

// ts 类型对象遍历
type Person = {
    name: string;
    age?: number;
    readonly id: number;
}

type Readonly<T> = {
    readonly [Key in keyof T]: T[Key];
}
复制代码

上述示例中有以下几点：

学完本小结，你可以试着挑战：

元组类型的操作

只读修饰符 & 父子关系

在元组中也可以像对象那样在元组前面加上 readonly 代表元组的每一项都是只读的。例如：

type Arr = readonly [1, number];
const a: Arr = [1, 2];
a[0] = 3; // Error: readonly
复制代码

如果两个类型_元素完全相同_ 的前提下，只读的和非只读是有父子关系的：非只读是只读的子类型。具体没查到原因，不过可以理解自我催眠为 readonly 表示的更信息更多。

type A = readonly [1, 2, 3];
type B = [1, 2, 3];

let a: A = [1, 2, 3];
let b: B = [1, 2, 3];

a = b; // 非只读可以赋值给只读的
b = a; // ❌ 只读的元组不能赋值给非只读的
复制代码

学完本节你可以搞定：

元组的解构

元组的解构和 JS 数组的解构十分相似。假设我们需要将两个元组类型合并成一个，我们可以如下操作：

// JS 合并两个数组
function concat(arr1, arr2) {
    return [...arr1, ...arr2);
}
const arr = concat([1], [2, 3]); // [1,2,3]

// TS 合并两个元组
type Concat<T extends any[], U extends any[]> = [...T, ...U];

type Result = Concat<[1], [2, 3]> // [1, 2, 3]
复制代码

readonly 的元组转为非 readonly，我们可以使用解构完成。例如：

type A = readonly [number, string];
type B = [...A]; // 变成了非 readonly 了

const b: B = [1, 'a']
b[0] = 2;
复制代码

因为 readonly 是针对整个元组而言的，所以通过解构，我们就将每个元素取出来了，重新赋值给另一个类型变量就解决这个问题了。

学完本节，你可以完成如下挑战：

元组的遍历

有些情况下，我们需要对每个元素进行判断和处理，此时就需要使用元组的遍历，元组的遍历有两种方式：

递归方式遍历

我们以 多维元组拍平为一维元组 为例，来看看怎么用递归的思想实现。

// JS 中用递归思想解决数组拍平问题
function flatten(arr) {
    if (arr.length === 0) return [];
    const [first, ...rest] = arr;
    if (Array.isArray(first)) {
        return [...flatten(first), ...flatten(rest)]
    }
    return [first, ...flatten(rest)];
}
const a = flatten([1, [[2]]]); // [1, 2]

// TS 中用递归思想解决元组拍平问题
type Flatten<T extends any[]> = T extends [infer First, ...infer Rest]
    ? (First extends any[]
        ? [...Flatten<First>, ...Flatten<Rest>]
        : [First, ...Flatten<Rest>])
    : [];

type a = Flatten<[1, [[2]]]>; // [1,2]
复制代码

相信能看懂 JS 逻辑的人都能看懂 TS 逻辑，两者几乎一致：

最终返回的类型就是通过递归拍平的元组类型了。

学完本小结，你可以解决：

对象类型遍历方式

我们再用示例说明如何使用对象类型遍历方式处理元组。

// JS 示例：希望 [1, () => 2+3, 4] 能够被处理成 [1, 5, 4]
function getArrVal(arr) {
    for(let key in arr) {
        if (typeof arr[key] === 'function') {
            arr[key] = arr[key]();
        }
    }
    return arr;
}

// Ts 示例：希望 [1, () => number, string] 能够被处理成 [1, number, string]
// 对象遍历的方式
type GetType<T extends any[]> = {
    [K in keyof T]: T[K] extends () => infer R ? R : T[K]
}

// 递归的处理方式
type GetType<T extends any[]> = T extends [infer First, ..]
复制代码

总结：

学完本节，你可以挑战：

元组与索引与联合类型

元组其实就是个数有限、类型固定的数组类型。所以前面也讲过，其可以使用数字作为下标来访问的，例如：

type tupleStr = ['a', 'b', 'c'];
type A = tupleStr[0]; // 'a'
type B = tupleStr[1]; // 'b'
复制代码

如果这个索引是 number 会发生什么呢？

type tupleStr = ['a', 'b', 'c'];
type UnionStr = tupleStr[number]; // 'a' | 'b' | 'c' 变成了联合类型
复制代码

因为 number 代表了可能是 0 也可能是 1 或者 2，所以这些可能性组成的集合就是联合类型。

学完本节你应该可以挑战：

字符串操作

字符串的相关操作主要体现在两方面：

字符串类型推导和解构

字符串类型推导和解构，是将一个完整字符串分解为几个部分，然后对各个部分我们可以进行各种处理。

这里需要注意的是，在拆分的时候需要注意是否含有字符串字面量作为分割符，有和没有的情况，分割后的变量含义并不相同。

推导类型中有字符串字面量的情况

我们需要实现一个将字符串类型中 _ 去除的功能，其可以为：

type DelUnderline<T extends string> = T extends `${infer LeftWords}_${infer RightWords}` 
    ? `${LeftWords}${RightWords}` 
    : T;

// 测试用例
type HelloWorld = DelUnderline<'hello_world'>; // helloworld（LeftWords 为 hello，RightWords 为 world）
type World = DelUnderline<'_world'>; // world（LeftWords 为空字符串，RightWords 为 world）
type Hello = DelUnderline<'hello_'>; // hello（LeftWords 为 hello，RightWords 为空字符串）
复制代码

我们从上面例子可以得到结论：

当推断类型中有字符串字面量作为边界时，如上例的 _，其解构的左边 LeftWords 是左侧所有字符串的代表，右边 RightWords 是右侧所有字符串的代表，并且可以代表空字符串。

学完本节，你可以挑战：

推导类型中无字符串字面量的情况

假设我们要实现 TS 类型的首字母大写的效果，我们可以这样写：

type MyCapitalize<T extends string> = T extends `${infer First}${infer Rest}` 
    ? `${Uppercase<First>}${Rest}` 
    : T;

type A = MyCapitalize<'hello'>; // "Hello"（First 为 "h"，Rest 为 "ello"）
type B = MyCapitalize<'b'>; // "B" （First 为 "h"，Rest 为空字符串）
type C = MyCapitalize<''>; // 当为空字符串时，会走到 false 的分支，返回空字符串
复制代码

我们从上面例子可以得到结论：

当推断类型中没有字符串字面量作为边界时，第一个变量作为第一个字符，第二个变量代表剩下的字符，可以为空字符串。当然如果有三个变量，${A}${B}${C}，则第一个变量 A 代表第一个字符，B 代表第二个字符串，C 代表剩下的字符。

学完本节，你可以挑战：

字符串字面量类型的遍历

字符串字面量类型的遍历，核心是使用递归思想以及上面提到的字符串的解构，这在后面很多转换中都很重要。

这里我们使用字符串类型转元组类型小试牛刀：

type StringToTuple<T extends string> = T extends `${infer First}${infer Rest}` 
    ? [First, ...StringToTuple<Rest>] 
    : [T];

type Foo = StringToTuple<'abc'>; // ["a", "b", "c"]
复制代码

我们这里分析一下：

学完本节，你能够挑战：

联合类型的操作

联合类型与泛型推导

联合类型代表着几种可能性的集合，它在泛型推导中和其他类型都不一样，你可以把他理解为它在做泛型推到时，并不是一次性判断，而是将每一项单独判读并返回，然后再将这些返回进行联合。

说起来有点绕，我们看下面的例子就明白了：

type Foo<T> = T extends 'a' | 'b' ? `${T}1` : T;

type Bar = Foo<'a' | 'b' | 'c'> // "a1" | "b1" | "c"
复制代码

如我们上面说的，例子中并不是将 'a' | 'b' | 'c' 一次性判断的，而是：

为了更加清楚的明白，我们再举一个例子：

interface Cat {
    type: '';
    food: string[]; 
}
interface Dog {
    type: '';
    food: string[];
}
type Animal = Cat | Dog;

type LookUp<U, T> = U extends { type: T } ? U : never;

type A = LookUp<Animal, ''> // Dog
复制代码

根据前面说的，它会将联合类型的每个成员拿去比较，最后返回。所以其判断步骤为：

学完本小结，你可以解决：

其他

从 JS 值转为 TS 值

我们知道 TS 是有类型推导的，即便是一个没定义类型的 JS 变量也是有其类型定义的，此时我们是可以通过 typeof 完成从 JS 到 TS 的转化的。例如：

// 定义 JS 变量
const jack = {
    name: 'jack',
    age: 18
}

// 从 JS 中获取 TS 并赋值
type Person = typeof jack; // 此时 Person 为 { name: string; age: number };
复制代码

应用场景：

这种情况多用在，我们需要时使用开源库的类型时（比如泛型传参），它又没做类型定义或者没导出的场景，例如 redux-toolkit 文档示例[41]。

更精准的类型推测

有人就会好奇，为什么 name 会被推导为 string，而不是 "jack" 呢？

默认情况下 TS 对对象或者数组的推导是尽可能宽泛的，想要让其具体，需要使用到 as const 语法，让其尽可能精准的推测。例如：

const jack = {
    name: 'jack',
    age: 18
} as const; // 会被推导为：{ readonly name: "jack"; readonly age: 18; }

const arr = [1, 2] as const;  // 会被推导为：readonly [1, 2];
复制代码

要注意，每个元素都是 readonly 的哦。

总结与回顾

经过奋斗，大家终于来到了终点，我们以始为终，先看看最初定下的目标有没有实现：

就我个人而言，在学习和挑战 type-challenges 过程中是对 TS 类型有了更深入的了解，那么最后我们再看一下开头提到的 Prisma 类型定义到底说的什么意思。

到这里，终于算是结束了，散会，撒花 ✿✿ヽ(°▽°)ノ✿

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8