TypeScript类型兼容报错求助：Promise resolve与联合类型参数不匹配

问题代码 #

export type InitResult = {canInit: boolean; reason: string}
export type ResolveParams = InitResult | boolean

export function selectMethod(
  payload: {resolve?: (value: ResolveParams) => void} = {},
): void {
  //
  return undefined
}

const component_one_setup = (): Promise<boolean> =>
  new Promise(resolve => {
    // ts error:  Type '(value: boolean | PromiseLike<boolean>) => void' is not assignable to type '(value: ResolveParams) => void'.
    selectMethod({resolve})
  })

const component_two_setup = (): Promise<InitResult> =>
  new Promise(resolve => {
    // ts error:  Type '(value: InitResult | PromiseLike<InitResult>) => void' is not assignable to type '(value: ResolveParams) => void'
    selectMethod({resolve})
  })

报错原因 #

TypeScript遵循函数参数逆变规则：当一个函数要求接收ResolveParams（即boolean | InitResult）类型的参数时，传入的回调函数必须能处理ResolveParams的所有可能值。但组件里的resolve是Promise自带的回调，只能处理单一类型（比如component_one_setup里的resolve只接受boolean | PromiseLike<boolean>，无法处理InitResult），所以TS判定类型不兼容。

解决方案 #

方案1：将selectMethod改为泛型函数（推荐）

通过泛型让函数适配不同的resolve类型，既保留类型安全又提升灵活性：

export type InitResult = {canInit: boolean; reason: string}
export type ResolveParams = InitResult | boolean

// 泛型T约束为ResolveParams的子类型，适配不同的resolve参数
export function selectMethod<T extends ResolveParams>(
  payload: {resolve?: (value: T | PromiseLike<T>) => void} = {},
): void {
  return undefined
}

const component_one_setup = (): Promise<boolean> =>
  new Promise(resolve => {
    selectMethod({resolve}) // TS自动推断T为boolean，无报错
  })

const component_two_setup = (): Promise<InitResult> =>
  new Promise(resolve => {
    selectMethod({resolve}) // TS自动推断T为InitResult，无报错
  })

方案2：类型断言（不推荐，会弱化类型检查）

如果无法修改selectMethod的定义，可以用类型断言强制转换，但这会跳过TS的类型校验，可能隐藏潜在问题：

const component_one_setup = (): Promise<boolean> =>
  new Promise(resolve => {
    selectMethod({resolve: resolve as (value: ResolveParams) => void})
  })

const component_two_setup = (): Promise<InitResult> =>
  new Promise(resolve => {
    selectMethod({resolve: resolve as (value: ResolveParams) => void})
  })

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