本文旨在解决 TypeScript 中如何利用泛型和接口，在 HttpServiceMock 这样的模拟服务中，实现对数据对象形状的精确类型推断。通过使用 discriminated union 和 literal types，确保 TypeScript 能够根据传入的 URL，准确识别并返回对应的数据类型，避免出现属性可选或类型不明确的问题。文章将提供详细的代码示例和解释，帮助读者掌握这一高级技巧。
在 TypeScript 中，我们经常需要创建模拟服务来进行单元测试或者前端开发。HttpServiceMock 就是一种常见的模拟 HTTP 服务。然而，在使用泛型时，TypeScript 可能会无法精确推断数据对象的形状，导致属性被标记为可选，或者类型不明确。本文将介绍如何利用 TypeScript 的高级特性，如 discriminated union 和 literal types，来解决这个问题，实现精确的类型推断。
使用 Discriminated Union 实现类型推断
首先，我们定义一个 HttpServiceMockData 接口，用于描述模拟服务的数据结构：
interface HttpServiceMockData{ status: number; data: T; url: string; }
接下来，我们创建一个 createHttpServiceMock 函数，该函数接受一个 HttpServiceMockData 数组作为参数。为了让 TypeScript 能够根据 URL 推断出 data 的具体类型，我们需要使用 discriminated union。
export function createHttpServiceMock>( data: ReadonlyArray ) { return { get: async (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 };
export function createHttpServiceMockTable(
data: Services
) {
return {
get: async (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 中泛型类型推断不精确的问题。这些技巧可以帮助我们编写更加类型安全、易于维护的代码。在实际开发中，可以根据具体情况选择合适的方案。
