javascript - Typescript:代码看起来相同，但会产生错误

Question

我有一个这样的界面:

  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

那么，我错过了什么？

Answer 1

这是 Typescript 的一个限制。如果您创建如下所示的类型:

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

然后尝试:

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

你会得到一个错误，因为sth的定义仍然是通用的T。它并不关心 sth 的 props 之一实际上是 string (也就是说， typescript 不会限制 sth 的类型) .

但是当你这样做时:

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

u 的类型将被限制为

{
  prop: string
}

所以这里没有错误。