TypeScript 下函数组件的返回类型怎么写?

#1

看了网上很多 TypeScript 的 React 函数组件的写法,要么是不写返回类型,要么是给整个函数组件写上类型 React.FunctionComponent

函数组件是函数,函数不写返回类型总觉得不安心。
React.FunctionComponent 的话,有个隐式的 children,不喜欢。

用 vscode peek type definition 看了下,推断的返回类型是 JSX.Element,这是一个 extends React.ReactElement<any, any> 的 Interface,所以尝试写成了类似这样:

type HelloProps = { readonly name: string }
function Hello({ name }: HelloProps): ReactElement<HelloProps> {
  return <button>Hello {name}!</button>
}

这样写可以编译。

但不确定是不是恰当的写法?

#2
#3

嗯,之前看到网上是有很多例子整个函数类型写 React.SFC,这个转换成现在的写法就是 React.FunctionComponent

这里的 Hello 是 Stateless 的,理论上里面可以有 hooks 之类,类型仍然是 FunctionComponent,返回值仍然是 ReactElement?

这个主题似乎和 SFC 的 deprecate 没什么关系。还是说,中文语境里的「函数组件」约定俗称等于 SFC,不等于 FC?我本意是用「函数组件」指 FunctionComponent

#4

这个写法可以参考下, 我们也用的这种.

const example: React.FC<IExample> = ({propsType}) => ();

deprecate 的事情我刚知道, 看上去对我们还没有影响.

#5

这个写法在 react-devtool 上看到就会是一坨的

<Unkown>
  <Unkown>
   <div>
     <Unkown/>
     <Unkown/>
   </div>
  </Unkown>
</Unkown>
#6

这个是怎么搞出来的,试了下,无论是 function Hello({ name }: HelloProps): ReactElement<HelloProps> 的写法,还是 jiyinyiyong 的 const Hello: React.FC<HelloProps> = ({name}) => <button>Hello {name}!</button> 的写法,在 react-devtool 里看起来都是正常的呀。

这些都只是类型注解,应该不会影响 react-devtool 的解析呀。

#7

还真是!!
之前还被这个问题困扰,每次都尴尬的写一坨的function

#8

我的是这个样的。。。。。并不清楚毛病,可能和tsconfig的配置有关,
我的箭头函数可能被编译成匿名函数了, 而create-react-app的配置,不会编译成匿名函数

#9

找到原因了, 箭头函数直接export const 会造成这个问题

export const ArrowFunc = ()=> null; // 这个在devtool会出现 Unknown
console.log(ArrowFunc.name) // ""
const ArrowFunc2 = ()=> null; // 这个在devtool正常显示
console.log(ArrowFunc2.name) // ==> "ArrowFunc2"
export { ArrowFunc2 } 
#10

原来如此。一直习惯 export 单独写,所以幸运地绕过了这个问题。