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

Question

我有一个反应成分，通过数组映射。

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

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

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

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

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

请在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

不是JSX，而是时机。:-)由于点击后发生，这是完全有可能（从打字稿的角度来看），其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
}

更新的游乐场