“删除”运算符的操作数在 TS 中必须是可选的

作者

‘delete’ 运算符的操作数在 TS 中必须是可选的

The operand of a ‘delete’ operator must be optional in TS

delete当我们尝试使用该运算符删除标记为必需的属性时，会出现错误“’delete’ 运算符的操作数必须是可选的” 。

要解决该错误，请在使用运算符之前使用问号将属性标记为可选delete。

下面是错误如何发生的示例。

索引.ts
// 👇️ const obj: {name: string;}
const obj = { name: 'Bobby Hadz' };

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

变量是具有带值属性的obj对象
。namestring

该属性在对象上标记为必需，因此尝试删除它会导致错误。

将类型的属性设置为可选

使用问号将属性设置为
optional即可解决错误。

索引.ts
// 👇️ const obj: {name?: string | undefined;}
const obj: { name?: string } = { name: 'Bobby Hadz' };

// ✅ works
delete obj['name'];

console.log(obj); // 👉️ {}

name对象中的属性是可选的，因此它可以是undefined
或string.

这允许我们使用
delete
运算符
从对象中删除属性。

使用接口而不是类型

下面是一个如何使用接口执行此操作的示例
。

索引.ts
interface Person {
  name?: string;
}

const obj: Person = { name: 'Bobby Hadz' };

delete obj['name'];

console.log(obj); // 👉️ {}

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

索引.ts
interface Person {
  name: string;
}

// 👇️ const obj: Partial<Person>
const obj: Partial<Person> = { name: 'Bobby Hadz' };

delete obj['name'];

console.log(obj); // 👉️ {}

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

只使一些属性可选

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

下面是一个示例，我们将name和country属性设为可选，但将age属性保留为必需。

索引.ts
interface Person {
  name: string;
  age: number;
  country: string;
}

const obj: Partial<Pick<Person, 'name' | 'country'>> &
  Omit<Person, 'name' | 'country'> = {
  name: 'Bobby Hadz',
  age: 30,
  country: 'Chile',
};

delete obj['name'];

delete obj['country'];

console.log(obj); // 👉️ {age: 30}

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

然后我们使用Omit实用程序类型从接口中排除name和country
属性Person并组合类型。

当使用类型而不是接口时，上面的所有示例都以相同的方式工作。

索引.ts
type Person = {
  name?: string;
};

const obj: Person = {
  name: 'Bobby Hadz',
};

delete obj['name'];

console.log(obj); // 👉️ {}