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

Question

我的IDE在此打字稿（tsx）代码段中显示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），在您的情况下为名称为boolean的2个参数

您需要类型描述（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>
    );
};