TypeScript高级类型与实用程序
// 每日前端夜话 第467篇
// 正文共：1200 字
// 预计阅读时间：10 分钟
我们一起来看一下今天的大纲，希望这些高级类型 与实用程序能够帮助大家节省一些开发的时间：
“
- ConstructorParameters
- Exclude
- Extract
- InstanceType
- NonNullable
- Parameters
- Partial
- Readonly
- ReadonlyArray
- Pick
- Record
- Required
- ReturnType
1. ConstructorParameters：类构造函数的参数类型的元组
class User {
constructor(uname: string, age: number) {}
}
type TCtor = ConstructorParameters<typeof User>;
function init(...info: TCtor) {
const [name] = info;
console.log('[name]', name);
}
init('京程一灯?', 20);
2. Exclude：从另一个类型中排除一个类型
// A=a 判断第一个属性是否继承自第二个属性
type A = Exclude<'x' | 'a', 'x' | 'y' | 'z'>;
3. Extract：选择可分配给另一种类型的子类型
//Extract允许您通过选择两种不同类型中存在的属性来构造类型
interface FirstType {
id: number;
firstName: string;
lastName: string;
}
interface SecondType {
id: number;
address: string;
city: string;
}
// type ExtractType1 = "id"
type ExtractType1 = Extract<keyof FirstType, keyof SecondType>;
//type ExcludeType2 = "firstName" | "lastName"
type ExcludeType2 = Exclude<keyof FirstType, keyof SecondType>;
4. InstanceType：获取构造函数的实例类型
//构建函数工厂
declare function create<T extends new () => any>(c: T): InstanceType<T>;
class YidengA {}
class YidengB {}
let a1 = create(YidengA); // YidengA
let b1 = create(YidengB); // YidengB
5. NonNullable：从类型中排除null和undefined
//type TNon = string | number
type TNon = NonNullable<string | number | undefined>;
6. Parameters：函数参数类型的元组
type IFoo = (
name: string,
age: number
) => { name: string; age: number; gender: string };
//type IBar = [name: string, age: number]
type IBar = Parameters<IFoo>;
7. Partial：将对象中的所有属性设为可选
interface User {
id: number;
age: number;
name: string;
}
// type PartialUser = {
// name?: string | undefined;
// age?: number | undefined;
// id?: number | undefined;
// }
type PartialUser = Partial<User>;
8. Readonly：使对象中的所有属性为只读
interface Person {
readonly id: number; // 直读属性
}
const data: Person = {
id: 456,
};
//无法分配到 "id" ，因为它是只读属性。
data.id = 567;
9. ReadonlyArray：制作给定类型的不可变数组
let ydarr: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = ydarr;
//类型“readonly number[]”上不存在属性“push”。
ro.push(2);
10. Pick：从一个复合类型中，取出几个想要的类型的组合组
interface User {
id: number;
age: number;
name: string;
}
// type PickUser = { id: number; age: number; }
type PickUser = Pick<User, 'id' | 'age'>;
11. Record：从键类型到值类型的映射
type petsGroup = 'dog' | 'cat' | 'fish';
interface IPetInfo {
name: string;
age: number;
}
//将petsGroup全部映射为IPetInfo
type IPets = Record<petsGroup, IPetInfo>;
const animalsInfo: IPets = {
dog: {
name: 'dogName',
age: 2,
},
cat: {
name: 'catName',
age: 3,
},
fish: {
name: 'fishName',
age: 5,
},
};
12. Required：将对象中的所有属性设为必需
interface User {
id: number;
age: number;
name: string;
}
// type PartialUser = { id?: number; age?: number; name?: string; }
type PartialUser = Partial<User>;
//去掉问号
type PullDownRefresh = Required<Partial<PartialUser>>;
13. ReturnType：获取函数类型的返回类型
type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T2 = ReturnType<(<T extends U, U extends number[]>() => T)>; //number[]
type T3 = ReturnType<typeof f1>; // { a: number, b: string }
type T4 = ReturnType<(<T>() => T)>; // {}
type T5 = ReturnType<any>; // any
type T6 = ReturnType<never>; // any
type T7 = ReturnType<string>; // Error
type T8 = ReturnType<Function>; // Error
再一次感谢您花费时间阅读这篇文章，祝各位更加愉快的使用TypeScript！
作者 [志佳] 2021 年 01月 11日
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2021-01-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录