如何从 TypeScript 中的对象中删除属性

作者

从 TypeScript 中的对象中删除属性

How to Remove a Property from an Object in TypeScript

要从 TypeScript 中的对象中删除属性，请在类型上将属性标记为可选并使用运算delete符。

您只能从对象中删除已标记为可选的属性。

索引.ts
interface Employee {
  id: number;
  name?: string; // 👈️ marked optional
  salary: number;
}

const obj: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

delete obj['name'];

// 👇️ { id: 1, salary: 100 }
console.log(obj);

我们将类型name中的属性标记Employee为可选，因此我们可以使用
删除
运算符从对象中删除属性。

我还写了一篇关于如何
在 TypeScript 中初始化类型化空对象的详细指南。

尝试删除非可选属性会导致错误

如果您尝试删除未标记为可选的属性，则会出现错误。

索引.ts
interface Employee {
  id: number;
  name?: string;
  salary: number;
}

const obj: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

// ⛔️ Error: The operand of a 'delete' operator must be optional.ts(2790)
delete obj['id'];

TypeScript 告诉我们，如果我们id从对象中删除该属性，该对象将不再是类型，Employee因为该类型id
需要该
属性Employee。

使用类型而不是接口

当使用类型而不是接口时，您可以使用相同的方法。

索引.ts
type Employee = {
  id: number;
  name?: string;
  salary: number;
};

const obj: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

delete obj['name'];

// 👇️ { id: 1, salary: 100 }
console.log(obj);

该name属性是可选的，因此我们可以使用delete运算符从对象中删除该属性。

使用解构从对象中删除属性

您还可以使用解构赋值来创建一个不包含原始对象的一个​​或多个属性的新对象。

索引.ts
interface Employee {
  id: number;
  name: string;
  salary: number;
}

const obj: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

// 👇️ remove `name` property
const { name: _, ...newObj } = obj;

console.log(newObj); // { id: 1, salary: 100 }

console.log(newObj.id); // 1
console.log(newObj.salary); // 100

我们使用解构赋值将name对象的属性赋给一个名为 as 的变量_。

下划线用于我们不打算在代码中使用的变量名。

然后我们使用扩展语法 (…)将对象的剩余属性收集到一个新对象中。

新对象不包含name原始对象的属性。

新对象的类型正确并且包含id和salary属性。

在创建新对象时，您可以使用这种方法根据需要排除尽可能多的属性。

索引.js
interface Employee {
  id: number;
  name: string;
  salary: number;
}

const obj: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

// 👇️ remove `name` and `salary`
const { name: _, salary: __, ...newObj } = obj;

console.log(newObj); // { id: 1 }

console.log(newObj.id); // 1

我为该salary属性使用了两个下划线，因为我们无法重新分配下划线变量。

如果您需要在您的代码中使用它，您也可以单独解构一个属性。

索引.ts
interface Employee {
  id: number;
  name: string;
  salary: number;
}

const obj: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

// 👇️ desctructure the `name` property separately
const { name, ...newObj } = obj;

console.log(newObj); // { id: 1, salary: 100 }

console.log(name); // Bobby Hadz

对象的属性name存储在name变量中。

排除存储在变量中的动态键

如果您需要删除存储在变量中的动态键，请使用方括号。

索引.ts
interface Employee {
  id: number;
  name: string;
  salary: number;
}

const obj: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

const keyToRemove = 'name';

const { [keyToRemove]: _, ...newObj } = obj;

console.log(newObj); // { id: 1, salary: 100 }

该keyToRemove变量存储我们要删除的密钥的名称。

请注意，我们在解构时使用方括号来评估密钥。

使用 Partial 类型从对象中删除属性

如果您无权访问该
接口，请使用
Partial实用程序类型来
构造一个所有属性都设置为可选的新类型。

索引.ts
interface Employee {
  id: number;
  name: string; // 👈️ not marked optional
  salary: number;
}

const obj: Partial<Employee> = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

delete obj['name'];
该name属性在Person类型中是必需的，因此在使用运算符之前，我们必须使用Partial实用程序类型来构造一个属性设置为可选的新类型delete 。

使用 Omit 和 Pick 从对象中删除属性

如果只想使界面上的某些属性成为可选的，则可以使用
Omit
和
Pick
实用程序类型。

下面是一个示例，我们将id和name属性标记为可选，但保留salary必需属性。

索引.ts
interface Employee {
  id: number;
  name: string;
  salary: number;
}

const obj: Partial<Pick<Employee, 'id' | 'name'>> &
  Omit<Employee, 'id' | 'name'> = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

delete obj['name'];

// 👇️ { id: 1, salary: 100 }
console.log(obj);

我们使用实用程序类型从接口中Pick挑选出id和属性并使它们成为可选的。nameEmployee

然后我们使用实用程序类型从接口中Omit排除id和属性。nameEmployee

您可以使用delete运算符从对象中删除任何可选属性。

想了解更多关于在 TypeScript 中使用对象的信息吗？ 查看这些资源： 在 TypeScript 中动态访问对象的属性，如何将属性添加到 TypeScript 中的对象，检查 TypeScript 中的对象中是否存在属性。

使用 lodash 从 TypeScript 中的对象中删除属性

您还可以使用该lodash包从 TypeScript 中的对象中删除属性。

首先，确保您已lodash通过从终端运行以下命令来安装。

壳
# 👇️ initialize package.json if you don't have one
npm init -y

npm install lodash

现在您可以导入并使用omit
方法在基于另一个对象创建对象时排除一个或多个属性。

索引.ts
import _ from 'lodash';

interface Employee {
  id: number;
  name: string;
  salary: number;
}

const obj: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

const newObj = _.omit(obj, ['name']);

console.log(newObj); // 👉️ { id: 1, salary: 100 }

console.log(newObj.id); // 1
console.log(newObj.salary); // 100

代码示例name从对象中排除了该属性。

新对象的类型正确，我们可以安全地访问id和salary
属性。

该omit方法将对象和属性名称数组作为参数，并通过排除指定的属性来创建一个新对象。

下面是使用该方法从对象中删除多个属性的示例
omit()。

索引.ts
import _ from 'lodash';

interface Employee {
  id: number;
  name: string;
  salary: number;
}

const obj: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

const newObj = _.omit(obj, ['name', 'id']);

console.log(newObj); // 👉️ { salary: 100 }

console.log(newObj.salary); // 100

代码示例在创建新对象时排除了id和属性。name

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：