TypeScript中如何创建React Chunk组件数组且无需将Chunk.js改为tsx

1. 现有写法的错误说明 #

typeof Chunk 和 Array<typeof Chunk> 的写法都是错误的。
typeof Chunk 拿到的是Chunk组件函数本身的类型，也就是函数类型(props: ChunkProps) => JSX.Element，但你代码中通过<Chunk />调用组件后返回的是组件渲染生成的JSX元素，不是组件函数本身，二者类型完全不匹配。你之前加typeof只是暂时消除了TS的语法报错，但类型标注和实际返回值逻辑是不符的。

2. 无需修改Chunk.js的解决方案 #

你不需要将Chunk.js改为.tsx后缀，直接用React内置的元素类型标注返回值即可：

// prettyText.tsx
import React from "react";
import { Chunk } from "./chunk/Chunk";

// 可根据你的实际业务调整Styling的具体类型
type Styling = Record<string, any>;

// 返回值标注为 React.ReactElement[] 即可，代表React元素数组
function prettyText(inputText: string, stylings: Array<Styling>, callback: any): React.ReactElement[] {
    const isStylingsEmpty = stylings.length === 0;
    if (isStylingsEmpty) {
        const createNonspecialChunk = <Chunk index={0} availableStylings={null} chunkValue={inputText} />;
        return [createNonspecialChunk];
    }
    if (!atLeastOneWellFormedStyling) {
        const createNonspecialChunk = <Chunk index={0} availableStylings={null} chunkValue={inputText} />
        return [createNonspecialChunk];
    }
    // 其他业务逻辑返回
    return [];
}

该写法可以完全符合你「返回Chunk组件实例数组」的需求，无需修改原有JS组件文件。

3. 关于interface的实操说明 #

你看到的资料提到的interface，通常是用来定义组件的Props类型，如果你需要给Chunk组件加上Props类型校验，又不想修改原有Chunk.js，可以单独创建类型声明文件：

1. 在Chunk.js同级目录新建Chunk.d.ts文件
2. 写入以下内容：

import React from "react";

// 用interface定义Chunk组件的入参类型
export interface ChunkProps {
  index: number;
  availableStylings?: string | null;
  chunkValue: React.ReactNode;
}

// 声明Chunk组件的类型
export function Chunk(props: ChunkProps): JSX.Element;

TS会自动识别该声明文件，之后你在TS文件中调用Chunk组件时，会自动提示Props的类型、校验入参是否正确，完全不需要改动原有JS文件。

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