TypeScript泛型报错：Parameters<URLS[T]>与URLS[T]不匹配的原因及解决

当泛型T extends keyof URLS被解析时，TypeScript会将T视为联合类型"inviteNewUser" | "resetPassword"。此时：

• URLS[T]对应两个函数的联合类型：(({teamId, intent}: {teamId: string; intent?: Intent}) => string) | (({intent}: {intent?: Intent}) => string)
• OptionArgs<T>对应两个参数类型的联合：{teamId: string; intent?: Intent} | {intent?: Intent}

TypeScript对联合函数的调用有强制规则：传入的参数必须能匹配联合类型中所有函数的参数要求（即参数类型为所有分支的交叉类型）。但你的args是联合类型，无法同时满足两个函数的参数约束（比如resetPassword的参数不需要teamId，但inviteNewUser要求必须传入），因此抛出类型错误。

本质问题是：泛型T的联合类型导致函数与参数的类型关联断裂，TypeScript无法自动推断出args和当前urlCreator属于同一分支。

以下提供三种可行的修复方式：

方案1：类型断言快速修复 #

直接在调用时断言args与当前urlCreator的参数类型匹配，明确两者的关联性：

type Intent = "invite" | "reset-password"

const urls = {
    inviteNewUser: ({teamId, intent = 'invite'}: {teamId: string; intent?: Intent}) => `/magic-link?intent=${intent}&teamId=${teamId}`,
    resetPassword: ({intent = 'reset-password'}: {intent?: Intent}) => `/magic-link?intent=${intent}`,
} as const

type URLS = typeof urls
type OptionArgs<T extends keyof URLS> = Parameters<URLS[T]>[0]

export function getUrl<T extends keyof URLS>(
    key: T,
    options: {
        args: OptionArgs<T>
    } = {
    args: {} as OptionArgs<T>
  },
) {
    const urlCreator = urls[key]
    // 断言args匹配当前urlCreator的参数类型
    const url = urlCreator(args as Parameters<typeof urlCreator>[0])
    return url
}

方案2：函数重载（类型更严谨） #

通过函数重载为每个URL key定义明确的参数规则，从根源避免泛型联合类型的问题：

type Intent = "invite" | "reset-password"

const urls = {
    inviteNewUser: ({teamId, intent = 'invite'}: {teamId: string; intent?: Intent}) => `/magic-link?intent=${intent}&teamId=${teamId}`,
    resetPassword: ({intent = 'reset-password'}: {intent?: Intent}) => `/magic-link?intent=${intent}`,
} as const

type URLS = typeof urls
type OptionArgs<T extends keyof URLS> = Parameters<URLS[T]>[0]

// 重载签名：为每个key定义专属参数规则
export function getUrl(key: "inviteNewUser", options?: { args: OptionArgs<"inviteNewUser"> }): string;
export function getUrl(key: "resetPassword", options?: { args: OptionArgs<"resetPassword"> }): string;

// 实现签名
export function getUrl<T extends keyof URLS>(
    key: T,
    options: { args: OptionArgs<T> } = { args: {} as OptionArgs<T> }
) {
    const urlCreator = urls[key]
    const url = urlCreator(options.args)
    return url
}

方案3：分布式条件类型优化类型关联 #

通过修改OptionArgs的定义，利用分布式条件类型让参数与函数严格绑定，同时调整默认值的类型断言：

type Intent = "invite" | "reset-password"

const urls = {
    inviteNewUser: ({teamId, intent = 'invite'}: {teamId: string; intent?: Intent}) => `/magic-link?intent=${intent}&teamId=${teamId}`,
    resetPassword: ({intent = 'reset-password'}: {intent?: Intent}) => `/magic-link?intent=${intent}`,
} as const

type URLS = typeof urls
// 分布式条件类型：确保每个key对应唯一的参数类型
type OptionArgs<T extends keyof URLS> = T extends keyof URLS ? Parameters<URLS[T]>[0] : never

export function getUrl<T extends keyof URLS>(
    key: T,
    options: {
        args: OptionArgs<T>
    } = {
    args: {} as OptionArgs<T>
  },
) {
    const urlCreator = urls[key]
    // 此时TypeScript能自动推断args与urlCreator的对应关系
    const url = urlCreator(options.args)
    return url
}

内容的提问来源于stack exchange，提问作者jsco