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

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），在你的例子中有 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>
    );
};

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

What is wrong with typescript deconstructing operator in this snippet?

typescript

ecmascript-6

react-tsx