时间戳

首页 > 解决方案 > 打字稿：代码看起来一样，但它产生了一个错误

javascript - 打字稿：代码看起来一样，但它产生了一个错误

问题描述

我有一个这样的界面：

  interface Product {
    [key: string]: {
      options?: Record<string, string>
    }
  }

所以：

  state: Product
  ...
  state = state ?? {}
  state[sku] = state[sku] ?? {}
  state[sku].options = state[sku].options ?? {}
  state[sku].options[id] = e.target.value       // this line breaks

上面突出显示的行表示state[sku].options可能未定义，当然我知道不是未定义，因为我之前正在检查该行。

但是，此代码的功能完全相同，并且可以正常工作。

  const newState = state ?? {}
  const slice = newState[sku] ?? {}
  slice.options = slice.options ?? {}
  slice.options[id] = e.target.value

那么，我错过了什么？

标签： javascripttypescript

解决方案

它是打字稿的限制。如果您创建如下类型：

type T = { [key: string]: string | undefined };

然后尝试：

var sth: T = { prop: "abc" };
sth.prop.slice()

你会得到一个错误，因为定义sth仍然是general的T。它并不关心其中一个 props ofsth实际上是 a string（也就是说，打字稿不会限制 的类型sth）。

但是当你这样做时：

var u = { prop: "abc" };
u.prop.slice()

的类型u将被限制为

{
  prop: string
}

所以这里没有错误。

推荐阅读