TypeScript泛型与接口：类型推断技巧解析

在 TypeScript 开发中，如何利用泛型和接口实现精准的数据类型推断至关重要。本文以 `HttpServiceMock` 模拟服务为例，深入探讨如何巧妙运用 discriminated union 和 literal types 等高级特性，确保 TypeScript 能够根据传入的 URL 精确识别并返回对应的数据类型，避免属性可选或类型不明确的问题。文章提供详细的代码示例，逐步讲解如何通过 discriminated union 实现基于 URL 的类型推断，以及如何通过 literal types 确保 URL 类型精确，从而提升代码的类型安全性与可维护性。此外，还介绍了使用 service table 简化类型定义的方案，帮助开发者选择最适合自身项目的解决方案，编写更加健壮的 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 允许我们将字符串、数字或者布尔值作为类型。

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 属性的类型。

总结

通过使用 discriminated union、literal types 和 service table，我们可以有效地解决 TypeScript 中泛型类型推断不精确的问题。这些技巧可以帮助我们编写更加类型安全、易于维护的代码。在实际开发中，可以根据具体情况选择合适的方案。

到这里，我们也就讲完了《TypeScript泛型与接口：类型推断技巧解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！