javascript - 如何使用 react typescript 输入 map 方法？

Question

我有一个映射方法并期望它返回一个新数组。我遇到了一个错误

Property 'id' does not exist on type 'never'

我认为这是因为我没有输入map方法变量。我该怎么做？

type Props = {
  authors: [];
  onFinish: () => {};
};

    const NewTask: FC<Props> = ({ authors, onFinish }) => {
    return (
      <select
        onChange={(e) => setAuthor(e.target.value)}
        defaultValue="select"
      >
        <option value="select" disabled>
          Select Author
        </option>
        {authors.map((author) => (
          <option key={author.id} value={author.author_name}>            // author keys are error sublimed
            {author.author_name}
          </option>
        ))}
      </select>
      )
    }

Answer 1

您已将 author 声明为 [] 类型。

作为 Javascript 值，[] 是一个文字空数组，可以添加任何值。

作为 Typescript 类型，[] 是 tuple – 具体来说，它是一个空元组，永远不能包含任何类型的任何值。

当您迭代authors时...

authors.map((author) => { ... })

... Typescript 根据 authors 的类型推断 author 的类型。由于您已声明 authors 不包含任何值，因此它正确地警告您 author 具有 never 类型，因此 Property 'id ' 在类型“从不”上不存在。

正如其他人指出的那样，您只需要为作者提供适当的类型，例如

type Author = {
  id:          string;
  author_name: string;
};

type Props = {
  authors:  Author[];
  onFinish: () => void;
};