以下实用工具类型适用于2.X及以上的typescript版本（为方便直观的看出结果，下面配置为严格模式，当出现问题时编译不通过，直接报错）
Partial<T>
构造类型T，并将它所有的属性设置为可选的。它的返回类型表示输入类型的所有子类型，T一般为对象（ps：对象才有用到此方法的意义，其他简单类型没有使用他没有什么意义）
type Partial<T> = { [P in keyof T]?: T[P] | undefined; }
Partial<T>.png
import React, { Component } from 'react';
interface Interface {
a: number;
b: number;
}
export default class PartialInfo extends Component {
render() {
// 变量类型为对象
// 正确显示值
const partial1: Partial<Interface> = {};
const partial2: Partial<Interface> = {
a: 1
};
const partial3: Partial<Interface> = {
a: 1,
b: 1
};
// 不属于Interface的key值
const partial4: Partial<Interface> = {
// 不能将类型“{ c: number; }”分配给类型“Partial<Interface>”。
// 对象文字可以只指定已知属性，并且“c”不在类型“Partial<Interface>”中。
c: 1 // ❌
};
// 变量类型为string（无具体意义，仅证明可以输入）
// Partial<T>中的T可以是任意类型不必拘泥于对象
const partial5: Partial<string> = '';
console.log(partial1, partial2, partial3, partial4, partial5);
return (
<div>Partial</div>
);
}
}
使用场景
- interfaceA与 interfaceB 在代码中同时会被【使用】，并且interfaceB需要属性， interfaceA中全部存在（interfaceA与 interfaceB 在代码中同时会被【使用】，并且interfaceB需要属性， interfaceA中全部存在）
- eg：对表格进行筛选，筛选条件的类型可为Partial<T>
- eg：
// 账号属性
interface AccountInfo { name: string email: string age: number vip: 0|1 // 1 是vip ，0 是非vip }
// 当我们需要渲染一个账号表格时，我们需要定义
const accountList: AccountInfo[] = []
// 但当我们需要查询过滤账号信息，需要通过表单，
// 但明显我们可能并不一定需要用到所有属性进行搜索，此时可以定义
const model: Partial<AccountInfo> = { name: '', vip: undefind }
Readonly<T>
构造类型T，并将它所有的属性设置为readonly，也就是说构造出的类型的属性不能被再次赋值。
import React, { Component } from 'react';
interface Todo {
title: string;
}
export default class ReadonlyInfo extends Component {
// 对象
todo: Readonly<Todo> = {
title: 'one',
};
this.todo.title = 'Hello';
render() {
// 对象
console.log('todo', this.todo);
return (
<div>Readonly</div>
);
}
}
Readonly.png
string1: Readonly<string> = '234';
this.string1 = '34';
T为string类型.png
Object.freeze
方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。【此外，冻结一个对象后该对象的原型也不能被修改。】🤣【不写进ppt】🤣freeze()返回和传入的参数相同的对象。
import React, { Component } from 'react';
interface Todo {
title: string;
}
export default class FreezeInfo extends Component {
// 对象
todo = {
title: 'one'
};
freezeObj = (todo: Todo) => {
Object.freeze(todo);
todo.value = '1';
console.log('todo', todo)
}
render() {
// 对象
this.freezeObj(this.todo)
return (
<div>freeze</div>
);
}
}
Object.freeze.png
Object.freeze仅对对象起作用，对其他类型不起作用（包括数组）
freezeString = (todo: string) => {
Object.freeze(todo);
todo = '1';
console.log('todo', todo)
}
this.freezeObj(this.todo)
Object.freeze为字符串.png
Record<K,T>
构造一个类型，其属性名的类型为K，属性值的类型为T。将某个类型的属性映射到另一个类型上,当K为某些固定值而非范围性类型时，需要全部映射,定义的属性名类型必须全部都有，属性值看是否可选
K的类型为number | string | symbol
type Record<K extends string | number | symbol, T> = { [P in K]: T; }
import React, { Component } from 'react';
interface PageInfo {
a: number;
b?: number;
}
type Page = 'key1' | 'key2' | 'key3';
type PageIn = number | string;
export default class RecordInfo extends Component {
render() {
// 属性名为具体值
const page1: Record<Page, PageInfo> = {
key1: { a: 1, b: 2 },
key2: { a: 1 },
key3: { a: 1 },
};
// 属性名为类型范围值
// 此处属性名类型K中使用的是固定的变量，也可以使用入number、string等的范围性类型，那么此刻属性名随意、个数随意
const page2: Record<PageIn, PageInfo> = {
1: { a: 1, b: 2 },
2: { a: 1, b: 2 },
key1: { a: 1 },
key2: { a: 1 },
};
console.log(page1, page2)
return (
<div>Partial</div>
);
}
}
Pick<T,K>
从类型T中挑选部分属性K来构造类型。T中必须包含K中的所有属性，K中的属性，必须在对象中全部拥有（ps，T中可以只有K中的属性）
import React, { Component } from 'react';
interface Todo {
title: string;
description: string;
completed: boolean;
}
type TodoPreview = Pick<Todo, 'title' | 'completed'>;
export default class PickInfo extends Component {
// 对象
todo: TodoPreview = {
title: 'Clean room',
completed: false,
};
render() {
console.log('todo', this.todo)
return (
<div>Pick</div>
);
}
}
T中未包含K.png
对象未全部拥有K.png
Exclude<T,U>
从类型T中剔除所有可以赋值给U的属性，然后构造一个类型。允许T中没有U属性的情况存在
Exclude<T,U>.png
type Exclude<T, U> = T extends U ? never : T
import React, { Component } from 'react';
interface Obj1 {
a: string;
b: number;
}
interface Obj2 {
a: string;
b: number;
c: string;
}
interface Obj3 {
b: string;
c: number;
}
interface Obj4 {
a: string;
b: string;
c: string;
}
type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"
type T2 = Exclude<string | number | (() => void), Function>; // string | number
type T3 = Exclude<Obj1 | Obj2 | Obj3, Obj1>; // Obj3
type T4 = Exclude<Obj1 | Obj4 | Obj3, Obj1>; // Obj4 | Obj3
export default class ExcludeInfo extends Component {
render() {
return (
<div>Exclude</div>
);
}
}
- () => void与Function为何换了位置，结果就完全不同了，参见上篇【类型】中的函数赋值
- type T3 = Extract<Obj1 | Obj2 | Obj3, Obj1>; // 值为Obj1 | Obj2原因，参见上篇【类型】中的对象赋值
使用场景
interface的信息与其他interface有关，会随着其他的interface变化而变化
Extract<T,U>
从类型T中提取所有可以赋值给U的类型，然后构造一个类型。简而言之就是T、U中有相同的部分，就提取出来，作为类型值
Extract<T,U>.png
type Extract<T, U> = T extends U ? T : never
import React, { Component } from 'react';
interface Obj1 {
a: string;
b: number;
}
interface Obj2 {
a: string;
b: number;
c: string;
}
interface Obj3 {
b: string;
c: number;
}
interface Obj4 {
a: string;
b: string;
c: string;
}
type T0 = Extract<"a" | "b" | "c", "a" | "f">; // "a"
type T1 = Extract<string | number | (() => void), Function>; // () => void
type T2 = Extract<string | number | Function, (() => void)>; // never
type T3 = Extract<Obj1 | Obj2 | Obj3, Obj1>; // Obj1 | Obj2
type T4 = Extract<Obj1 | Obj4 | Obj3, Obj1>; // Obj1
export default class ExtractInfo extends Component {
render() {
return (
<div>Extract</div>
);
}
}
- () => void与Function为何换了位置，结果就完全不同了，参见上篇【类型】中的函数赋值
- type T3 = Extract<Obj1 | Obj2 | Obj3, Obj1>; // 值为Obj1 | Obj2原因，参见上篇【类型】中的对象赋值
使用场景
interface的信息与其他interface有关，会随着其他的interface变化而变化
NonNullable<T>
从类型T中剔除null和undefined，然后构造一个类型。
type T0 = NonNullable<string | number | undefined>; // string | number
type T1 = NonNullable<string[] | null | undefined>; // string[]
ReturnType<T>
由函数类型T的返回值类型构造一个类型。
import React, { Component } from 'react';
const f1 = () => {
return {
a: 1,
b: 'string'
}
}
type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T2 = ReturnType<(<T>() => T)>; // unknown
type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>; // number[]
type T4 = ReturnType<typeof f1>; // { a: number, b: string }
export default class ReturnTypeInfo extends Component {
b:T7 = 6;
render() {
let a:T2 = 3;
a = '3';
console.log('a', a)
console.log('b', this.b)
return (
<div>ReturnType</div>
);
}
}
当返回的值为unknown时，就代表他是任意值，你可以给此类型的参数赋给任意值，不会报错，但并不代表他不进行编译了，它相当于一个{},任何对象都属于这个{}，所以赋为任何值都不会报错。
有两个特殊的值，一个为any，另一个为never，分别为，编译时略过检查，和不存在一个值满足当前条件,这两个值作为参数传入，默认是不报错的
type T5 = ReturnType<any>; // any
type T6 = ReturnType<never>; // never
ReturnType接收的参数T必须为一个函数类型，传入其他类型值时报错，当T为Function时报错。
type T7 = ReturnType<string>; // Error
type T8 = ReturnType<Function>; // Error
传入值为Function.png
用一种简单的思维去思考为什么Function不能传入，回归到定义本身【由函数类型T的返回值类型构造一个类型。】，如果Function没有返回值，要怎么办呢？是不是这么一问就直接能解决上文为何Function作为传入值报错
Required<T>
构造一个类型，使类型T的所有属性为required。即便在interface中写的是可选类型，但如果使用了Required，那么所有的属性都变成必须的，没有例外
import React, { Component } from 'react';
interface Obj {
a?: number;
b?: string;
};
export default class RequiredInfo extends Component {
render() {
const obj1: Obj = { a: 5 }; // OK
const obj2: Required<Obj> = { a: 5 }; // Error: property 'b' missing
console.log('obj1', obj1);
console.log('obj2', obj2);
return (
<div>Required</div>
);
}
}
Required.png
