VSCode如何为TypeScript函数创建适配数组类型的自定义代码片段

1. 实现数组名输入.后自动展示片段 #

首先打开TypeScript用户代码片段配置：

• 按下快捷键 Ctrl+Shift+P（Mac 为 Cmd+Shift+P）唤起命令面板
• 输入「配置用户代码片段」，选择 typescript.json（如需支持TSX则选择 typescriptreact.json）
• 加入以下片段配置，触发前缀设置为 .forEach 即可在输入数组名加.后出现在提示列表中：

{
  "带类型推导的数组forEach": {
    "prefix": [".forEach", "forEach"],
    "body": [
      ".forEach((${1:val}: ${2:typeof ${TM_CURRENT_LINE/^\\s*(\\w+)\\./$1/}[number]}) => {",
      "  $0",
      "})"
    ],
    "description": "自动获取数组元素类型的forEach片段",
    "scope": "typescript,typescriptreact"
  }
}

如果希望片段排在提示列表顶部，可在VSCode settings.json 中添加配置：

"editor.snippetSuggestions": "top"

2. 动态获取数组元素类型 #

上面的片段配置已经通过内置变量+正则实现了类型自动获取：

• 用 TM_CURRENT_LINE 变量获取当前输入行的完整内容
• 正则 ^\\s*(\\w+)\\. 提取.前面的数组变量名
• 配合TypeScript原生语法 typeof 数组名[number] 直接得到数组的元素类型，不需要额外插件支持

如果你的项目开启了严格类型检查，也可以直接省略显式类型标注，TypeScript会自动推导val的类型，简化后的片段如下：

{
  "简化版数组forEach": {
    "prefix": [".forEach"],
    "body": [
      ".forEach((${1:val}) => {",
      "  $0",
      "})"
    ],
    "description": "自动推导元素类型的forEach片段",
    "scope": "typescript,typescriptreact"
  }
}

这个方案不需要手动处理类型，完全依托TypeScript内置的类型推导能力，最终效果和预期完全一致。

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