在 extends 条件类型的子句中, 现在可以有 infer 引入要推断的类型变量的声明. 这种推断的类型变量可以在条件类型的真实分支中引用. 同一个类型变量可以有多个 infer 位置.

type UnpackArrayType = T extends (infer R)[] ? R : T; type T1 = UnpackArrayType; // number type T2 = UnpackArrayType; // string

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

type MyReturnType = T extends (...args: any) => infer R ? never : R; // Error: 找不到名称R

type MyReturnType infer R> = R; // Error: 并不支持

type MyReturnType infer R ? R : never> = L; // OK MyReturnType<() => string> // string

interface ApiData { 'maps:person': string; 'maps:age': boolean; address: string; } type RemoveMapsFromObj = { [P in keyof T as RemoveMaps]: T[P]; }; type RemoveMaps = T extends `maps:${infer S}` ? S : T; type RemovedPerson = RemoveMapsFromObj;

type Obj = { [K in 'name' | 'address']: string; }; // { name:string; address:string }

type MyPartial = { [P in keyof T]+?: T[P]; }; type Person = { name: string; age: number; }; type PartialPerson = MyPartial; // { name?:string; age?:number }

type PartialPerson = { [P in keyof Person]+?: T[P]; };

type PartialPerson = { [P in 'name' | 'age']+?: T[P]; };

type PartialPerson = { ['name']+?: T['name']; ['age']+?: T['age']; }

type PartialPerson = { name?: string; age?: string; };

interface Person { name: string; age: number; address: string; phone: string; } type RemoveSecretProps = { [P in keyof T as P extends 'age' | 'phone' ? never : P]: T[P]; }; // 使用Exclude进行简化 type RemoveSecretProps2 = { [P in keyof T as Exclude]: T[P]; }; type SecretPerson = RemoveSecretProps; /* { name: string address: string } */

type RemoveSecretProps = { ['name' extends 'age' | 'phone' ? never : 'name']: Person['name'] ['address' extends 'age' | 'phone' ? never : 'address']: Person['address'] ['age' extends 'age' | 'phone' ? never : 'age']: Person['age'] ['phone' extends 'age' | 'phone' ? never : 'phone']: Person['phone'] }// 等同于

type RemoveSecretProps = { ['name']: Person['name']; ['address']: Person['address']; };

type RemoveSecretProps = { name: string; address: string; };

type World = 'world'; type Hi = `hello ${World}`; // hello worldfunction setAlignment(location: 'top' | 'middle' | 'bottom') {} setAlignment('middel'); // middel 不能分配给 top | middle | bottom

• 如果模版文字类型是联合类型的话, 占位符中的联合类型分布在模板文字类型上. 例如[${A|B|C}]解析为[${A}] | [${B}] | [${C}]. 多个占位符中的联合类型解析为叉积。例如[${A|B},${C|D}]解析为[${A},${C}] | [${A},${D}] | [${B},${C}] | [${B},${D}].
• 占位符中的string、number、boolean 和bigint 文字类型会导致占位符被文字类型的字符串表示形式替换。例如[${'abc'}]解析为[abc]和[${42}]解析为[42].
• 占位符中的任何一种类型any、string、number、boolean和bigint都会导致模板文字解析为string类型 。
• 占位符中的类型 never 类型导致模板文字解析为 never.

type EventName = `${T}Changed`; type Concat = `${S1}${S2}`; type ToString = `${T}`; type T0 = EventName<'foo'>; // 'fooChanged' type T1 = EventName; // never type T2 = EventName<'foo' | 'bar' | 'baz'>; // 'fooChanged' | 'barChanged' | 'bazChanged' type T3 = Concat<'Hello', 'World'>; // 'HelloWorld' type T4 = `${'top' | 'bottom'}-${'left' | 'right'}`; // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' type T5 = ToString<'abc' | 42 | true | -1234n>; // 'abc' | '42' | 'true' | '-1234'

type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; type Zip = `${Digit}${Digit}${Digit}${Digit}${Digit}`; // Error

type Digit = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; type Zip = `${Digit}${Digit}${Digit}${Digit}${Digit}`; // OK

type OnPropsChangeMethod = { [K in keyof T & string as `on${Capitalize}Change`]: (value: T[K]) => void; }; declare function makeWatchObject(obj: T): T & OnPropsChangeMethod; const person = makeWatchObject({ name: 'senlin', age: 18, }); person.onNameChange = (name) => { console.log('newName:', name); }; person.onAgeChange = (age) => { console.log('newAge:', age); };

type Placeholder = S extends `${string}{${infer P}}${infer Rest}` ? P | Placeholder : never; declare function format( template: S, args: Record, unknown> ): string; const f = format(`name: {name} , age: {age}`, { name: 'senlin', age: 18 }); // format(string, { name: unknown, age: unknown})

type Person = { name: 'senlin'; age: 18; }; type PersonKeys = keyof Person; // 'name' | 'age'

type ArrayKeys = keyof ['a', 'b', 'c']; // number | '0' | '1' | '2' | 'length' | 'pop' | 'push' ...

• 元组元素的索引，作为字符串："0" | "1" | "2"
• number 索引属性的类型
• length
• Array 方法的方法

type ObjKeys = keyof {}; // never

