简体   繁体   English

TypeScript 错误“'delete' 运算符的操作数必须是可选的”背后的逻辑是什么?

[英]What is the logic behind the TypeScript error "The operand of a 'delete' operator must be optional"?

This is the new error that is coming in typescript code.这是 typescript 代码中出现的新错误。

I am not able to realize the logic behind it我无法意识到它背后的逻辑
Documentation 文档

/*When using the delete operator in strictNullChecks, 
the operand must now be any, unknown, never, or be optional 
(in that it contains undefined in the type). Otherwise, use of the delete operator is an error.*/

interface Thing {
  prop: string;
}

function f(x: Thing) {
  delete x.prop; // throws error = The operand of a 'delete' operator must be optional.
}

I am not able to realize the logic behind it我无法理解其背后的逻辑

The logic as I understand is the following:我理解的逻辑如下:

Interface Thing is a contract asking to have a (non-null, non-undefined) prop as a string . Interface Thing是一个契约,要求将 (non-null, non-undefined) prop作为string

If one removes the property, then the contract is not implemented anymore.如果移除该财产,则合同不再执行。

If you want it still valid when removed, just declare it as optional with a ?如果您希望它在删除时仍然有效,只需将其声明为可选的? : prop?: string prop?: string

I'm actually surprised that this was not causing error in earlier versions of TypeScript.我实际上很惊讶这并没有在早期版本的 TypeScript 中导致错误。

The logic behind of this, is that you need to implement your interface with an optional property like this:这背后的逻辑是,您需要使用这样的可选属性来实现您的接口:

interface Thing {
  prop?: string;
}
// OR
interface Thing {
  prop: string | undefined;
}

function f(x: Thing) {
  delete x.prop; 
}

So the interface's contract won't be broken.所以接口的契约不会被破坏。

Maybe this can helpful也许这会有所帮助

const { propToDelete, ...otherProps} = youObject
return otherProps

with that you can use otherProps object without break out这样你就可以使用 otherProps object 而不会中断

Another implementation if you want it to exist:如果您希望它存在,则另一种实现:

interface Thing {
  prop: string;
}
interface PropoptionalThing {
  prop?: string;
}

function f(x: Thing): PropoptionalThing {
  let tmp: PropoptionalThing = x;
  delete tmp.prop;
  return tmp;
}

This is the new error that is coming in typescript code.这是打字稿代码中出现的新错误。

I am not able to realize the logic behind it我无法实现其背后的逻辑
Documentation 文献资料

/*When using the delete operator in strictNullChecks, 
the operand must now be any, unknown, never, or be optional 
(in that it contains undefined in the type). Otherwise, use of the delete operator is an error.*/

interface Thing {
  prop: string;
}

function f(x: Thing) {
  delete x.prop; // throws error = The operand of a 'delete' operator must be optional.
}

The prop property in Thing interface must be mark as optional using ? Thing接口中的prop属性必须使用? mark.标记。

then your Thing interface must be like this.那么你的Thing界面一定是这样的。

interface Thing {
  prop?: string;
}

You could change the type of x to a partial:您可以将x的类型更改为部分:

function f(x: Partial<Thing>) {
  delete x.prop;
}

But I don't usually like to mutate (modify) objects which have been passed to me from possibly unknown code.但是我通常不喜欢改变(修改)从可能未知的代码传递给我的对象。 So I would usually make a new object instead:所以我通常会创建一个新对象:

function f(x: Thing) {
  const y = { ...x } as Partial<Thing>;
  delete y.prop;
}

Since Partial makes all the properties optional, this will allow you to delete anything from y .由于Partial使所有属性都是可选的,这将允许您从y删除任何内容。

If you wanted to get more specific, you could use SetOptional from typesfest :如果您想获得更具体的信息,可以使用typefest 中的SetOptional

  const y = { ...x } as SetOptional<Thing, 'prop1' | 'prop2'>;

That would make prop1 and prop2 optional but keep all other properties mandatory (required).这将使prop1prop2可选,但保留所有其他属性强制(必需)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 当使用 Javascript 从 object 删除密钥时,“删除”运算符的操作数必须是 optional.ts - The operand of a 'delete' operator must be optional.ts when deleting a key from object with Javascript 打字稿中的可选链运算符 - Optional Chaining Operator in Typescript Typescript 可选链结合三元运算符解析错误 - Typescript optional chaining combined with ternary operator parsing error _.shuffle 的这个实现背后的逻辑是什么? - What is the logic behind this implementation of _.shuffle? 如何在 typescript 中使用带变量的可选链接运算符 - How to use optional chaining operator with variable in typescript 为什么 TypeScript 在可选链接运算符后显示“无法调用 object 这可能是'未定义'.ts(2722)”错误? - Why is TypeScript showing “Cannot invoke an object which is possibly 'undefined'.ts(2722)” error after optional chaining operator? 与compareFunction一起使用的sort方法背后的逻辑是什么? - What is the logic behind the sort method used with a compareFunction? 条件句中的赋值和收益中的赋值背后的逻辑是什么 - What is the logic behind Assignments in Conditionals and Assignments in Returns 这种随机数生成方法背后的逻辑是什么? - What is the logic behind this method of random number generation? JavaScript引发ReferenceError时背后的逻辑是什么? - What is the logic behind when JavaScript throws a ReferenceError?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM