TypeScript/JSX Type Assertion fonctionne seulement en dehors de JSX

Question

J'ai un composant react qui mappe à travers un tableau.

Chaque élément du tableau a un type d'identification facultatif.

Si j'ai cet ID, je vais rendre un élément, sinon rien.

Cet élément a un onClick qui appelle une fonction acceptant l'ID comme paramètre.

Bien que je vérifie si j'ai l'ID, TypeScript se plaint toujours que l'ID pourrait être indéfini, mais seulement à l'intérieur de la méthode onClick, pas à l'extérieur (voir l'exemple de code).

Pourquoi ? Comment puis-je faire disparaître cette erreur ?

Veuillez voir l'erreur sur le terrain de jeu TypeScript :

// fake bindings
declare namespace React {
  function createElement(): any;
}

// This type has an optional prop
type SampleType = {
  id?: string;
  name: string;
}

const sampleArray: SampleType[] = [{id: 'test', name: 'Adrian'}, {name: 'Florescu'}]

function sampleFunction(id: string){
  console.log('ID', id);
}

function SampleComponent() {
  return (
    <div>
      {sampleArray.map((item: SampleType) => {
        if(item.id) {
          sampleFunction(item.id); // This works
          return <p onClick={() => { sampleFunction(item.id); }}>{item.name}</p>; //// This does not work
        }
      })}
    </div>
  )
};

const dom = <SampleComponent />;

Answer 1

Ce n'est pas du JSX, c'est du timing :-) Puisque le clic se produit plus tard, il est tout à fait possible (du point de vue de TypeScript) que id peut avoir devenir undefined entre le moment où vous l'avez vérifié et le moment où vous l'utilisez où une string est attendu. La même chose se produirait ici :

setTimeout(() => {
  sampleFunction(item.id); // Same error occurs
}, 1000);

La solution est de faire en sorte que cela ne soit pas possible. Une option consiste à capturer id (et tant qu'on y est, on peut aussi capturer name ):

if(item.id) {
  const {id, name} = item;
  return <p onClick={() => { sampleFunction(id); }}>{name}</p>; // This works now
}

Terrain de jeu actualisé