读者福利
========
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
由于篇幅过长,就不展示所有面试题了,想要完整面试题目的朋友(另有小编自己整理的2024大厂高频面试题及答案附赠)
// pick(obj, [‘a’, ‘b’])
有两个重要变化:
-
keys: U[]
我们知道 U 是 T 的键名组成的联合类型,那么要表示一个内部元素均是 T 键名的数组,就可以使用这种方式,具体的原理请参见下文的 分布式条件类型 章节。 -
T[U][]
它的原理实际上和上面一条相同,首先是T[U]
,代表参数1的键值(就像Object[Key]),之所以单独拿出来是因为我认为它是一个很好地例子,表现了 TS 类型编程的组合性,你不感觉这种写法就像搭积木一样吗?
索引签名 Index Signature
索引签名用于快速建立一个内部字段类型相同的接口,如
interface Foo {
}
那么接口 Foo 就被认定为字段全部为 string 类型。
等同于
Record<string, string>
值得注意的是,由于 JS 可以同时通过数字与字符串访问对象属性,因此keyof Foo
的结果会是string | number
。
const o: Foo = {
1: “芜湖!”,
};
o[1] === o[“1”]; // true
但是一旦某个接口的索引签名类型为number
,那么使用它的对象就不能再通过字符串索引访问,如o['1']
,将会抛出Element implicitly has an 'any' type because index expression is not of type 'number'
错误。
映射类型 Mapped Types
映射类型同样是类型编程的重要底层组成,通常用于在旧有类型的基础上进行改造,包括接口包含字段、字段的类型、修饰符(只读readonly 与 可选?
)等等。
从一个简单场景入手:
interface A {
a: boolean;
b: string;
c: number;
d: () => void;
}
现在我们有个需求,实现一个接口,它的字段与接口 A 完全相同,但是其中的类型全部为 string,你会怎么做?直接重新声明一个然后手写吗?这样就很离谱了,我们可是机智的程序员。
如果把接口换成对象再想想,假设要拷贝一个对象(假设没有嵌套),new 一个新的空对象,然后遍历原先对象的键值对来填充新对象。再回到接口,其实也一样:
type StringifyA = {
};
是不是很熟悉?重要的就是这个in
操作符,你完全可以把它理解为for...in
/for...of
这种遍历的思路,获取到键名之后,键值就简单了!
type Clone = {
};
掌握这种思路,其实你已经接触到一些工具类型的底层实现了:
你可以把工具类型理解为你平时放在 utils 文件夹下的公共函数,提供了对公用逻辑(在这里则是类型编程逻辑)的封装,比如上面的两个类型接口就是~
先写个最常用的Partial
尝尝鲜,工具类型的详细介绍我们会在专门的章节展开:
// 将接口下的字段全部变为可选的
type Partial = {
K in keyof T?: T[k];
};
是不是特别简单,让你已经脱口而出“就这!”,类似的,还可以实现个Readonly
,把接口下的字段全部变为只读的。
条件类型 Conditional Types
条件类型的语法实际上就是三元表达式,看一个最简单的例子:
T extends U ? X : Y
如果你觉得这里的 extends 不太好理解,可以暂时简单理解为 U 中的属性在 T 中都有。
为什么会有条件类型?可以看到通常条件类型通常是和泛型一同使用的,联想到泛型的使用场景,我想你应该明白了些什么。对于类型无法即时确定的场景,使用条件类型来在运行时动态的确定最终的类型(运行时可能不太准确,或者可以理解为,你提供的函数被他人使用时,根据他人使用时传入的参数来动态确定需要被满足的类型约束)。
条件类型理解起来更直观,唯一需要有一定理解成本的就是 何时条件类型系统会收集到足够的信息来确定类型,也就是说,条件类型有时不会立刻完成判断。
在了解这一点前,我们先来看看条件类型常用的一个场景:泛型约束,实际上就是我们上面的例子:
function pickSingleValue<T extends object, U extends keyof T>(
obj: T,
key: U
): T[U] {
return obj[key];
}
这里的T extends object
与U extends keyof T
都是泛型约束,分别将 T 约束为对象类型 和 将 U 约束为 T 键名的字面量联合类型。我们通常使用泛型约束来 收窄类型约束。
以一个使用条件类型作为函数返回值类型的例子:
declare function strOrNum(
x: T
): T extends true ? string : number;
在这种情况下,条件类型的推导就会被延迟,因为此时类型系统没有足够的信息来完成判断。
只有给出了所需信息(在这里是入参x的类型),才可以完成推导。
const strReturnType = strOrNum(true);
const numReturnType = strOrNum(false);
同样的,就像三元表达式可以嵌套,条件类型也可以嵌套,如果你看过一些框架源码,也会发现其中存在着许多嵌套的条件类型,无他,条件类型可以将类型约束收拢到非常精确的范围内。
type TypeName = T extends string
? “string”
: T extends number
? “number”
: T extends boolean
? “boolean”
: T extends undefined
? “undefined”
: T extends Function
? “function”
: “object”;
分布式条件类型 Distributive Conditional Types
官方文档对分布式条件类型的讲解内容甚至要多于条件类型,因此你也知道这玩意没那么简单了吧~
分布式条件类型实际上不是一种特殊的条件类型,而是其特性之一。先上概念:对于属于裸类型参数的检查类型,条件类型会在实例化时期自动分发到联合类型上
原文: Conditional types in which the checked type is a naked type parameter are called distributive conditional types. Distributive conditional types are automatically distributed over union types during instantiation
先提取几个关键词,然后我们再通过例子理清这个概念:
-
裸类型参数
-
实例化
-
分发到联合类型
// 使用上面的TypeName类型别名
// “string” | “function”
type T1 = TypeName<string | (() => void)>;
// “string” | “object”
type T2 = TypeName<string | string[]>;
// “object”
type T3 = TypeName<string[] | number[]>;
我们发现在上面的例子里,条件类型的推导结果都是联合类型(T3 实际上也是,只不过相同所以被合并了),并且其实就是类型参数被依次进行条件判断后,再使用|
组合得来的结果。
是不是 get 到了一点什么?我们再看另一个例子:
type Naked = T extends boolean ? “Y” : “N”;
type Wrapped = [T] extends [boolean] ? “Y” : “N”;
/*
* 先分发到 Naked | Naked
* 所以结果是"N" | “Y”
*/
type Distributed = Naked<number | boolean>;
/*
* 不会分发 直接是 [number | boolean] extends [boolean]
* 这样当然就是"N"啦~
*/
type NotDistributed = Wrapped<number | boolean>;
现在我们可以来讲讲这几个概念了:
-
裸类型参数,没有额外被接口/类型别名/奇怪的东西包裹过的,就像被
Wrapped
包裹后就不能再被称为裸类型参数。 -
实例化,其实就是条件类型的判断过程,就像我们前面说的,条件类型需要在收集到足够的推断信息之后才能进行这个过程。在这里两个例子的实例化过程实际上是不同的,具体会在下一点中介绍。
-
分发至联合类型的过程:
-
- 对于 TypeName,它内部的类型参数 T 是没有被包裹过的,所以
TypeName<string | (() => void)>
会被分发为TypeName<string> | TypeName<(() => void)>
,然后再次进行判断,最后分发为"string" | "function"
。
- 对于 TypeName,它内部的类型参数 T 是没有被包裹过的,所以
-
抽象下具体过程:
( A | B | C ) extends T ? X : Y
// 相当于
(A extends T ? X : Y) | (B extends T ? X : Y) | (B extends T ? X : Y)
一句话概括:没有被额外包装的联合类型参数,在条件类型进行判定时会将联合类型分发,分别进行判断。
infer 关键字
infer
是inference
的缩写,通常的使用方式是infer R
,R
表示 待推断的类型。如果说,通常infer
不会被直接使用,而是与条件类型一起,被放置在底层工具类型中,用于
看一个简单的例子,用于获取函数返回值类型的工具类型ReturnType
:
const foo = (): string => {
return “linbudu”;
};
// string
type FooReturnType = ReturnType;
infer
的使用思路可能不是那么好习惯,我们可以用前端开发中常见的一个例子类比,页面初始化时先显示占位交互,像 Loading/骨架屏,在请求返回后再去渲染真实数据。infer
也是这个思路,类型系统在获得足够的信息后,就能将 infer 后跟随的类型参数推导出来,最后返回这个推导结果。
type ReturnType = T extends (…args: any[]) => infer R ? R : any;
-
(...args: any[]) => infer R
是一个整体,这里函数的返回值类型的位置被infer R
占据了。 -
当
ReturnType
被调用,泛型T被实际类型填充,如果T满足条件类型的约束,就返回R的值,在这里R即为函数的返回值实际类型。 -
实际上为了严谨,应当约束泛型T为函数类型,即:
type ReturnType<T extends (…args: any) => any> = T extends (…args: any) => infer R ? R : any;
类似的,借着这个思路我们还可以获得函数入参类型、类的构造函数入参类型、甚至Promise 内部的类型等,这些工具类型我们会在后面讲到。
infer 其实没有特别难消化的知识点,它需要的只是思路的转变,你要理解 延迟推断 的概念。
类型守卫 与 is in 关键字 Type Guards
前面的内容可能不是那么符合人类直觉,需要一点时间消化,这一节我们来看点简单(相对)且直观的知识点:类型守卫。
假设有这么一个字段,它可能字符串也可能是数字:
numOrStrProp: number | string;
现在在使用时,你想将这个字段的联合类型缩小范围,比如精确到string
,你可能会这么写:
export const isString = (arg: unknown): boolean => typeof arg === “string”;
看看这么写的效果:
function useIt(numOrStr: number | string) {
if (isString(numOrStr)) {
console.log(numOrStr.length);
}
}
image
啊哦,看起来isString
函数并没有起到缩小类型范围的作用,参数依然是联合类型。这个时候就该使用is
关键字了:
export const isString = (arg: unknown): arg is string =>
typeof arg === “string”;
这个时候再去使用,就会发现在isString(numOrStr)
为 true 后,numOrStr
的类型就被缩小到了string
。这只是以原始类型为成员的联合类型,我们完全可以扩展到各种场景上,先看一个简单的假值判断:
export type Falsy = false | “” | 0 | null | undefined;
export const isFalsy = (val: unknown): val is Falsy => !val;
是不是还挺有用?这应该是我日常用的最多的类型别名之一了。
也可以在 in 关键字的加持下,进行更强力的类型判断,思考下面这个例子,要如何将 " A | B " 的联合类型缩小到"A"?
class A {
public a() {}
public useA() {
return “A”;
}
}
class B {
public b() {}
public useB() {
return “B”;
}
}
再联想下for...in
循环,它遍历对象的属性名,而in
关键字也是一样:
function useIt(arg: A | B): void {
‘a’ in arg ? arg.useA() : arg.useB();
}
如果参数中存在a
属性,由于A、B两个类型的交集并不包含a,所以这样能立刻缩小范围到A。
再看一个使用字面量类型作为类型守卫的例子:
interface IBoy {
name: “mike”;
gf: string;
}
interface IGirl {
name: “sofia”;
bf: string;
}
function getLover(child: IBoy | IGirl): string {
if (child.name === “mike”) {
return child.gf;
} else {
return child.bf;
}
}
之前有个小哥问过一个问题,我想很多用 TS 写接口的小伙伴可能都遇到过,即登录与未登录下的用户信息是完全不同的接口,其实也可以使用in
关键字解决。
interface ILogInUserProps {
isLogin: boolean;
name: string;
}
interface IUnLoginUserProps {
isLogin: boolean;
from: string;
}
type UserProps = ILogInUserProps | IUnLoginUserProps;
function getUserInfo(user: ILogInUserProps | IUnLoginUserProps): string {
return ‘name’ in user ? user.name : user.from;
}
同样的思路,还可以使用instanceof
来进行实例的类型守卫,建议聪明的你动手尝试下~
工具类型 Tool Type
这一章是本文的最后一部分,应该也是本文“性价比”最高的一部分了,因为即使你还是不太懂这些工具类型的底层实现,也不影响你把它用好。就像 Lodash 不会要求你每用一个函数都熟知原理一样。这一部分包括TS 内置工具类型与社区的扩展工具类型,我个人推荐在完成学习后记录你觉得比较有价值的工具类型,并在自己的项目里新建一个.d.ts
文件(或是/utils/tool-types.ts
)存储它。
在继续阅读前,请确保你掌握了上面的知识,它们是类型编程的基础。
内置工具类型
在上面我们已经实现了内置工具类型中被使用最多的一个:
type Partial = {
K in keyof T?: T[k];
};
它用于将一个接口中的字段变为全部可选,除了映射类型以外,它只使用了?
可选修饰符,那么我现在直接掏出小抄(好家伙):
-
去除可选修饰符:
-?
-
只读修饰符:
readonly
-
去除只读修饰符:
-readonly
恭喜,你得到了Required
和Readonly
(去除 readonly 修饰符的工具类型不属于内置的,我们会在后面看到):
type Required = {
K in keyof T-?: T[K];
};
type Readonly = {
readonly K in keyof T: T[K];
};
在上面我们实现了一个 pick 函数:
function pick<T extends object, U extends keyof T>(obj: T, keys: U[]): T[U][] {
return keys.map((key) => obj[key]);
}
照着这种思路,假设我们现在需要从一个接口中挑选一些字段:
type Pick<T, K extends keyof T> = {
};
// 期望用法
type Part = Pick<A, “a” | “b”>;
还是映射类型,只不过现在映射类型的映射源是类型参数K
。
既然有了Pick
,那么自然要有Omit
(一个是从对象中挑选部分,一个是排除部分),它和Pick
的写法非常像,但有一个问题要解决:我们要怎么表示T
中剔除了K
后的剩余字段?
Pick 选取传入的键值,Omit 移除传入的键值
这里我们又要引入一个知识点:never
类型,它表示永远不会出现的类型,通常被用来将收窄联合类型或是接口,详细可以看 尤大的知乎回答[6], 在这里 我们不做展开介绍。
在类型守卫一节,我们提到了一个用户登录状态决定类型接口的例子,实际上也可以用never实现。
上面的场景其实可以简化为:
// “3” | “4” | “5”
type LeftFields = Exclude<“1” | “2” | “3” | “4” | “5”, “1” | “2”>;
Exclude,字面意思看起来是排除,那么第一个参数应该是要进行筛选的,第二个应该是筛选条件!先按着这个思路试试:
用排列组合的思路考虑:"1"
在"1" | "2"
里面吗("1" extends "1"|"2" -> true
)?在啊, 那让它爬,"3"在吗?不在那就让它留下来。
这里实际上使用到了分布式条件类型的特性,假设 Exclude 接收 T U 两个类型参数,T 联合类型中的类型会依次与 U 类型进行判断,如果这个类型参数在 U 中,就剔除掉它(赋值为 never)
type Exclude<T, U> = T extends U ? never : T;
那么 Omit:
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
剧透下,几乎所有使用条件类型的场景,把判断后的赋值语句反一下,就会有新的场景,比如Exclude
移除掉键名,那反一下就是保留键名:
type Extract<T, U> = T extends U ? T : never;
再来看个常用的工具类型Record<Keys, Type>
,通常用于生成以联合类型为键名(Keys
),键值类型为Type
的新接口,比如:
type MyNav = “a” | “b” | “b”;
interface INavWidgets {
widgets: string[];
title?: string;
keepAlive?: boolean;
}
const router: Record<MyNav, INavWidgets> = {
a: { widget: [“”] },
b: { widget: [“”] },
c: { widget: [“”] },
};
其实很简单,把Keys
的每个键值拿出来,类型规定为Type
即可
// K extends keyof any 约束K必须为联合类型
type Record<K extends keyof any, T> = {
};
在前面的 infer 一节中我们实现了用于获取函数返回值的ReturnType
:
type ReturnType<T extends (…args: any) => any> = T extends (
…args: any
) => infer R
? R
: any;
其实把 infer 换个位置,比如放到返回值处,它就变成了获取参数类型的Parameters
:
type Parameters<T extends (…args: any) => any> = T extends (
…args: infer P
) => any
? P
: never;
如果再大胆一点,把普通函数换成类的构造函数,那么就得到了获取构造函数入参类型的ConstructorParameters
:
type ConstructorParameters<
T extends new (…args: any) => any
= T extends new (…args: infer P) => any ? P : never;
加上
new
关键字来使其成为可实例化类型声明,也就是此处的泛型约束需要一个类。
这个是获得类的构造函数入参类型,如果把待 infer 的类型放到其返回处,想想 new 一个类的返回值是什么?实例!所以我们得到了实例类型InstanceType
:
type InstanceType<T extends new (…args: any) => any> = T extends new (
…args: any
) => infer R
? R
: any;
这几个例子看下来,你应该已经 get 到了那么一丝天机,类型编程的确没有特别高深晦涩的语法,它考验的是你对其中基础部分如索引、映射、条件类型的掌握程度,以及举一反三的能力。下面我们要学习的社区工具类型,本质上还是各种基础类型的组合,只是从常见场景下出发,补充了官方没有覆盖到的部分。
模板类型相关
TypeScript 4.1[7] 中引入了模板字面量类型,使得可以使用${}
这一语法来构造字面量类型,如:
type World = ‘world’;
// “hello world”
type Greeting = hello ${World}
;
随之而来的还有四个新的工具类型:
type Uppercase = intrinsic;
type Lowercase = intrinsic;
type Capitalize = intrinsic;
type Uncapitalize = intrinsic;
它们的作用就是字面意思,不做解释了。相关的PR见 40336[8],作者Anders Hejlsberg是C#与Delphi的首席架构师,同时也是TS的作者之一。
intrinsic
代表了这些工具类型是由TS编译器内部实现的,其实也很好理解,我们无法通过类型编程来改变字面量的值,但我想按照这个趋势,TS类型编程以后会支持调用Lodash方法也说不定。
社区工具类型
这一部分的工具类型大多来自于utility-types[9],其作者同时还有react-redux-typescript-guide[10] 和 typesafe-actions[11]这两个优秀作品。
同时,也推荐type-fest[12]这个库,和上面相比更加接地气一些。其作者的作品…,我保证你直接或间接的使用过(如果不信,一定要去看看…我刚看到的时候是真的震惊的不行)。
我们由浅入深,先封装基础的类型别名和对应的类型守卫:
export type Primitive =
| string
| number
| bigint
| boolean
| symbol
| null
| undefined;
export const isPrimitive = (val: unknown): val is Primitive => {
if (val === null || val === undefined) {
return true;
}
const typeDef = typeof val;
const primitiveNonNullishTypes = [
“string”,
“number”,
“bigint”,
“boolean”,
“symbol”,
];
return primitiveNonNullishTypes.indexOf(typeDef) !== -1;
};
export type Nullish = null | undefined;
export type NonUndefined = A extends undefined ? never : A;
// 实际上TS也内置了
type NonNullable = T extends null | undefined ? never : T;
Falsy
和isFalsy
我们已经在上面体现了~
趁着对 infer 的记忆来热乎,我们再来看一个常用的场景,提取 Promise 的实际类型:
const foo = (): Promise => {
return new Promise((resolve, reject) => {
resolve(“linbudu”);
});
};
// Promise
type FooReturnType = ReturnType;
// string
type NakedFooReturnType = PromiseType;
如果你已经熟练掌握了infer
的使用,那么实际上是很好写的,只需要用一个infer
参数作为 Promise 的泛型即可:
export type PromiseType<T extends Promise> = T extends Promise
? U
: never;
使用infer R
来等待类型系统推导出R
的具体类型。
递归的工具类型
前面我们写了个Partial
Readonly
Required
等几个对接口字段进行修饰的工具类型,但实际上都有局限性,如果接口中存在着嵌套呢?
type Partial = {
[P in keyof T]?: T[P];
};
理一下逻辑:
-
如果不是对象类型,就只是加上
?
修饰符 -
如果是对象类型,那就遍历这个对象内部
-
重复上述流程。
是否是对象类型的判断我们见过很多次了, T extends object
即可,那么如何遍历对象内部?实际上就是递归。
export type DeepPartial = {
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};
utility-types
内部的实现实际比这个复杂,还考虑了数组的情况,这里为了便于理解做了简化,后面的工具类型也同样存在此类简化。
那么DeepReadobly
、 DeepRequired
也就很简单了:
export type DeepMutable = {
-readonly [P in keyof T]: T[P] extends object ? DeepMutable<T[P]> : T[P];
};
// 即DeepReadonly
export type DeepImmutable = {
+readonly [P in keyof T]: T[P] extends object ? DeepImmutable<T[P]> : T[P];
};
export type DeepRequired = {
[P in keyof T]-?: T[P] extends object | undefined ? DeepRequired<T[P]> : T[P];
};
尤其注意下DeepRequired
,它的条件类型判断的是 T[P] extends object | undefined
,因为嵌套的对象类型可能是可选的(undefined),如果仅使用object,可能会导致错误的结果。
另外一种省心的方式是不进行条件类型的判断,直接全量递归所有属性~
返回键名的工具类型
在有些场景下我们需要一个工具类型,它返回接口字段键名组成的联合类型,然后用这个联合类型进行进一步操作(比如给 Pick 或者 Omit 这种使用),一般键名会符合特定条件,比如:
-
可选/必选/只读/非只读的字段
-
(非)对象/(非)函数/类型的字段
来看个最简单的函数类型字段FunctionTypeKeys
:
基础学习:
前端最基础的就是 HTML , CSS 和 JavaScript 。
网页设计:HTML和CSS基础知识的学习
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
动态交互:JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
那么DeepReadobly
、 DeepRequired
也就很简单了:
export type DeepMutable = {
-readonly [P in keyof T]: T[P] extends object ? DeepMutable<T[P]> : T[P];
};
// 即DeepReadonly
export type DeepImmutable = {
+readonly [P in keyof T]: T[P] extends object ? DeepImmutable<T[P]> : T[P];
};
export type DeepRequired = {
[P in keyof T]-?: T[P] extends object | undefined ? DeepRequired<T[P]> : T[P];
};
尤其注意下DeepRequired
,它的条件类型判断的是 T[P] extends object | undefined
,因为嵌套的对象类型可能是可选的(undefined),如果仅使用object,可能会导致错误的结果。
另外一种省心的方式是不进行条件类型的判断,直接全量递归所有属性~
返回键名的工具类型
在有些场景下我们需要一个工具类型,它返回接口字段键名组成的联合类型,然后用这个联合类型进行进一步操作(比如给 Pick 或者 Omit 这种使用),一般键名会符合特定条件,比如:
-
可选/必选/只读/非只读的字段
-
(非)对象/(非)函数/类型的字段
来看个最简单的函数类型字段FunctionTypeKeys
:
基础学习:
前端最基础的就是 HTML , CSS 和 JavaScript 。
网页设计:HTML和CSS基础知识的学习
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-gDl9CUhc-1715586905617)]
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
[外链图片转存中…(img-5TltOBfJ-1715586905618)]
动态交互:JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
[外链图片转存中…(img-kuuImtlE-1715586905618)]