本文旨在解决 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 中泛型类型推断不精确的问题。这些技巧可以帮助我们编写更加类型安全、易于维护的代码。在实际开发中，可以根据具体情况选择合适的方案。
评论（已关闭）
评论已关闭