TypeScript可选参数类型校验问题：Axios请求头类型不兼容

问题原因 #

你遇到的错误是因为TypeScript将else分支的headers对象推断为包含Authorization?: undefined的类型，但Axios的AxiosRequestHeaders要求所有属性值必须是string | number | boolean，不允许undefined。即便你通过条件判断控制了属性的存在，TypeScript仍会把两个分支的对象合并成联合类型，导致其中一个分支不符合类型要求。

解决方案 #

以下几种简单方式可以修复这个问题：

方法1：动态添加Authorization属性

先创建基础headers对象，再根据authorization参数动态添加属性，这样TypeScript能正确推断出headers要么包含Authorization（值为string），要么不包含该属性，不会出现undefined的情况：

import { AxiosStatic, AxiosRequestHeaders } from 'axios'

export function createAxiosInstance(
  axiosFactory: AxiosStatic,
  baseUrl: string,
  apiKey: string,
  clientId: string,
  clientSecret: string,
  authorization?: string
) {
  const headers: AxiosRequestHeaders = {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Api-Key': apiKey
  }
  
  if (authorization) {
    headers.Authorization = authorization
  }
  
  return axiosFactory.create({
    baseURL: baseUrl,
    headers
  })
}

方法2：使用类型断言（快速修复，需确保类型安全）

如果你想保留原来的分支写法，可以用类型断言明确告诉TypeScript你的headers符合AxiosRequestHeaders类型：

import { AxiosStatic, AxiosRequestHeaders } from 'axios'

export function createAxiosInstance(
  axiosFactory: AxiosStatic,
  baseUrl: string,
  apiKey: string,
  clientId: string,
  clientSecret: string,
  authorization?: string
) {
  const headers = authorization
    ? {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'X-Api-Key': apiKey,
      Authorization: authorization
    }
    : {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'X-Api-Key': apiKey
    } as AxiosRequestHeaders // 添加类型断言
  
  return axiosFactory.create({
    baseURL: baseUrl,
    headers
  })
}

方法3：使用对象展开合并属性

用对象展开的方式合并基础headers和可选的Authorization属性，同样能让TypeScript正确推断类型：

import { AxiosStatic, AxiosRequestHeaders } from 'axios'

export function createAxiosInstance(
  axiosFactory: AxiosStatic,
  baseUrl: string,
  apiKey: string,
  clientId: string,
  clientSecret: string,
  authorization?: string
) {
  const headers: AxiosRequestHeaders = {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Api-Key': apiKey,
    ...(authorization && { Authorization: authorization })
  }
  
  return axiosFactory.create({
    baseURL: baseUrl,
    headers
  })
}

说明 #

推荐使用方法1或方法3，它们更贴合TypeScript的类型推断逻辑，无需额外类型断言，代码也更简洁易读。方法2适合快速修复，但要确保你不会给Authorization赋值undefined，避免潜在的类型安全问题。

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