在 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 官网

推荐阅读

• 

  别有幽愁暗生暗恨生下一句 别有忧愁暗恨生中幽和暗的意思
• 

  三个月宝宝腹泻怎么办
• 

  搜狐文章首篇模板
• 

  科研课题结题申请书
• 

  密切接触者要医学观察多少天
• 

  2022年河南养老金最新调整方案细则 2022年养老金上调最新消息
• 

  元气骑士 古大陆的神器 元气骑士古大陆的神器神威大全
• 

  豆角炒肉的做法
• 

  如何登录云际服务器？ 云际服务器怎么登录
• 

  新房装修改水电，一定记住这10大黄金尺寸
• 

  北仑接种hpv 2023宁波北仑HPV疫苗怎么预约
• 

  html5轮廓分析工具
• 

  列假期间可以吃芒果吗
• 

  碧蓝航线死或生联动纪念章怎么获得 假日航线角色喜好获取方式一览
• 

  大肠癌|三天一次大便和一天三次大便，哪个是大肠癌，每天排便几次算正常
• 

  五角电子分析器位置
• 

  浏览器渲染原理
• 

  林内壁挂炉打不燃显示12解决方法
• 

  u盘怎么和车载收音机连接，u盘怎么和车载收音机连接蓝牙
• 

  开水冲鸡蛋有寄生虫吗

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