在 Create-React-App 中键入具有解构赋值参数的函数时出现意外标记答案

【问题标题】：Unexpected token when typing a function with destructuring assignment parameters in Create-React-App在 Create-React-App 中键入具有解构赋值参数的函数时出现意外标记
【发布时间】：2024-05-15 22:55:02
【问题描述】：

我目前正在尝试为其参数实现解构分配语法的函数定义类型，例如

type somefunc = ({name} : {name: string}) => boolean;

它给了我以下编译时错误：

./src/App.tsx SyntaxError: /apps/src/App.tsx: Unexpected token, 预期“）”（9:24）

它突出显示了{name} 和{name: string} 之间的: 上的错误。但是，我知道这是为函数键入解构赋值参数的预期方式。

我的节点版本是node v10.13.0，而我的 react-scripts 版本是react-scripts v2.1.1，应该是最新的。

如何让编译器理解这种语法？

【问题讨论】：

左边应该做什么？ {name} :?你的意思是name :？
它应该定义这个函数的第一个参数使用解构赋值语法。 @CertainPerformance 但是在阅读了 ttulka 的回答后，我现在意识到这是不必要的。

标签： javascript reactjs typescript create-react-app

【解决方案1】：

如果你想在函数类型的声明中键入参数，你应该这样写：

type somefunc = (param : {name: string}) => boolean;

它说，函数 (=>) 返回一个 boolean 并接受一个类型为对象 {...} 的参数，其属性为 name，类型为 string。

然后你可以在函数的定义中使用解构：

const myfn: somefunc = ({name}) =>  {
    console.log('Name: ', name);
    return true;
}

myfn({name: 'John'});

【讨论】：

有效！谢谢。我在这个问题中使用的原始类型在一个没有使用 create-react-app 的项目上工作，而是使用我自己的 Babel 配置，所以我认为它也应该在这里工作。似乎有些不一致。