TypeScript命名类型IDE提示不足，如何兼顾类型复用与友好提示？

要同时兼顾类型单一维护和IDE友好提示，你可以试试这几种方法：

1. 用工具类型展开命名类型 #

定义一个Expand工具类型，它能把命名的对象类型展开成字面量形式，既保留单一的类型维护源，又能让IDE显示完整的结构细节。

先定义工具类型：

type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;

接着在函数中使用：

export type ComplexNumber = {
  r: number,
  i: number
}

export default function addComplexNumbers (
  a: Expand<ComplexNumber>,
  b: Expand<ComplexNumber>
): Expand<ComplexNumber> {
  return { r: a.r + b.r, i: a.i + b.i }
}

这时VS Code在你输入函数时，会直接显示展开后的完整类型结构，效果和写字面量完全一致，但类型定义只需要维护一处。

2. 结合JSDoc补充提示信息 #

给函数参数加上JSDoc注释，明确说明参数的结构细节，哪怕用了命名类型，IDE也会在提示里展示这些说明，帮用户快速理解怎么构造参数。

示例：

export type ComplexNumber = {
  r: number,
  i: number
}

/**
 * 计算两个复数的和
 * @param a 第一个复数，结构为 { r: 实部数值, i: 虚部数值 }
 * @param b 第二个复数，结构为 { r: 实部数值, i: 虚部数值 }
 * @returns 两个复数的和，结构为 { r: 实部数值, i: 虚部数值 }
 */
export default function addComplexNumbers (
  a: ComplexNumber,
  b: ComplexNumber
): ComplexNumber {
  return { r: a.r + b.r, i: a.i + b.i }
}

用户输入函数时，不仅能看到ComplexNumber类型名，还能直接看到JSDoc里的结构说明，不用再猜参数格式。

3. 提供构造/工厂函数 #

直接给用户提供创建ComplexNumber的工具函数，用户不用手动构造对象，IDE的提示会引导他们调用正确的方法，同时类型定义依然只需要维护一处。

示例：

export type ComplexNumber = {
  r: number,
  i: number
}

// 工厂函数，用于创建复数对象
export function createComplexNumber(r: number, i: number): ComplexNumber {
  return { r, i };
}

export default function addComplexNumbers (
  a: ComplexNumber,
  b: ComplexNumber
): ComplexNumber {
  return { r: a.r + b.r, i: a.i + b.i }
}

用户使用时直接调用createComplexNumber(1, 2)即可，既不用记对象结构，IDE也会给工厂函数清晰的参数提示。

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