我不明白为什么打字本没有强调这是一个错误...

当我有条件地向对象添加该对象类型定义中不存在的新属性时,TypeScrip会为其赋值

  type Filters = {
      keywords: Array<string>
    }
    
    const condition = 1;
    
    let filters: Filters = {keywords: ['keyword']}
    
    filters = {
      ...filters,
        ...(condition && {...{ tags: ['tag']}}),
      }

结果:

filters: {
  keywords:["keyword"]
  tags:["tag"]
}

虽然我预计会收到此错误:

Object literal may only specify known properties, and 'tags' does not exist in type 'Filters'.

PS:当我try 以这种方式添加相同的属性时,我得到预期的错误:

filters = {...filters, tags: ['tag']}

推荐答案

这是目前TypeScrip中缺少的特性;excess property checks只在某些上下文中发生,而且到目前为止还没有人实现对扩展到外部对象中的内联对象的内容的那种上下文判断.

这个microsoft/TypeScript#39998有一个开放的功能请求.它目前被标记为"等待更多反馈",所以您可能想要转到该问题,给它一个????,并在 comments 中描述您的用例以及它为什么引人注目.我怀疑采取这样的行动会有much的效果,但这不会有什么坏处.


据我所知,没有great种变通方法可以解决你的这种行为.如果您想使用助手函数,如

const noExcess = <T extends object>() =>
  <U extends { [K in keyof U]: K extends keyof T ? T[K] : never }>(u: U) => u;

并将其专用于Filters:

const noExcessFilters = noExcess<Filters>();

然后叫它:

const z = noExcessFilters({
  ...filters,
  ...(condition && { tags: ['tag'] }),
}); // error!   Types of property 'tags' are incompatible.

它会标记出这样的情况,但我不知道对你来说是否值得.

Playground link to code

Javascript相关问答推荐

无法检测卡片重叠状态的问题

使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

如何使用JavaScript拆分带空格的单词

第二次更新文本输入字段后,Reaction崩溃

Vaadin定制组件-保持对javascrip变量的访问

使用Ace编辑器对子组件实例的native-element 进行Angular 获取时面临的问题

有效路径同时显示有效路径组件和不存在的路径组件

删除加载页面时不存在的元素(JavaScript)

使用线性插值法旋转直线以查看鼠标会导致 skip

用于测试其方法和构造函数的导出/导入类

MUI迷你图:如何将$符号添加到MUI迷你图中的工具提示数据

JavaScript:多个图像错误处理程序

在Reaction Native中,ScrolltoIndex在结束时不一致地返回到索引0

Node.js的Fetch()调用总是创建新的Express会话

如何为Reaction应用程序创建仅登录的路由?

try 导入material 时出现错误NG0203

如何导入我在Web Worker创建的函数?

按下键盘上的空格键后,单词就会变色.我想在最后一封信之后立即给它们涂上 colored颜色

用于查找以开头和结尾的单词的正则表达式

按下按钮时更改图标