TS数据类型(1)：从Utility Types发微，分类学习笔记
原创
TS在全局内置了很多Utility Types，可以极大的提高我们开发效率。
具体参看：https://www.typescriptlang.org/docs/handbook/utility-types.html#handbook-content
集合类：Partial/Required, Pick/Omit
Partial<Type>
作用：它会将Type内所有属性置为可选，返回一个给定类型Type的子集。
interface Todo {
title: string;
description: string;
}
// 场景：只想更新toTo部分属性，Partial的使用就比较优雅了
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
return { ...todo, ...fieldsToUpdate };
}
const todo1 = {
title: "organize desk",
description: "clear clutter",
};
const todo2 = updateTodo(todo1, {
description: "throw out trash",
});与Partial相反的是Required
Required<Type>
作用：构建返回一个Type的所有属性为必选的新类型。
interface Props {
a?: number;
b?: string;
}
const obj: Props = { a: 5 };
const obj2: Required<Props> = { a: 5,b:5 };Pick<Type, Keys>
作用：构建返回一个根据Keys从类型Type拣选所需的属性的新类型。
Keys的类型有要求：string literal or union of string literals。
interface Todo {
title: string;
description: string;
completed: boolean;
}
type TodoPreview = Pick<Todo, "title" | "completed">;
const todo: TodoPreview = { // 只需要Keys: title and completed
title: "Clean room",
completed: false,
};和pick相反的操作是Omit
Omit<Type, Keys>
作用：以一个类型为基础支持剔除某些属性，然后返回一个新类型。
type Person = {
name: string;
age: string;
location: string;
};
type PersonWithoutLocation = Omit<Person, 'location'>;
// PersonWithoutLocation equal to QuantumPerson
type QuantumPerson = {
name: string;
age: string;
};联合类型操作：Exclude/Extract、NonNullable
- Extract：只要取出，從許多項目中挑出能夠符合（extends）特定規則的
- Exclude：排除後留下，從許多項目中排除符合（extends）特定規則的
Exclude<Type, ExcludedUnion>
作用：从Type中排除可以分配给ExcludedUnion的类型。
type T0 = Exclude<"a" | "b" | "c", "a">; // type T0 = "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // type T1 = "c"
type T2 = Exclude<string | number | (() => void), Function>; // type T2 = string | number
Extract<Type, Union>
作用：从Type中检出可以分配给Union的类型。
type T0 = Extract<"a" | "b" | "c", "a" | "f">; // type T0 = "a"
type T1 = Extract<string | number | (() => void), Function>; // type T1 = () => voidNonNullable<Type>
作用：排除类型Type中的null、undefined。
type T0 = NonNullable<string | number | undefined>; // type T0 = string | number
type T1 = NonNullable<string[] | null | undefined>;// type T1 = string[]修饰类：Readonly
Readonly<Type>
作用：将Type所有属性置为只读。
interface Todo { title: string; }
const todo: Readonly<Todo> = { title: "Delete inactive users" };readonly的含义跟JS的const不能修改的含义一样，指的是不能重写(重写赋值)。
这个方法对于Object.freeze的定义非常适用：
function freeze<Type>(obj: Type): Readonly<Type>;更多参看：https://jkchao.github.io/typescript-book-chinese/typings/readonly.html
属性修饰符
在TS2.8版本之前，支持对映射类型的属性添加readonly、?的修饰符，但是并没有提供移除修饰符的能力。 默认它的修饰符是跟映射类型保持一致的，有兴趣的可以看这个PR以及它fix的issue。那现在映射类型它支持通过+或者-来添加 或 移除readonly或者?修饰符。
type A = { readonly a? : number, b: string };
type MockRequired<T> = {
-readonly [P in keyof T]-?: T[P] // 这里可以不需要-?
};
const test: MockRequired<A> = { // 我希望a是必须的
a: 10,
b: 'b'
};
test.a = 20; // 我希望可以修改a这里推荐阅读：《用了 TS 映射类型，同事直呼内行！ https://juejin.cn/post/7089943758543781896》
函数类：InstanceType、ReturnType、ThisType、Parameters、ConstructorParameters
InstanceType
作用：获取构造函数类型的实例类型。
class C {
x = 0;
y = 0;
}
type T0 = InstanceType<typeof C>; // CReturnType<T>
作用：获取函数 T 的返回类型。
type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T2 = ReturnType<<T>() => T>; // {}ThisType<T>
作用：用于指定上下文对象的类型。
interface Person {
name: string;
age: number;
}
const obj: ThisType<Person> = {
dosth() {
this.name // string
}
}Parameters<T>
作用：获得函数的参数类型组成的元组类型。
type A = Parameters<() => void>; // []
type B = Parameters<typeof Array.isArray>; // [any]
type C = Parameters<typeof parseInt>; // [string, (number | undefined)?]
type D = Parameters<typeof Math.max>; // number[]ConstructorParameters<T>
作用：提取构造函数类型的所有参数类型。它会生成具有所有参数类型的元组类型（如果 T 不是函数，则返回的是 never 类型）。
type A = ConstructorParameters<ErrorConstructor>; // [(string | undefined)?]
type B = ConstructorParameters<FunctionConstructor>; // string[]
type C = ConstructorParameters<RegExpConstructor>; // [string, (string | undefined)?]操作符类：typeof、keyof、in、infer
typeof、keyof、in
其实你就理解为 操作结果 为ts 类型
interface Person {
name: string;
age: number;
}
const sem: Person = { name: 'semlinker', age: 30 };
// typeof 操作符可以用来获取一个变量声明或对象的类型。
type Sem= typeof sem; // -> Person
// keyof 操作符可以用来一个对象中的所有 key 值：
type K1 = keyof Person; // "name"
// in 用来遍历枚举类型：
type Keys = "a" | "b" | "c"
type Obj = {
[p in Keys]: any
} // -> { a: any, b: any, c: any }参看文章：
TypeScript学习之Utility Types https://juejin.cn/post/6994038108543156238
https://pjchender.dev/typescript/ts-unions-intersections/
用了 TS 条件类型，同事直呼 YYDS！ https://juejin.cn/post/7096265620445986823
转载本站文章《TS数据类型(1)：从Utility Types发微，分类学习笔记》, 请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/typescript/2022_0922_8876.html
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
