Error prompt

我想尽可能做到最好,所以我首先判断propertyKey是否是objectParent的属性.这是我的playground 代码

const objectParent = {
  product: 'this is product',
  shipping: 'this is shipping',
};

const firstOne = false;

const displayOrder = firstOne
  ? (['a', 'b'] as const)
  : (['a', 'b', 'c', 'product', 'shipping'] as const);

for (const propertyKey of displayOrder) {
  if (propertyKey in objectParent) {
    console.log(objectParent[propertyKey]);
  }
}

我希望因为我已经添加了一个使用if (propertyKey in objectParent)的TypeGuard,所以TypeScrip应该允许我使用propertyKey作为索引.我知道使用propertyKey as keyof typeof objectParent可以绕过这一步,但我觉得这不是一个解决方案,因为编写起来有点懒惰

推荐答案

这里的混淆是因为事实类型脚本是编译语言,而您的判断是动态的.在正常的JS中,

if(propertyKey in objectParent)

这就足够了,因为一切都是动态的,并且在运行时索引保证是您想要的.当然,在这种情况下,您可以使用任何索引并只获得undefined,这是TS试图针对的事情的一部分.

因此,需要提供propertyKey的编译时提示,以让编译器知道索引类型对于索引有效.这很简单,就像

propertyKey as keyof typeof objectParent

这实质上是告诉编译器信任你,你将确保在运行时的值是有效的索引值-当然,现在取决于你不要犯错误(比如忘记if守卫).

但是,这有点违背了类型安全的精神,而且这似乎是对象本身携带显示顺序的完美 case .如果需要支持多个不同的对象,它们提供一个显示顺序界面就足够了,函数可以使用该界面来显示所有这些对象.

Typescript相关问答推荐

了解TS类型参数列表中的分配

角形标题大小写所有单词除外

如何在第一次加载组件时加载ref数组

为什么TypeScript假设文档对象始终可用?

类型脚本中没有接口的中间静态类

如果字符串文字类型是泛型类型,则用反引号将该类型括起来会中断

如何使用WebStorm调试NextJS的TypeScrip服务器端代码?

从子类构造函数推断父类泛型类型

是否有可能避免此泛型函数体中的类型断言?

自定义 Select 组件的类型问题:使用带逗号的泛型类型<;T与不带逗号的<;T&>;时出错

ANGLE NumberValueAccessor表单控件值更改订阅两次

在正常函数内部调用异步函数

界面中数组中的混合类型导致打字错误

TS2739将接口类型变量赋值给具体变量

如何使用泛型函数参数定义类型脚本函数

Typescript泛型调用对象';s方法

在对象数组中设置值

Typescript 和 Rust 中跨平台的位移数字不一致

我是否应该在 Next.js 中的服务器组件中获取秘密数据的所有函数中使用使用服务器?

如何在 ngFor 循环中以Angular 正确动态渲染组件