此代码段中的打字稿解构运算符有什么问题？

Question

我的 IDE 在这个 typescript (tsx) sn-p 中显示 2 个错误：

// @ next line: TS2300: Duplicate identifier 'boolean'.
const SlidesControl = ({ previous: boolean, next: boolean }) => {

  return (
    // @ next line: TS2304: Cannot find names 'previous' and 'next'.
    <nav>TODO {previous} {next}</nav>
  )
}

为什么？

Answer 1

const SlidesControl = ({ previous: boolean, next: boolean }) - 重命名参数（JS 特性，ES6），在你的情况下是 2 个名为 boolean 的参数

你需要类型描述（TS特性）：

const SlidesControl = ({ previous, next }: { previous: boolean, next: boolean }) => {
    return (
        <nav>TODO {previous} {next}</nav>
    );
};

另一种方式：

type ISlidesControlProps = { previous: boolean; next: boolean };

const SlidesControl = ({ previous, next }: ISlidesControlProps) => {
    return (
        <nav>
            TODO {previous} {next}
        </nav>
    );
};

React 中更受欢迎的方式：

type ISlidesControlProps = { previous: boolean; next: boolean };

const SlidesControl: React.FC<ISlidesControlProps> = ({ previous, next }) => {
    return (
        <nav>
            TODO {previous} {next}
        </nav>
    );
};