TypeScript 重載：字符串或自定義 object 作為 function 參數和返回類型

Question

賞金將在 3 天后到期。 此問題的答案有資格獲得+300聲望賞金。 J. Hesters正在從可靠的來源尋找答案：

尋找 TypeScript 向導來幫助解決這些錯誤

我試圖在 TypeScript 中重載 function。

這是我的代碼：

/**
 * Returns a 400 Bad Request error.
 *
 * @returns A response with the 400 status code and a message.
 */
export function badRequest(): TypedResponse<{ message: string }>;
/**
 * Returns a 400 Bad Request error.
 *
 * @param errors - An object containing the errors from the Zod schema.
 * @returns A response with the 400 status code, a message and the errors.
 */
export function badRequest<T>(
  errors: ZodFormattedError<T>,
): TypedResponse<{ message: string; errors: ZodFormattedError<T> }>;
/**
 * Returns a 400 Bad Request error.
 *
 * @param errors - An error string.
 * @returns A response with the 400 status code, a message and the errors.
 */
export function badRequest(
  errors: string,
): TypedResponse<{ message: string; errors: string }>;
export function badRequest<T>(errors?: ZodFormattedError<T> | string) {
  return json(
    { message: 'Bad Request', ...(errors && { errors }) },
    { status: 400 },
  );
}

const myRequest = badRequest({
  _errors: [
    {
      code: 'invalid_type',
      expected: 'string',
      received: 'number',
      path: ['name'],
      message: 'Expected string, received number',
    },
  ],
});

我想讓 TypeScript 知道，當在沒有任何badRequest的情況下調用 badRequest 時，返回類型只有一條消息，當用字符串調用時，它應該有一個包含字符串的屬性errors ，當它用ZodFormattedError調用時errors屬性應該是那些錯誤。

我試過上面的代碼，TypeScript 大喊：

No overload matches this call.
  Overload 1 of 3, '(errors: ZodFormattedError<{ _errors: unknown; }, string>): TypedResponse<{ message: string; errors: ZodFormattedError<{ _errors: unknown; }, string>; }>', gave the following error.
    Type '{ code: string; expected: string; received: string; path: string[]; message: string; }' is not assignable to type 'string'.
  Overload 2 of 3, '(errors: string): TypedResponse<{ message: string; errors: string; }>', gave the following error.
    Argument of type '{ _errors: { code: string; expected: string; received: string; path: string[]; message: string; }[]; }' is not assignable to parameter of type 'string'.

我怎樣才能正確地重載這個 function？

Answer 1

Typescript 需要參數個數相同才能支持函數重載。

export function badRequest<T>(errors: ZodFormattedError<T>); // overloads
export function badRequest(errors: string) // overloads
export function badRequest() // throws an error as the number of arguments are not same as the earlier two methods.

您可以使用未定義的值調用 badRequest(errors: string)，其中沒有基於錯誤 === 未定義的參數實現。

參考這里

Answer 2

我猜你對第二個簽名的真正意思應該是：

export function badRequest<T extends<any, any>>(
  errors: T,
): TypedResponse<{ message: string; errors: T }>;

這使您的 TS 錯誤 go 消失了。

請注意，原始ZodFormattedError<T, U=string>接口的第二個類型參數默認為string 。 您必須在第二個 position 中明確提供一個類型值，以便覆蓋默認值。 在這里我只使用any ，如果您想要更具體的約束，請更改它。

Answer 3

用這些重載修復它：

/**
 * Returns a 400 Bad Request error.
 *
 * @returns A response with the 400 status code and a message.
 */
export function badRequest(): TypedResponse<{ message: string }>;
/**
 * Returns a 400 Bad Request error.
 *
 * @param errors - An object containing the errors from the Zod schema.
 * @returns A response with the 400 status code, a message and the errors.
 */
export function badRequest<T>(
  errors?: ZodFormattedError<T>,
): TypedResponse<{ message: string; errors: ZodFormattedError<T> }>;
/**
 * Returns a 400 Bad Request error.
 *
 * @param errors - A string containing the errors.
 * @returns A response with the 400 status code, a message and the errors.
 */
export function badRequest(
  errors?: string,
): TypedResponse<{ message: string; errors: string }>;
export function badRequest<T>(
  errors?: ZodFormattedError<T> | string,
): TypedResponse<{ message: string; errors?: ZodFormattedError<T> | string }> {
  return json(
    { message: 'Bad Request', ...(errors && { errors }) },
    { status: 400 },
  );
}