如何为export default箭头函数定义类型？

你可以直接在箭头函数的参数上指定类型，或者通过类型断言给整个函数标注组件类型，无需将函数赋值给const变量，具体方案如下：

方案1：直接为参数定义类型（推荐） #

先声明组件的Props接口，然后在箭头函数的参数中指定该类型，返回值类型TypeScript通常能自动推断，也可以显式标注：

import React from 'react';

// 定义组件接收的参数类型
interface HtmlLayoutProps {
  title: string;
  children: React.ReactNode;
}

// 直接为参数指定类型，返回值可选标注JSX.Element
export default ({ title, children }: HtmlLayoutProps): JSX.Element => {
  return (
    <html>
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="./output.css" rel="stylesheet" />
        <title>{title}</title>
      </head>
      <body>
        <h1 className="text-3xl font-bold underline">Hello world!</h1>
        {children}
      </body>
    </html>
  );
};

方案2：用类型断言指定整个函数的组件类型 #

如果想让函数符合React.FC这类组件类型，可以通过括号包裹箭头函数，再用as做类型断言：

import React from 'react';

interface HtmlLayoutProps {
  title: string;
  children: React.ReactNode;
}

export default (({ title, children }) => {
  return (
    <html>
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="./output.css" rel="stylesheet" />
        <title>{title}</title>
      </head>
      <body>
        <h1 className="text-3xl font-bold underline">Hello world!</h1>
        {children}
      </body>
    </html>
  );
}) as React.FC<HtmlLayoutProps>;

注意：你原来代码里的: Component是给返回值指定类型，但如果Component不是React组件的返回类型（比如JSX.Element），会出现类型不匹配的错误，所以重点是先定义参数的类型，再根据需要标注返回值或整个函数的类型。

内容的提问来源于stack exchange，提问作者kejedi