主页 / coding / 问题 / 79011212
Accepted
mb21
Asked: 2024-09-22 16:29:51 +0800 CST

具有可选参数的函数取决于函数的泛型类型

  • 772

我正在尝试实现一个极简的类型安全函数，该函数针对类型化的服务器 API 执行 HTTP 请求，但类型问题让我很头疼。具体来说，如何使第三个参数（HTTP 请求负载）对于GET和请求为可选，同时对于和DELETE为经过验证且非可选。POSTPUT

一个简化的示例（TypeScript 游乐场）：

export type Method = 'GET' | 'DELETE' | 'POST' | 'PUT'

// attempt 1:
const httpRequest1 = <M, D>(method: M, url: string, data?: D) =>
  'not implemented yet' as any


// attempt 2:
type HttpRequest <M extends Method, D, R=unknown> = M extends 'GET' | 'DELETE'
  ? (method: M, url: string) => Promise<R>
  : (method: M, url: string, data: D) => Promise<R>

const httpRequest2: HttpRequest = (method, url, data) =>
  'not implemented yet' as any


// expected usage:
interface Data {
  title: string;
}
httpRequest<'POST', Data>('POST', '/', { title: 'test' }) // should typecheck
httpRequest<'POST', Data>('POST', '/', { titleoops: 'test' }) // should NOT typecheck
httpRequest<'POST', Data>('POST', '/') // should NOT typecheck
httpRequest<'GET', undefined>('GET', '/') // should typecheck

我从来没有同时按照预期对全部四个条件进行类型检查。至少有一个条件总是不成立。

编辑：如果您好奇，完整的用例，已使用工作解决方案进行了更新。

typescript

2 个回答

  1. Best Answer

    您可以使用函数重载。

    您创建一个可以在运行时处理任何情况的函数，然后为其提供多个充当不同重载的类型声明。

    export type Method = 'GET' | 'DELETE' | 'POST' | 'PUT'

function httpRequest(method: 'GET' | 'DELETE', url: string, data?: Data): any;
function httpRequest(method: 'POST' | 'PUT', url: string, data: Data): any;
function httpRequest(method: Method, url: string, data?: Data) {
  return 'not implemented yet' as any
}

// expected usage:
interface Data {
  title: string;
}
httpRequest('POST', '/test', { title: 'test' }) // should typecheck
httpRequest('POST', '/test', { titleoops: 'test' }) // should not  typecheck
httpRequest('POST', '/test') // should not  typecheck
httpRequest('GET', '/test') // should typecheck

    在调用点，TS 将确保您的参数与其中一个重载匹配。

    • 2

  2. 你可以使用扩展语法来代替函数重载：

    export type Method = 'GET' | 'DELETE' | 'POST' | 'PUT'

const httpRequest = async<D, R = D, M extends Method = Method>
  (...[method, url, data]: M extends 'GET' | 'DELETE' ? [M, string]: [M, string, D]): Promise<R> => {
    return {} as R;
};

// expected usage:
interface Data {
  title: string;
}

httpRequest<Data>('POST', '/test', { title: 'test' }) // should typecheck
httpRequest<Data>('POST', '/test', { titleoops: 'test' }) // should not  typecheck
httpRequest<Data>('POST', '/test') // should not  typecheck
httpRequest<Data>('GET', '/test') // should typecheck

    操场

    • 1

相关问题