TS小册学习之结构化类型系统

最新推荐文章于 2025-04-10 11:58:43 发布

jexxx

最新推荐文章于 2025-04-10 11:58:43 发布

阅读量135

点赞数

分类专栏：学习笔记文章标签： typescript javascript 前端

本文链接：https://blog.youkuaiyun.com/jexxx/article/details/128842379

版权

学习笔记专栏收录该内容

9 篇文章

订阅专栏

本文探讨了TypeScript的结构化类型系统，解释了它如何通过类型结构而非名称进行比较。文章介绍了条件类型基础，如`extends`关键字用于复杂类型比较，并讲解了如何使用`infer`关键字从条件类型中提取传入类型的信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 TypeScript 中，你可能遇见过以下这样“看起来不太对，但竟然能正常运行”的代码：

class Cat {
  eat() { }
}

class Dog {
  eat() { }
}

function feedCat(cat: Cat) { }

feedCat(new Dog())

这是因为，TypeScript 比较两个类型并非通过类型的名称，而是比较这两个类型上实际拥有的属性与方法。也就是说，这里实际上是比较 Cat 类型上的属性是否都存在于 Dog 类型上，在比较对象类型的属性时，同样会采用结构化类型系统进行判断。

TypeScript 的结构化类型系统是基于类型结构进行比较的，而标称类型系统是基于类型名来进行比较的。在 TypeScript 中，通过为类型附加信息的方式，从类型层面或者逻辑层面出发去模拟标称类型系统。

🍟 类型运算

条件类型基础 extends

type LiteralType<T> = T extends string ? "string" : "other";

type Res1 = LiteralType<"linbudu">; // "string"
type Res2 = LiteralType<599>; // "other"

条件类型还可以用来对更复杂的类型进行比较，比如函数类型：

type Func = (...args: any[]) => any;

// T extends Func 泛型约束要求你传入符合结构的类型参数，相当于参数校验
// 条件类型使用类型参数进行条件判断（就像 if else），相当于**实际内部逻辑**
type FunctionConditionType<T extends Func> = T extends (...args: any[]) => string
  ? 'A string return func!'
  : 'A non-string return func!';

//  "A string return func!"
type StringResult = FunctionConditionType<() => string>;
// 'A non-string return func!';
type NonStringResult1 = FunctionConditionType<() => boolean>;
// 'A non-string return func!';
type NonStringResult2 = FunctionConditionType<() => number>;

提取传入的类型信息 infer

TypeScript 中支持通过 infer 关键字来在条件类型中提取类型的某一部分信息，比如上面我们要提取函数返回值类型的话，可以这么放：

type FunctionReturnType<T extends Func> = T extends (
  ...args: any[]
) => infer R
  ? R
  : never;

当传入的类型参数满足 T extends (...args: any[] ) => infer R 这样一个结构（不用管 infer R，当它是 any 就行），返回 infer R 位置的值，即 R。否则，返回 never。