typescript工具类型-TypeScript 实用程序类型

2023-08-29 0 3,299 百度已收录

构造类型 Type 并将其所有属性设为可选。 它的返回类型代表输入类型的所有子类型。

例子

interface Todo {
title: string;
description: string;
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial) {
return { ...todo, ...fieldsToUpdate };
}

const todo1 = {
title: 'organize desk',
description: 'clear clutter',
};

const todo2 = updateTodo(todo1, {
description: 'throw out trash',
});

只读

构造类型Type,并将其所有属性设置为readonly,也就是说构造后的类型的属性不能再次参数化。

例子

interface Todo {
title: string;
}

const todo: Readonly = {
title: 'Delete inactive users',
};

todo.title = 'Hello'; // Error: cannot reassign a readonly property

此工具可用于表示在运行时失败的赋值表达式(例如,当尝试重新参数化冻结对象的属性时)。

目的。 冻结

function freeze<T>(obj: T): Readonly<T>;

记录

构造一个属性名称为K类型、属性值为T类型的类型。该工具可用于将一种类型的属性映射到另一种类型。

例子

interface PageInfo {
title: string;
}

type Page = 'home' | 'about' | 'contact';

const x: Record = {
about: { title: 'about' },
contact: { title: 'contact' },
home: { title: 'home' },
};

挑选

属性Keys的一部分是从类型Type中选择来构造类型的。

例子

interface Todo {
title: string;
description: string;
completed: boolean;
}

type TodoPreview = Pick<Todo, 'title' | 'completed'>;

const todo: TodoPreview = {
title: 'Clean room',
completed: false,
};

忽略

从类型Type中获取所有属性,排除Keys属性后构造一个类型。

例子

interface Todo {
title: string;
description: string;
completed: boolean;
}

type TodoPreview = Omit<Todo, 'description'>;

const todo: TodoPreview = {
title: 'Clean room',
completed: false,
};

排除

从类型 Type 中排除所有可以作为 ExcludedUnion 形式参数给出的属性,然后构造一个类型。

例子

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

typescript工具类型-TypeScript 实用程序类型

提炼

从类型Type中提取所有可以作为Union参数的类型,然后构造一个类型。

例子

type T0 = Extract<'a' | 'b' | 'c', 'a' | 'f'>; // "a"
type T1 = Extract<string | number | (() => void), Function>; // () => void

不可为空

从类型 Type 中去除 null 和 undefined,然后构造一个类型。

例子

type T0 = NonNullable<string | number | undefined>; // string | number
type T1 = NonNullable<string[] | null | undefined>; // string[]

参数

从函数类型 Type 的参数类型创建元组类型。

例子

declare function f1(arg: { a: number; b: string }): void;

type T0 = Parameters string>;
// []
type T1 = Parameters<(s: string) => void>;
// [s: string]
type T2 = Parameters<(arg: T) => T>;
// [arg: unknown]
type T3 = Parameters<typeof f1>;
// [arg: { a: number; b: string; }]
type T4 = Parameters<any>;
// unknown[]
type T5 = Parameters<never>;
// never
type T6 = Parameters<string>;
// never
// Type 'string' does not satisfy the constraint '(...args: any) => any'.
type T7 = Parameters<Function>;
// never
// Type 'Function' does not satisfy the constraint '(...args: any) => any'.

构造函数参数

从构造函数类型创建元组类型或字段类型。

从构造函数类型 Type 的参数类型创建元组类型。 (如果 Type 不是构造函数类型,则从不返回)。

例子

type T0 = ConstructorParameters;
// [message?: string | undefined]
type T1 = ConstructorParameters;
// string[]
type T2 = ConstructorParameters;
// [pattern: string | RegExp, flags?: string | undefined]
type T3 = ConstructorParameters<any>;
// unknown[]

type T4 = ConstructorParameters<Function>;
// never
// Type 'Function' does not satisfy the constraint 'new (...args: any) => any'.

返回类型

从函数类型 Type 的返回类型创建一个新类型。

例子

type T0 = ReturnType string>; // string
type T1 = ReturnType void>; // void
type T2 = ReturnType<(<T>() => T)>; // {}
type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>; // number[]
type T4 = ReturnType; // { a: number, b: string }
type T5 = ReturnType; // any
type T6 = ReturnType; // any
type T7 = ReturnType; // Error
type T8 = ReturnType<Function>; // Error

实例类型

从构造函数类型 Type 的实例类型创建新类型。

例子

class C {
x = 0;
y = 0;
}

type T0 = InstanceType<typeof C>; // C
type T1 = InstanceType<any>; // any
type T2 = InstanceType<never>; // any
type T3 = InstanceType<string>; // Error
type T4 = InstanceType<Function>; // Error

必需的

构造一个类型,使得 Type 类型的所有属性都是必需的。

与此相反的是部分。

例子

interface Props {
a?: number;
b?: string;
}

const obj: Props = { a: 5 }; // OK

const obj2: Required = { a: 5 }; // Error: property 'b' missing

该参数类型

从函数类型中提取此参数的类型。

如果函数类型不包含此参数,则返回未知类型。

例子

function toHex(this: Number) {
return this.toString(16);
}

function numberToString(n: ThisParameterType<typeof toHex>) {
return toHex.apply(n);
}

省略该参数

从 Type 类型中删除 this 参数。

如果未声明 this 参数,则结果类型为 Type。

否则,Type 类型用于创建不带此参数的类型。

泛型将被忽略,仅使用最后一个重载的签名。

例子

function toHex(this: Number) {
return this.toString(16);
}

const fiveToHex: OmitThisParameter<typeof toHex> = toHex.bind(5);

console.log(fiveToHex());

这个类型

此工具不返回转换后的类型。

它充当上下文 this 类型的标记。

请注意,必须启用 --noImplicitThis 才能使用此类型。

例子

// Compile with --noImplicitThis

type ObjectDescriptor = {
data?: D;
methods?: M & ThisType; // Type of 'this' in methods is D & M
};

function makeObject<D, M>(desc: ObjectDescriptor): D & M {
let data: object = desc.data || {};
let methods: object = desc.methods || {};
return { ...data, ...methods } as D & M;
}

let obj = makeObject({
data: { x: 0, y: 0 },
methods: {
moveBy(dx: number, dy: number) {
this.x += dx; // Strongly typed this
this.y += dy; // Strongly typed this
},
},
});

obj.x = 10;
obj.y = 20;
obj.moveBy(5, 5);

上面的例子中typescript工具类型,makeObject参数中的methods对象有一个上下文类型ThisType,因此methods对象method中this的类型为 { x: number, y: number } & { moveBy(dx: number, dy: number) : 数字 } 。

在 lib.d.ts 中,ThisType 标志套接字只是一个空套接字声明。 这个套接字与通常的空套接字没有什么不同typescript工具类型,只是它被识别为上下文类型中的对象文字。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 typescript typescript工具类型-TypeScript 实用程序类型 https://www.wkzy.net/game/168980.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务