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

Question

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

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

它给我以下编译时错误：

./src/App.tsx SyntaxError: /apps/src/App.tsx: Unexpected token, expected ")" (9:24)

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

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

我怎样才能让编译器理解这个语法？

Answer 1

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

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

它表示，函数 (=>) returns a boolean 并接受一个类型为对象 {...} 的参数和一个类型为 name 的属性string.

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

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

myfn({name: 'John'});

Unexpected token when typing a function with destructuring assignment parameters in Create-React-App