为什么这个箭头函数和相同签名的非箭头函数不一样？

Question

我有两个具有相同签名的函数（应该是），但从编译器的角度来看，它们似乎不一样。todos 箭头函数中的 Todo[] 型，而 todos 在非箭头函数中，属于 any 型。

我一定是遗漏了什么。

    interface TodoState {
      todos: Todo[]
    }

//no error
    const arrowFunc: React.FC<TodoState> = ({ todos }) => { }

//error: binding element 'todos' implicitly has an 'any' type.ts(7031)
    function nonArrow({ todos }): React.FC<TodoState> {}

Answer 1

const arrowFunc: React.FC<TodoState> = ({ todos }) => {}
//               ^ function type       ^ props        ^ function return value

这声明了一个函数，该函数的类型符合 React.FC<TodoState>. 也就是说，该功能组件接受的道具如 TodoState加一 children 属性，并返回 JSX。

function nonArrow({ todos }): React.FC<TodoState> {}
//                            ^ function return value

但这说的是另一回事。nonArrow 是一个不返回 JSX 的函数，它返回的是一个功能组件。

第一种形式将函数类型为 React.FC<TodoState>，第二种形式将函数的返回值类型为 React.FC<TodoState>.

---

没有任何语法可以将一个现有的函数类型用 function 关键字。通常情况下，如果你想让一个功能组件被打成这样，你会使用第一种形式。

但这只是在你需要 children 作为一个道具。否则，这个简单的构造对于大多数功能组件来说都很好用。

function MyFuncComp({ propName }: Props) {
  return <h1>{propName}</h1>
}

// called like this:
<MyFuncComp propName='foo'/>

所有你需要输入的大部分时间是道具， 然后只需返回一些JSX，然后Typescript+React帮你解决剩下的问题。

---

或者如果你的组件需要子程序，这也是常见的做法。

interface Props {
  propName: string
}

const MyFuncComp: React.FC<Props> = ({ propName, children }) => {
  return <div>
    <h1>{propName}</h1>
    {children}
  </div>
}

// called like this:
<MyFuncComp propName='foo'>
  <p>some children</p>
</MyFuncComp>