如何实现React.FC带Props的无命名默认类型化导出

问题场景 #

现有一段带Props的React.FC视图组件代码，其中的变量名unwanted_string_that_i_want_to_drop属于冗余内容，希望移除它，实现一行式的无命名默认类型化导出：

import React from 'react';

const unwanted_string_that_i_want_to_drop: React.FC<{
    userName: string;
}> = (props) => (
    <span>Hello, {props.userName}</span>
);

export default unwanted_string_that_i_want_to_drop;

需求原因 #

组件名称理应由导入方定义，视图组件只需导出本身，无需额外命名中间变量。

已尝试方案及问题 #

曾尝试在末尾使用as断言实现导出，但存在两个问题：

import React from 'react';

export default ((props) => (
    <span>Hello, {props.userName}</span>
)) as React.FC<{
    userName: string;
}>;

1. 类型定义放在代码末尾，不够直观；
2. 运行时出现类型错误，提示类似is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes'的信息。

解决方案 #

方案1：直接为函数参数标注类型（推荐） #

无需依赖React.FC，直接在函数参数上定义Props类型，代码简洁直观，且避免类型断言带来的问题：

import React from 'react';

export default ({ userName }: { userName: string }) => (
    <span>Hello, {userName}</span>
);

如果Props结构复杂，可以先定义类型别名再使用，可读性更好：

import React from 'react';

type GreetingProps = { userName: string };
export default ({ userName }: GreetingProps) => (
    <span>Hello, {userName}</span>
);

方案2：使用React.FC的正确类型转换方式 #

如果一定要保留React.FC的类型标注，可以通过直接类型转换的方式，解决直观性和类型报错问题：

import React from 'react';

export default React.FC<{ userName: string }>(props => (
    <span>Hello, {props.userName}</span>
));

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