TypeScript中如何映射含嵌套对象的API返回数据

我是TypeScript新手，需求是从API调用结果中提取id、name、content字段，构建包含这类对象列表的新对象。过程中遇到了类型无法正确传递的问题，经过几次调整后最终解决，以下是详细过程：

初始尝试（存在类型不匹配问题） #

初始类型定义 #

type JokesData = {
    jokes: {
        id: string;
        name: string;
        content: string;
    };
};

初始映射函数 #

export const getJokes = async () => {
    const res = await fetch("http://localhost:3000/api/jokes");
    const data = await res.json();

    const jokesList: JokesData = {
        jokes: data.docs.map(({ id, name, content }) => ({
            id,
            name,
            content,
        })),
    };

    return jokesList;
};

问题点：JokesData中jokes被定义为单个对象，但data.docs.map()返回的是数组，类型完全不匹配，导致类型校验失败。

中间修改（仍未匹配API返回结构） #

修改后的类型定义 #

// types
type JokesData = {
    jokes: JokesDataItems[];
};

type JokesDataItems = {
    id: string;
    name: string;
    content: string;
};

修改后的映射函数 #

export const getJokes = async () => {
    const res = await fetch("http://localhost:3000/api/jokes");
    const data = await res.json();

    const jokesList: JokesData = {
        jokes: data.docs.map(({ id, name, content }: JokesDataItems) => ({
            id,
            name,
            content,
        })),
    };

    return jokesList;
};

问题点：虽然将jokes改为数组类型，但JokesData的结构和API实际返回的结构不匹配（API返回的是包含docs字段的对象），且未给data指定类型，data.docs仍为any类型，无法实现正确的类型传递。

最终正确实现 #

type JokesData = {
    docs: JokesDataItems[];
};

type JokesDataItems = {
    id: string;
    name: string;
    content: string;
};

// 获取笑话列表
export const getJokes = async () => {
    const res = await fetch("http://localhost:3000/api/jokes");
    const data: JokesData = await res.json();

    return {
        jokes: data.docs
            .splice(0, 5)
            .map(({ id, name, content }) => ({ id, name, content })),
    };
};

关键修正：

1. 调整JokesData结构，使其完全匹配API返回格式（包含docs字段，值为JokesDataItems数组）
2. 给res.json()返回的data指定JokesData类型，让TypeScript能正确推断docs的类型
3. 先截取前5条数据，再映射提取目标字段，返回的对象类型会被TypeScript自动正确推断

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