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

龙龙

我的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>
  )
}

为什么？

尼基塔·马德耶夫（Nikita Madeev）

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>
    );
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。