本文旨在解决 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<Services extends HttpServiceMockData>( data: ReadonlyArray) { return { get: async (url: TargetUrl) : Promise => { 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 => { 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 高级技巧：利用泛型和接口实现精确的数据对象类型推断的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519046.html
微信扫一扫 
支付宝扫一扫 
