前言
TS绝非为了炫技的存在, 一切为了类型安全, 牢记这句话, 牢记这句话, 牢记这句话!!!感谢林不渡和光神大佬, 本文基本上都是从大佬们那里学来的。
一道开胃菜
function memoizeextends (...args: any[]) => any>(fn: T) {
const cache = new Map()
return (...args: Parameters<typeof fn>) => {
const key = JSON.stringify(fn)
if (cache.has(key)) {
return cache.get(key)
}
const result = fn(...args)
cache.set(key, result)
return result
}
}
const add = (a: number, b: number) => a + b
const memoAdd = memoize(add)
console.log(memoAdd(1, 2))
console.log(memoAdd(1, 2))
上面这个缓存函数的有个泛型T, 泛型T被约束为是一个可以是任意类型参数和返回任意类型的函数, 函数被调用时才明确知道T的类型, 比如下面的add函数, 这个时候TS类型就自动推导T是一个a、b参数类型为number返回一个number的函数, 我们看缓存函数内部返回一个函数接收的参数类型应该和T的参数类型一致, 这个时候可以使用TS内置的工具类型Parameters, 它可以返回一个函数类型的参数数组类型, 所以我们typeof fn, 就可以拿到fn的类型, 或者直接使用Parameters。
我们来看看Parameters是怎么实现的:
type Parametersextends (...args: any) => any> =
T extends (...args: infer P) => any ? P : never;
Parameters工具类型接收一个泛型T被约束为可以是任意的函数类型, 后面用了infer类型推导, 可以在类型被使用时推导出具体的类型, T如果是(...args: infer P) => any的子类型, 就返回P, 否则返回never(表示永不可达)。
不熟悉这种语法没关系, 我们把TS的内置类型都实现一遍，熟能生巧。
TS内置类型工具
Awaited
type promise = Promise<string>
type p = Awaited
function fetchData(): Promise<string> {
return new Promise((resolve) => {
setTimeout(() => {
resolve('成功啦啦啦');
}, 1000);
});
}
type ResultType = Awaited<ReturnType<typeof fetchData>>;
const result: ResultType = 'Awaited';
async function useResult() {
const data = await fetchData();
console.log(data);
}
useResult();
这里的ReturnType和Parameters是配对的, 一个是获取函数类型的参数类型, 一个是获取函数类型的返回值类型, 我们看看ReturnType是怎么实现的
type ReturnTypeextends (...args: any) => any> =
T extends (...args: any) => infer R ? R : any;
我们发现和上面Parameters的实现如出一辙, 只是把infer推断从参数的位置移动到了函数返回值的位置。不过ReturnType如果不满足条件返回的是any而不是never了, 这并没有什么影响。所以ReturnType拿到的类型是定义promise函数的返回类型Promise, 而我们的Awaited就是要拿到Promise里面的类型string。
这里有个思路
type MyAwait = T extends Promise ? P : never
type p = MyAwait<Promise<string>>
利用infer推断Promise里面的类型, 好的, 恭喜你, 你已经了解TS了, 可是这并不全面, 如果Promise返回的还是一个Promise呢
type MyAwait = T extends Promise ? P : never
type p = MyAwait<Promise<Promise<string>>>
递归？如果P还是一个Promise就递归调用MyAwait直到拿到最里面的类型, 没错就是你想的这样, 非常完美
type MyAwait = T extends Promise
? P extends Promise<unknown>
? MyAwait
: P
: T;
type p = MyAwait<Promise<Promise<string>>>;
我们来看看TS内部是如何实现的
type Awaited = T extends null | undefined
? T
: T extends object & { then(onfulfilled: infer F, ...args: infer _): any }
? F extends (value: infer V, ...args: infer _) => any
? Awaited
: never
: T;
Partial
type obj = {
a: 1,
b: 2
}
type obj2 = Partial
我们来实现实现，上面我们讲的是infer提取类型如果有深层的话就是extends配合三元递归，这个Partial就可以用映射成新类型?:表示的就是可选, 可选后除了原来的类型还联合了undefined类型, 这是为了类型安全考虑可选后就可能没有值。
type obj = {
a: 1,
b: 2
}
type MyPartial = {
[K in keyof T]?: T[K]
}
type obj2 = MyPartial
原来的obj类型被构造成了一个新的类型obj2，还是一个对象, 对象里面的每一个键(K)是(in)对象里面所有的键(keyof T)?:(可选) T[K](T对象里面的K键的值)，反复想想是不是这回事。
如果有多个对象嵌套，就递归
type obj = {
a: 1,
b: {
c: 2
}
}
type DeepPartial = {
[K in keyof T]?: T[K] extends object ? DeepPartial : T[K]
}
type obj2 = DeepPartial
Required
type obj = {
a: 1,
b: {
c: 2
}
}
type MyPartial = {
[K in keyof T]?: T[K]
}
type obj2 = Required<MyPartial>
Required就是把可选的变成必传的，非常简单，只需要把?去掉
type obj = {
a: 1,
b: {
c: 2
}
}
type MyPartial = {
[K in keyof T]?: T[K]
}
type MyRequired = {
[K in keyof T]-?: T[K]
}
type obj2 = MyRequired<MyPartial>
直接-?就可以了，神奇吧，那如果对象嵌套了，我想你会举一反三了吧，没错还是它递归
type DeepRequired = {
[K in keyof T]-?: T[K] extends object ? DeepRequired : T[K]
}
Readonly
type obj = {
a: 1,
b: {
c: 2
}
}
type obj2 = Readonly
Readonly就是把对象里面的值变成只读的，看这个obj2的类型，我想你知道怎么做了吧
type MyReadonly = {
readonly [K in keyof T]: T[K]
}
type DeepReadonly = {
readonly [K in keyof T]: T[K] extends object ? DeepReadonly : T[K]
}
Record
type obj = Record<string, any>
其实根据上面学的，你已经会实现它了
type MyRecordextends keyof any, T> = {
[P in K]: T
}
type obj = MyRecord<string, any>
K extends keyof any: 这里使用了泛型约束，确保 K 是任何类型的键集合的子集。keyof any 表示任何类型的所有键的联合。[P in K]: T: 这是一个映射类型。它表示对于 K 中的每个键 P，都创建一个属性，其值类型是 T。
Pick
type MyPickextends object, K extends keyof T> = {
[P in K]: T[K]
}
type obj = MyPick<{a: 1, b: 2}, 'a'>
Omit
type MyOmitextends object, K extends keyof T> =
PickExclude>
type obj = MyOmit<{ a: 1, b: 2 }, 'a'>
Exclude: 使用 keyof T 获取对象 T 的所有键，然后使用 Exclude 排除其中与 K 相同的键。这样得到的是 T 中除去 K 对应键的键集合。
Pick: 使用 Pick 从对象 T 中选择具有特定键集合的属性。在这里，我们选择了 T 中除去 K 对应键的其他所有属性。
我们来看看Exclude的实现
Exclude
type MyExclude = T extends U ? never : T
type T0 = MyExclude<"a" | "b" | "c", "a">;
如果T中存在U就剔除(never)否则保留
Extract
很明显就是Exclude的反向操作
type MyExtract = T extends U ? T : never
type T0 = MyExtract<"a" | "b" | "c", "a">;
NonNullable
type T0 = NonNullable<string | number | undefined>;
type T1 = NonNullable<string[] | null | undefined>;
type NonNullable = T & {};
T0 的类型是 string | number。这是因为 NonNullable 类型别名被定义为 T & {}，这意味着它接受一个类型 T，并返回一个新的类型，该新类型是 T 和空对象类型的交叉类型。由于 TypeScript 中的交叉类型（T & {}）会过滤掉 null 和 undefined，因此 T0 的类型就是排除了 undefined 的 string | number。
也可以这样实现
type MyNonNullable = T extends null | undefined ? never : T;
ConstructorParameters
type MyConstructorParametersextends abstract new (...args: any) => any> =
T extends abstract new (...args: infer P) => any ? P : never;
class C {
constructor(a: number, b: string) {}
}
type T3 = MyConstructorParameters<typeof C>;
还是老套路infer推断，这个和我们上面那个获取函数参数类型差不多的，换了个形式。
T extends abstract new (...args: any) => any: 这是对输入类型 T 进行约束，要求它是一个抽象类的构造函数类型。
T extends abstract new (...args: infer P) => any ? P : never: 这是一个条件类型，检查 T 是否符合指定的构造函数模式。如果符合，就返回构造函数的参数类型 P，否则返回 never。
InstanceType
class C {
x = 0;
y = 0;
}
type MyInstanceTypeextends abstract new (...args: any) => any> =
T extends abstract new (...args: any) => infer R ? R : never;
type T0 = MyInstanceType<typeof C>;
和我们上面那个实现的获取函数类型返回值类型如出一辙和获取类的构造器类型是配对的。
T extends abstract new (...args: any) => any: 这是对输入类型 T 进行约束，要求它是一个抽象类的构造函数类型。
T extends abstract new (...args: any) => infer R ? R : any: 这是一个条件类型，检查 T 是否符合指定的构造函数模式。如果符合，就返回构造函数的实例类型 R，否则返回 never。
ThisParameterType
function toHex(this: Number) {
return this.toString(16);
}
function numberToString(n: ThisParameterType<typeof toHex>) {
return toHex.apply(n);
}
像这种提取类型的都用infer，先猜一猜，内部肯定是判断T是不是一个函数, 第一个参数this infer R是就返回R不是就返回never。
我们看看答案
type ThisParameterType =
T extends (this: infer U, ...args: never) => any
? U
: unknown;
和我们猜想的差不多，我想你现在应该可以类型编程了吧。
TS内部还有四个内置类型是通过JS来实现的，我们就不研究了
`Uppercase`
`Lowercase`
`Capitalize`
`Uncapitalize`
可以看看我的这篇文章vue里面对于TS的使用 # 突发奇想（吃饱了撑的） vue3能实现react中的hooks吗？
祝大家TS的编程技术越来越好吧，本人非常菜，大佬轻喷。
作者：辛克莱
来源：juejin.cn/post/7332435905926070322
命令行执行后出现这个界面表示服务启动成功了，然后访问我自己的ip+端口，再点击顶部
去创建一个测试项目，建一个最简单的
左下角出现
点击调试，就可以看到这个项目的一些实时调试信息，但是还没加什么代码。
现在改一下我们的代码，加一些输出信息。
Console控制台的信息
直接输出用户端代码变量的实时的值
加个定时器试试，也是实时输出的
再来看看Storage信息
Element信息
调个接口试试
![Video_20240120111316[00_00_12--00_00_15].gif](https://www.imgeek.net/uploads/article/20240122/ecbc3eb75e88f01b243fe5938a0de9f3.jpg)
