TypeScript根据传入key返回对应类型时报错的解决方案

两个报错本质都是TypeScript泛型收窄规则导致的：

• 当你使用<T extends IRoutes>泛型参数时，函数内部的if分支无法收窄泛型T本身的类型，TS会认为每个return的返回值必须满足所有可能的T对应的返回类型联合，createSettingsPage()返回值多了c属性，不匹配createTracksPage()的结构，因此抛出类型不兼容错误。
• 同样因为泛型没有被收窄，TS认为存在T既不是tracks也不是settings的可能性，因此不会将末尾抛错的分支判定为不可达的never代码。

使用TS的函数重载特性，对外暴露精确的入参-返回值类型对应关系，内部实现签名使用宽松的联合类型即可：

const routes = {
  tracks: "tracks",
  settings: "settings",
} as const

type IRoutes = keyof typeof routes

// 重载签名：定义不同入参对应的精确返回类型
async function resetTo(location: "tracks"): Promise<ReturnType<typeof createTracksPage>>
async function resetTo(location: "settings"): Promise<ReturnType<typeof createSettingsPage>>
// 实现签名：内部逻辑使用宽松类型校验
async function resetTo(location: IRoutes): Promise<ReturnType<typeof createTracksPage> | ReturnType<typeof createSettingsPage>> {
  // 执行页面跳转、重载等副作用逻辑

  if (location === "settings") return createSettingsPage()
  if (location === "tracks") return createTracksPage()

  throw new Error("location is not implemented")
}

// 页面对象构造函数
function createTracksPage() {
  return { 
    a: "a", b: "b" 
  }
}

function createSettingsPage() {
  return { 
    a: "a", b: "b" , c: "c"
  }
}

这个写法下：

• 调用resetTo时TS会根据传入的路由值自动推导精确的返回类型，传"tracks"时返回值只有a/b属性，传"settings"时会自动识别c属性存在。
• 函数内部不会再报类型不兼容错误，末尾抛错分支也会被识别为正常兜底逻辑。

如果后续需要新增更多页面，不想每次新增都修改重载签名，可以维护路由和页面对象构造器的映射表，配合satisfies做类型约束，完全自动推导类型：

const routes = {
  tracks: "tracks",
  settings: "settings",
} as const

type IRoutes = keyof typeof routes

// 页面对象构造器映射，新增页面只需要在这里加对应配置
const pageCreators = {
  tracks: createTracksPage,
  settings: createSettingsPage,
} satisfies Record<IRoutes, () => any>

// 自动推导所有路由对应的页面对象类型
type PageMap = {
  [K in IRoutes]: ReturnType<typeof pageCreators[K]>
}

async function resetTo<T extends IRoutes>(location: T): Promise<PageMap[T]> {
  // 执行页面跳转、重载等副作用逻辑
  const pageCreator = pageCreators[location]
  return pageCreator()
}

// 页面对象构造函数
function createTracksPage() {
  return { 
    a: "a", b: "b" 
  }
}

function createSettingsPage() {
  return { 
    a: "a", b: "b" , c: "c"
  }
}

这个写法的优势：

• 新增路由时只需要在routes和pageCreators中添加对应配置，不需要修改resetTo的类型定义和分支逻辑，维护成本更低。
• 类型推导完全自动，不存在手动写类型声明导致的不一致问题，调用时返回值类型和重载写法一样精确。
• 去掉了重复的条件判断分支，从映射表直接取对应构造器执行，避免漏写分支的问题。

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