Vue项目中如何正确使用TypeScript三斜线指令定义类型？

项目结构 #

• node_modules
  • ...
  • vue
    • dist
      • vue.d.ts
• src
  • utils
    • index.ts

原代码（src/utils/index.ts） #

/// <reference path = "../../node_modules/vue/dist/vue.d.ts" />

export function fn(p: ComponentOptions) {
  // other code...
}

VSCode提示名称ComponentOptions未找到，希望这段代码实现与以下代码相同的效果：

import type { ComponentOptions } from "vue";

export function fn(p: ComponentOptions) {
  // other code...
}

疑问：三斜线指令的使用方式是否有误？如何让这段代码正常工作？

解决方案 #

1. 修正三斜线指令的使用方式
   Vue的ComponentOptions类型定义是放在vue命名空间下的，并非全局暴露。直接通过三斜线指令引入.d.ts文件后，需要通过命名空间来访问该类型：

/// <reference path="../../node_modules/vue/dist/vue.d.ts" />

export function fn(p: vue.ComponentOptions) {
  // other code...
}

2. 更规范的替代方案（推荐）
   在现代TypeScript项目中，更建议通过配置tsconfig.json让编译器自动识别依赖的类型定义，而非手动编写三斜线指令：
   在项目根目录的tsconfig.json中添加或确保以下配置：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "types": ["vue"]
  }
}

配置完成后，你既可以通过命名空间访问类型，也依然推荐使用import type { ComponentOptions } from "vue";的模块化导入方式——这是TS项目的标准写法，代码可读性和可维护性更强。

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