在 TypeScript 中扩展不包含属性的接口
使用 Omit 实用程序类型来扩展不包含属性的接口,例如 type WithoutTasks = Omit<Employee, 'tasks'>;
。 Omit 实用程序类型通过从提供的类型中选取属性并删除指定的键来构造一个新类型。
interface Employee {
id: number;
name: string;
salary: number;
tasks: string[];
}
// ✅ 1. Exclude 1 property
// 👇️ type WithoutTasks = {
// id: number;
// name: string;
// salary: number;
// }
type WithoutTasks = Omit<Employee, 'tasks'>;
// --------------------------------------------------------
// ✅ 2. Exclude multiple properties
// 👇️ type WithoutIdAndTasks = {
// name: string;
// salary: number;
// }
type WithoutIdAndTasks = Omit<Employee, 'id' | 'tasks'>;
// --------------------------------------------------------
// ✅ 3. Exclude property and then add more properties
interface WithAddedProps extends Omit<Employee, 'tasks'> {
country: string;
}
const example3: WithAddedProps = {
id: 1,
name: 'Tom',
country: 'Germany',
salary: 100,
};
我们使用 Omit 实用程序类型根据提供的类型构造一个新类型,并删除了指定的键。
interface Employee {
id: number;
name: string;
salary: number;
tasks: string[];
}
type WithoutTasks = Omit<Employee, 'tasks'>;
const example1: WithoutTasks = {
id: 1,
name: 'Alice',
salary: 100,
};
第一个示例创建了一个新类型,它具有 Employee
类型中的所有属性,不包括 tasks 属性。
如果需要排除多个属性,可以将字符串文字的并集传递给 Omit 实用程序类型。
interface Employee {
id: number;
name: string;
salary: number;
tasks: string[];
}
type WithoutIdAndTasks = Omit<Employee, 'id' | 'tasks'>;
const example2: WithoutIdAndTasks = {
name: 'Bob',
salary: 100,
};
传递字符串文字的并集时,请确保使用竖线 |
分隔要排除的属性名称。 而不是逗号或任何其他分隔符。
如果我们想排除一些属性并添加更多属性,也可以使用这种方法。
interface Employee {
id: number;
name: string;
salary: number;
tasks: string[];
}
// ✅ If you need to exclude some and then add more properties
interface WithAddedProps extends Omit<Employee, 'tasks'> {
country: string;
}
const example3: WithAddedProps = {
id: 1,
name: 'Tom',
country: 'Germany',
salary: 100,
};
country
属性仅存在于 WithAddedProps
类型中,而 tasks 属性仅存在于 Employee 类型中。
如果我们需要更改接口上特定属性的类型,可以使用相同的方法。
interface Employee {
id: number;
name: string;
salary: number;
tasks: string[];
}
interface WithAddedProps extends Omit<Employee, 'tasks'> {
tasks: number[]; // 👈️ change type
}
const example3: WithAddedProps = {
id: 1,
name: 'Tom',
salary: 100,
tasks: [1, 2, 3],
};
我们在扩展接口时排除了 tasks
属性,然后将其类型更改为 number[]
。
如果直接从 Employee 接口扩展,这是不可能的,因为类型 number[]
不能分配给类型 string[]
。
相关文章
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 Angular 中使用 TypeScript 的 getElementById 替换
发布时间:2023/04/14 浏览次数:153 分类:Angular
-
本教程指南提供了有关使用 TypeScript 在 Angular 中替换 document.getElementById 的简要说明。这也提供了在 Angular 中 getElementById 的最佳方法。
在 TypeScript 中使用 try..catch..finally 处理异常
发布时间:2023/03/19 浏览次数:181 分类:TypeScript
-
本文详细介绍了如何在 TypeScript 中使用 try..catch..finally 进行异常处理,并附有示例。
在 TypeScript 中使用 declare 关键字
发布时间:2023/03/19 浏览次数:97 分类:TypeScript
-
本教程指南通过特定的实现和编码示例深入了解了 TypeScript 中 declare 关键字的用途。
在 TypeScript 中 get 和 set
发布时间:2023/03/19 浏览次数:172 分类:TypeScript
-
本篇文章演示了类的 get 和 set 属性以及如何在 TypeScript 中实现它。
在 TypeScript 中格式化日期和时间
发布时间:2023/03/19 浏览次数:161 分类:TypeScript
-
本教程介绍内置对象 Date() 并讨论在 Typescript 中获取、设置和格式化日期和时间的各种方法。
在 TypeScript 中返回一个 Promise
发布时间:2023/03/19 浏览次数:182 分类:TypeScript
-
本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例,并完整演示每个步骤。
在 TypeScript 中定义函数回调的类型
发布时间:2023/03/19 浏览次数:221 分类:TypeScript
-
本教程说明了在 TypeScript 中为函数回调定义类型的解决方案。为了程序员的方便和方便,实施了不同的编码实践指南。
在 TypeScript 中把 JSON 对象转换为一个类
发布时间:2023/03/19 浏览次数:110 分类:TypeScript
-
本教程演示了如何将 JSON 对象转换为 TypeScript 中的类。