javascript - TypeScript/JSX 类型断言仅在 JSX 之外有效

Question

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

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

如果我有这个 ID，我将渲染一个元素，否则什么都不渲染。

这个元素有一个 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 的 Angular 来看)id 在您检查它和当您在需要 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