Tapuscrit : Le code semble identique, mais il génère une erreur

Question

J'ai une interface comme celle-ci :

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

donc :

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

La ligne surlignée ci-dessus indique que state[sku].options pourrait être indéfini, bien sûr je sais qu'il n'est pas indéfini, puisque je vérifie sur la ligne précédente.

Cependant, ce code fait exactement la même chose et fonctionne.

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

Alors, qu'est-ce que j'ai raté ?

Answer 1

C'est une limitation de Typescript. Si vous créez un type comme ci-dessous :

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

Et puis essayez :

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

vous obtiendrez une erreur car la définition de sth sera toujours générale T . Il ne se préoccupe pas du fait qu'un des accessoires de sth est en fait un string (c'est-à-dire que typescript ne contraindra pas le type de sth ).

Mais quand vous le faites :

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

Le type de u sera limité à

{
  prop: string
}

Il n'y a donc pas d'erreur.