如何无需使用Vue CLI为CDN版本的Vue添加TypeScript支持

核心思路 #

CDN引入的Vue会自动挂载为全局变量Vue，只需要为TypeScript补充该全局变量的类型声明，无需在TS代码中手动导入Vue，编译后直接调用全局Vue即可和CDN资源完美适配。

具体实现步骤（以Vue3为例，Vue2适配方法见末尾） #

• 第一步：安装基础依赖
  只需要安装TypeScript和Vue的类型声明包，无需任何Vue相关脚手架：

  npm install typescript @vue/runtime-dom -D
  

• 第二步：配置tsconfig.json
  在项目根目录新建tsconfig.json，核心配置如下：

  {
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "allowUmdGlobalAccess": true, // 关键配置：允许识别UMD挂载的全局变量类型
      "types": ["@vue/runtime-dom"], // 引入Vue3的类型声明
      "outDir": "./dist",
      "strict": true // 可选，开启严格类型检查
    },
    "include": ["./src/**/*"]
  }
  

• 第三步：编写TypeScript业务代码
  直接在普通.ts文件中编写Vue逻辑，无需导入Vue，默认有完整类型提示：

  // src/index.ts 不需要手动import Vue
  interface User {
    name: string
    age: number
  }
  
  const app = Vue.createApp({
    data() {
      return {
        user: {
          name: '张三',
          age: 20
        } as User
      }
    },
    methods: {
      greet() {
        console.log(`你好，我是${this.user.name}，今年${this.user.age}岁`)
        // 此处this.user会自动关联User类型的属性提示
      }
    }
  })
  
  app.mount('#app')
  

• 第四步：编译并引入到HTML
  1. 执行npx tsc编译TS代码，得到编译后的JS文件
  2. 在HTML中先引入Vue CDN资源，再引入编译后的JS文件即可运行：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>CDN Vue + TypeScript示例</title>
  </head>
  <body>
    <div id="app">
      <p>{{ user.name }} - {{ user.age }}</p>
      <button @click="greet">打招呼</button>
    </div>
    <!-- 先引入Vue CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <!-- 再引入编译后的JS文件 -->
    <script src="./dist/index.js"></script>
  </body>
  </html>
  

Vue2适配调整 #

• 类型包替换为npm install vue@2 @types/vue@2 -D
• 业务代码沿用Vue2的语法即可：new Vue({ el: '#app', data: () => ({ msg: 'test' }) })，TS会自动识别对应类型。

无npm环境的轻量化方案 #

如果连npm都无法使用，可以手动下载Vue对应版本的类型声明文件到本地，在tsconfig.json中配置typeRoots指向本地声明文件目录即可实现同样的类型提示效果。

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