TypeScript如何在IDE中根据函数参数数量实现动态类型提示

完全可以仅通过原生TypeScript在VSCode中实现你描述的分场景参数提示效果，核心实现方式是TypeScript函数重载特性，你在Google Apps Script IDE中见到的同类交互，底层也是基于类型系统的重载签名匹配逻辑实现的。

具体实现代码 #

你只需要为函数声明多组对应合法参数组合的重载签名，再编写兼容所有重载的实现逻辑即可，改造后的代码如下：

// 重载签名：对外暴露的合法调用规则，IDE会根据入参状态自动匹配对应签名提示
// 单参数场景：仅传入string类型的a，返回大写字符串
function test(a: string): string;
// 双参数场景：传入两个number类型参数，返回乘积
function test(a: number, b: number): number;

// 实现签名：仅用于内部逻辑编写，不会对外展示在提示中
function test(a: string | number, b?: number) {
  if(typeof b !== 'undefined' && typeof a === "number"){
    return a * b
  }
  if (typeof a === "string" && typeof b === "undefined"){
    return a.toUpperCase() 
  }
  throw new Error("Incorrect Params");
}

实际效果 #

• 当你仅传入1个参数时，IDE会自动匹配单参数重载签名，提示参数a的类型为string，返回值为string；如果传入number类型的单参数，TS会直接标红报错，提前拦截非法调用。
• 当你输入第一个参数后敲入逗号准备传入第二个参数时，IDE会自动切换匹配双参数重载签名，提示第一个参数a类型为number、第二个参数b类型为number，返回值为number；如果此时第一个参数传入string、或者第二个参数类型不匹配，TS会直接抛出类型错误。

底层实现机制 #

该效果依赖TypeScript语言服务的重载解析规则：

• 编译器会按从上到下的顺序遍历所有声明的重载签名
• 结合你当前输入的参数个数、参数类型，匹配到符合当前输入状态的重载签名，将该签名的类型提示展示在IDE中
• 最终编译检查时，会要求函数调用必须完全符合某一个重载签名的定义，所有不符合规则的参数组合（比如传1个number类型参数、传string+number两个参数等）都会被提前拦截。

注意事项 #

• 重载签名的声明顺序会影响匹配结果，建议将参数个数更少、约束更精准的签名放在前面，避免被宽泛的签名提前匹配
• 最后一个实现签名的类型必须兼容所有重载签名的参数类型，否则会触发TS类型报错，该签名不会对外暴露给调用方
• 该能力不需要安装额外VSCode插件，原生TypeScript语言服务即可支持，和Google Apps Script IDE中的交互效果完全一致。

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