type A = { a: number; common: string }; type B = { b: number; common: string }; type Result1 = keyof (A & B); // 'a' | 'b' | 'common' type Result2 = keyof A | keyof B; // 'a' | 'b' | 'common'type Result3 = keyof (A | B); // 'common' type Result4 = keyof A & keyof B; // 'common'

const https://www.it610.com/article/value = 'value'; type Value = https://www.it610.com/article/typeof value; //'value'

const add = (a: number, b: number) => a + b; type Add = typeof add; // (a:number, b:number) => number

type Person = { name: 'senlin'; age: 18; }; type Name = Person['name']; // 'senlin' type Age = Person['age']; // 18 type NameAndAge = Person['name' | 'age']; // 'senlin' | 18;

type Obj = { [key: string]: string; }; type ObjKeys = keyof Obj; // string | number

在读取对象属性时[..]使用数字索引时, JavaScript 实际上会在索引到对象之前将其转换为字符串. 这意味着使用 100(number 类型)进行索引与使用"100"(string 类型)进行索引是一回事, 因此两者需要保持一致.

const abc = { 1: 'one', }; console.log(abc[1] === abc['1']); // true

type Tuple = ['a', 'b', 'c', 'd']; // "a" | "b" type Elements = Tuple[0 | 1];

type MyType = { prop: 1 } | { prop: 2 } | { prop: 3 }; // 1 | 2 | 3 type Result1 = MyType['prop']; // 等同于 type Result2 = { prop: 1 }['prop'] | { prop: 2 }['prop'] | { prop: 3 }['prop']; // 所以就是 1 | 2 | 3

type RequestResult = { data: T | null; error: unknown; abort: () => void; }; function useFetch(url: string, options?: RequestInit): RequestResult { const [data, setData] = React.useState(null); const [error, setError] = React.useState(null); const [abort, setAbort] = React.useState<() => void>(() => {}); React.useEffect(() => { const fetchData = https://www.it610.com/article/async () => { try { const abortController = new AbortController(); const signal = abortController.signal; setAbort(abortController.abort); const res = await fetch(url, { ...options, signal }); const json = (await res.json()) as T; setData(json); } catch (error) { setError(error); } }; fetchData(); return () => { abort(); }; }, []); return { data, error, abort } as const; }const { data, error } = useFetch<{ login: string; id: number }>( 'https://api.github.com/users/itsuki0927' ); /* { login: string id: number } */

type Convert = T extends `${infer Key}=${infer _}` ? Key : T; type ParseSearchParameters< T, L = T extends `?${infer U}` ? U : T > = L extends `${infer A}&${infer B}` ? { [P in Convert>]: string; } : { [P in Convert]: string; }; const url = '?name=senlin&age=18&address=hunan'; declare function parseSearchParameters( params: T ): ParseSearchParameters; parseSearchParameters(url); /* { name: string age: string address: string } */

type Join = T['length'] extends 1 ? `${T[0]}` : T extends [infer A extends string, ...infer B extends string[]] ?`${A}${U}${Join}` : ''type Split = T extends '' ? [] : T extends `${infer A}${U}${infer B}` ? [A, ...Split] : [T]type A1 = Join extends never ? never : `${P}Async`]: Promisify; }; type FS = { version: string; open(path: string, cb: (err: any, n: number) => void): void; read(fd: string, cb: (err: any, name: string) => void): void; }; declare const fs: FS; declare const fsp: PromisifyObject; // (string) => Promise fsp.openAsync('path').then((n) => { console.log(n.toFixed(2)); });

1. 映射类型的 key 重新映射和模版文字类型
2. infer 的解释
3. 递归条件类型
4. keyof 解释
5. 集合、交叉类型、联合类型
6. 交叉类型

1. type-challenges
2. ts-toolbelt
3. utility-types
4. SimplyTyped
5. Ts 官网

推荐阅读

• 

  什么是职场？
• 

  百日练，一百天读一百本书，打卡第9天，《你只是看上去很努力》35分钟，理解50%，2000/分钟
• 

  空调主机跟遥控器显示温度不同步是怎么回事 新科柜机空调不制冷调节温度显示不同步
• 

  等闲识得东风面中的东风是什么意思 等闲识得东风面释义
• 

  redis 集合的底层实现 redis集合存bean
• 

  Java中关于Collections集合工具类的详细介绍
• 

  福州贵安水世界好玩吗 2023福州贵安水世界门票多少钱一张
• 

  蜗居背景音乐歌词蜗居背景音乐歌词翻译
• 

  甘肃所有大学名单 甘肃省大学排名
• 

  雷殿生名字打分99分 雷王姓取名
• 

  python|python 的生产者和消费者模式
• 

  quiet怎么读 quiet怎么造句
• 

  龙眼肉罐头做法 新鲜的龙眼肉怎么做罐头
• 

  海藻面膜敷多长时间好
• 

  mysql my.cnf配置模板参考
• 

  苹果扣费怎么退 iPhone扣费怎么退款
• 

  你认为孤独的根源是什么？
• 

  减肥期间,有哪些做起来简单又好吃的减肥食谱？
• 

  创维55寸4k智能电视多少钱一台 哪个电视牌子好
• 

  二甲双胍|糖尿病天天吃二甲双胍，请花5分钟弄清这6个注意事项，很重要

• TypeScript常用工具类型Omit、Pick、Partial、Required、Exclude 、Extract