Javascript-如何形成TypeScript规则/配置,如果我不在React Functional Component中返回JSX,则会出错

我多次犯错,而忘记了从功能组件返回JSX.也就是说,我执行以下操作：

const Hello = function Hello({name}) {
  <div>Hello  {name}</div>
}

代替

const Hello = function Hello({name}) {
  return <div>Hello  {name}</div>
}

我完全知道为什么会出错,但是我经常将不需要此返回值的ES6语法混为一谈.

TypeScript是否可以提供任何帮助,所以在运行它之前我将其视为错误,并得到错误消息,提示可能缺少返回值？

这是一个问题的堆积如山：

https://stackblitz.com/edit/react-ts-badreturn?file=Hello.tsx

解决方法:

有几种选择.最好的方法是使用React.FunctionComponent P注释常量.类型.

import * as React from 'react';

const Hello: React.FunctionComponent<{ name: string }> = function Hello({name}) { // error  Type 'void' is not assignable to type 'ReactElement<any>'
    <div>Hello  {name}</div> 
}

另一个选择是只指定函数的返回类型

import * as React from 'react';

const Hello = function Hello({name}) : React.ReactElement<any> { // error  Type 'void' is not assignable to type 'ReactElement<any>'
    <div>Hello  {name}</div> 
}
// arrow function 
const Hello = ({name}) : React.ReactElement<any> => { // error  Type 'void' is not assignable to type 'ReactElement<any>'
    <div>Hello  {name}</div> 
}

注意即使没有任何这些注释,打字稿仍然会有所帮助,如果您尝试在tsx中使用错误版本的Hello,它将报告错误.

编辑

另一种选择是使用tslint并启用no-unused-expression规则.该规则将确保：

Unused expressions are expression statements which are not assignments or function calls (and thus usually no-ops).

当您创建一个jsx元素而不执行任何操作时,将涵盖这种情况.