前端 - 定义React组件时，返回类型写与不写的区别大吗？ 推荐使用哪种方式呢？

Question

我们在定义一个React组件的时候，在定义函数组件时，可以写明返回参数类型也可不写：

import React from 'react'

interface Props {
  name: string 
}

function Hello(props: Props): React.ReactElement { 
  return <>Hello</>
}

或者：
function Hello(props: Props) { 
  return <>Hello</>
}

请问下，写与不写的区别大吗？
推荐使用哪种方式呢？

Answer 1

都可以，tsc 会自动类型推断的。不过显式定义出来有几点好处：

一方面是可以约束返回值，避免函数内部可能存在某些分支情况下遗漏了返回值。比如：

function foo(): string {
   if (someCondition) {
       return; // tsc 会警告
   }

   return 'bar';
}

function foo() {
   if (someCondition) {
       return; // tsc 不会警告，并且返回值类型会自动推断成 string | undefined，与预期不符
   }

   return 'bar';
}

另一方面就是如果返回值是一个复杂类型，那么显式定义出来，在 IDE 里可以获得更好的智能提示。比如：

type Foo = {
   id: number;
   name: string;
   略... 
}

function foo(): Foo {
    return {
        id: // 在 IDE 里你此时可以获得智能提示
    }
}

function foo() {
    return {
        id: // 没有智能提示。这点光看代码可能不太好理解，你自己在 VSCode 之类的里试一下就明白了
    }
}

再有就是对于调用者而言可以更直观的“一眼看穿”，知道返回值类型是什么，这点不用举例你也应该懂。

当然了，不显式定义也不是没有好处，就俩字：

省事。

以上都是针对任意一种函数返回值定义而言，并不单单只对 JSX/TSX。

个人习惯是如果函数的返回值是一个复杂类型、或者内部逻辑比较复杂时，会显式声明，以期望获得更好的代码智能提示；否则就不声明。

Answer 2

这和 React 无关，而是 TypeScript。

可以根据个人习惯而定，我自己是不写的，自动推断即可。

但要是说，显式书写返回值完全没有好处，那也不既然，最起码也是一种检查，比如：

// 两者皆可
function add(a: number, b:number) {
    return a + b
}

function add(a: number, b:number): number {
    return a + b
}

// 无形之中出了点错，但是可以自动推断返回值为 `string`，没问题
function add(a: number, b:number) {
    return a + b + ''
}

// 不可以！返回值类型不对
function add(a: number, b:number): number {
    return a + b + ''
}

Answer 3

写或不写并不会影响执行, 因为TS会自动推断
但是建议写上:

• 可读性强
• 类型检测更好, 可以增强组件的类型检查, 调试更方便, 也方便后期维护