TypeScript 高级技巧：利用泛型和接口实现精确的数据对象类型推断-js教程-PHP中文网

TypeScript 高级技巧：利用泛型和接口实现精确的数据对象类型推断

碧海醫心

发布： 2025-09-02 15:52:53

原创

493人浏览过

typescript 高级技巧：利用泛型和接口实现精确的数据对象类型推断

本文旨在解决 TypeScript 中如何利用泛型和接口，在 HttpServiceMock 这样的模拟服务中，实现对数据对象形状的精确类型推断。通过使用 discriminated union 和 literal types，确保 TypeScript 能够根据传入的 URL，准确识别并返回对应的数据类型，避免出现属性可选或类型不明确的问题。文章将提供详细的代码示例和解释，帮助读者掌握这一高级技巧。

在 TypeScript 中，我们经常需要创建模拟服务来进行单元测试或者前端开发。HttpServiceMock 就是一种常见的模拟 HTTP 服务。然而，在使用泛型时，TypeScript 可能会无法精确推断数据对象的形状，导致属性被标记为可选，或者类型不明确。本文将介绍如何利用 TypeScript 的高级特性，如 discriminated union 和 literal types，来解决这个问题，实现精确的类型推断。

使用 Discriminated Union 实现类型推断

首先，我们定义一个 HttpServiceMockData 接口，用于描述模拟服务的数据结构：

interface HttpServiceMockData<T> {
  status: number;
  data: T;
  url: string;
}

登录后复制

接下来，我们创建一个 createHttpServiceMock 函数，该函数接受一个 HttpServiceMockData 数组作为参数。为了让 TypeScript 能够根据 URL 推断出 data 的具体类型，我们需要使用 discriminated union。

export function createHttpServiceMock<Services extends HttpServiceMockData<any>>(
  data: ReadonlyArray<Services>
) {
  return {
    get: async <TargetUrl extends Services['url']>(url: TargetUrl)
        : Promise<{ data: (Services & { url : TargetUrl })['data'] }> => {
      const res = data.find((d) => d.url === url);
      if (!res) {
        throw new Error(`No data found for url ${url}`);
      }
      return {
        data: res.data,
      };
    },
  };
};

登录后复制

在这个函数中，Services 是一个 discriminated union 类型，它代表了所有可能的 HttpServiceMockData 类型。TargetUrl 是一个泛型参数，它约束了 url 参数的类型，只能是 Services 中 url 属性的其中一个值。通过 Services & { url : TargetUrl } 交叉类型，TypeScript 可以根据传入的 URL，找到对应的 HttpServiceMockData 类型，并提取出 data 属性的类型。

使用 Literal Types 确保类型精确

为了让 TypeScript 能够正确推断 URL 的类型，我们需要使用 literal types。Literal types 允许我们将字符串、数字或者布尔值作为类型。

Chromox

Chromox是一款领先的AI在线生成平台，专为喜欢AI生成技术的爱好者制作的多种图像、视频生成方式的内容型工具平台。

184

查看详情

const service = createHttpServiceMock([
  {
    url: '/users/1' as const,
    data: {
      id: 1,
      username: 'test',
    },
    status: 200,
  },
  {
    url: 'test' as const,
    data: {
      id: 1,
      username: 'test',
      lastname: 'test',
    },
    status: 200,
  },
]);

const res = service.get('test').then((res) => {
  res.data // TypeScript 可以正确推断出 res.data 的类型为 { id: number; username: string; lastname: string; }
});

登录后复制

通过 as const，我们将 URL 的类型从 string 变成了具体的字符串字面量类型，例如 '/users/1'。这样，TypeScript 就可以根据 URL 的具体值，精确推断出 data 的类型。

使用 Service Table 简化类型定义

除了使用 discriminated union，我们还可以使用 service table 来简化类型定义。

type ServiceTable = { [K in string] : HttpServiceMockData<any> };
export function createHttpServiceMockTable<Services extends ServiceTable>(
  data: Services
) {
  return {
    get: async <TargetUrl extends keyof Services>(url: TargetUrl)
        : Promise<{ data: Services[TargetUrl]['data'] }> => {
            const res = data[url];
            if (!res) {
              throw new Error(`No data found for url ${url}`);
            }
            return {
              data: res.data,
            };
    },
  };
};

const service2 = createHttpServiceMockTable({
  ['/users/1'] : {
    url: '/users/1',
    data: {
      id: 1,
      username: 'test',
    },
    status: 200,
  },
  test : {
    url: 'test',
    data: {
      id: 1,
      username: 'test',
      lastname: 'test',
    },
    status: 200,
  },
});

const res2 = service2.get('test').then((res) => {
  res.data // TypeScript 可以正确推断出 res.data 的类型为 { id: number; username: string; lastname: string; }
});

登录后复制

在这个方法中，我们定义了一个 ServiceTable 类型，它是一个键值对的集合，键是 URL，值是 HttpServiceMockData。通过 keyof Services，我们可以获取 Services 中所有键的类型，并将其作为 TargetUrl 的约束。这样，TypeScript 就可以根据 URL 的键，直接从 Services 中提取出对应的 HttpServiceMockData 类型，并提取出 data 属性的类型。