TypeScript / JSX类型声明仅在JSX外部有效

Question

我有一个可通过数组映射的react组件。

每个数组项都有一个可选的ID类型。

如果我有此ID，我将呈现一个元素，否则将不显示任何内容。

此元素具有一个onClick，该onClick调用一个函数来接受ID作为参数。

即使我检查我是否有ID，TypeScript仍会抱怨ID可能是未定义的，但只能在onClick方法内部，而不能在外部（请参见代码示例）

那是为什么？如何使该错误消失？

Please see the error on the TypeScript playground：

// 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

不是JSX，而是时间。 :-)由于单击是在以后发生的，因此从{TypeScript的角度来看，id很有可能在您检查和使用它之间有 undefined应该是string。同样的事情会在这里发生：

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

解决方案是使这成为不可能。一种选择是捕获id（在我们在那里的同时，我们也可能捕获name）：

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

Updated playground