如何在TypeScript中将动态对象数组转换为带表头的表格数组？

问题描述 #

有一个返回动态结构对象数组的API，对象值类型为string/number/null，需要将其转换为包含表头和数据行的二维数组（用于导出表格）。已有JavaScript实现，但无法在TypeScript中运行，需要适配TS版本。

原JS代码的TS适配问题 #

原代码在TS中报错主要是因为缺少类型注解，TS无法推断动态数据的类型，同时对空数组等边界情况没有处理，容易触发运行时错误。

TypeScript 实现代码 #

// 定义API返回的数据项类型：键为字符串，值为string/number/null
type ApiDataItem = Record<string, string | number | null>;

function convertApiDataToTableArray(apiResponse: { data: ApiDataItem[] }): (string | number | null)[][] {
    const data = apiResponse.data;
    // 处理空数组的边界情况
    if (data.length === 0) {
        return [];
    }

    // 获取表头（取第一个数据项的键）
    const firstItem = data[0];
    const headers = Object.keys(firstItem) as Array<keyof ApiDataItem>;

    // 初始化二维数组：行数=数据行数+1（表头），列数=表头数量
    const tableArray = makeArray<string | number | null>(data.length + 1, headers.length, undefined);

    // 填充表头
    headers.forEach((header, index) => {
        tableArray[0][index] = header;
    });

    // 填充数据行
    data.forEach((item, rowIndex) => {
        const values = headers.map(key => item[key]);
        values.forEach((value, colIndex) => {
            tableArray[rowIndex + 1][colIndex] = value;
        });
    });

    return tableArray;
}

// 泛型版本的数组初始化函数，支持指定值类型
function makeArray<T>(width: number, height: number, defaultValue: T | undefined): T[][] {
    const arr: T[][] = [];
    for (let i = 0; i < width; i++) {
        arr[i] = [];
        for (let j = 0; j < height; j++) {
            arr[i][j] = defaultValue as T;
        }
    }
    return arr;
}

// 使用示例
const sampleResponse1 = {
    data: [
        { Address: "0x964fd5383dfdbfbd54224de9f773e5ac7bdb0086", "Number of Doses": 58, Rank: 1 },
        { Address: "0x062f95282a797c49f0994699c2c96ae566293e0c", "Number of Doses": 53, Rank: 2 }
    ]
};

console.log(convertApiDataToTableArray(sampleResponse1));

关键修改说明 #

1. 类型定义：用ApiDataItem统一描述动态数据项的类型，让TS能识别数据的键值类型。
2. 边界处理：增加空数组判断，避免因data[0]为undefined导致的报错。
3. 泛型函数：makeArray改为泛型函数，确保返回的数组类型与填充值类型一致，避免类型隐式转换。
4. 安全取值：通过headers.map(key => item[key])确保每个数据行的列顺序与表头完全匹配，避免因对象键顺序不一致导致的列错位（TS中Object.values的顺序不保证与Object.keys完全一致）。

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