最近在遷移一個(gè) Vue 2 項(xiàng)目，弄得差不多想起還是有必要整上 TypeScript，但改的過(guò)程中并不想一下子把所有文件從.js改成.ts，那么我們可以在tsconfig.json文件的"compilerOptions"配置上 "allowJs": true，"noEmit": true。

前提是已經(jīng)安裝了 typescript，沒(méi)有的話可以全局npm install -g typescript，或者安裝在項(xiàng)目本地。

具體上完整干貨：

1. cd 到項(xiàng)目根目錄，命令行敲上tsc –init，生成tsconfig.json文件，然后修改如下(部分選項(xiàng)根據(jù)自己需要來(lái))：

??tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true, // https://cn.vitejs.dev/guide/features.html#typescript-compiler-options
    "module": "esnext",
    "moduleResolution": "node", // 指定模塊解析策略，'node' 用于 Node.js 的 CommonJS 實(shí)現(xiàn)
    "strict": true,
    "allowJs": true, // 允許編譯器編譯JS，JSX文件
    "checkJs": true,
    "noEmit": true, // 編譯后不輸出任何js文件
    "jsx": "preserve", // 在 .tsx 中支持 JSX
    "sourceMap": true, // 生成目標(biāo)文件的 sourceMap 文件
    "resolveJsonModule": true, // 允許導(dǎo)入帶有“.json”擴(kuò)展名的模塊
    "esModuleInterop": true, // CommonJS/AMD/UMD 模塊導(dǎo)入兼容
    "importHelpers": true, // 模塊導(dǎo)入輔助，通過(guò) tslib 引入 helper 函數(shù)，https://www.typescriptlang.org/tsconfig#importHelpers
    "experimentalDecorators": true,
    "skipLibCheck": true, // 跳過(guò)庫(kù)聲明文件的類型檢查
    "allowSyntheticDefaultImports": true, // 允許如 import React from "react" 這樣的默認(rèn)導(dǎo)入（從沒(méi)有設(shè)置默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入）
    "suppressImplicitAnyIndexErrors": true, // 禁止報(bào)告對(duì)象索引的隱式 anys 錯(cuò)誤
    "baseUrl": "./", // 非絕對(duì)地址的模塊會(huì)基于這個(gè)目錄去解析，默認(rèn)值是當(dāng)前目錄
    "types": ["node", "vite/client"], // 指定加載【哪些】聲明文件包，如不設(shè)置此項(xiàng)，默認(rèn)會(huì)加載全部能找到的 node_modules/@types/xxx 包
    // "vite/client"用于 vite 項(xiàng)目中的一些類型定義補(bǔ)充，https://www.typescriptlang.org/tsconfig#types
    "isolatedModules": true, // https://cn.vitejs.dev/guide/features.html#typescript-compiler-options
    "paths": {
      // 配置具體如何解析 require/import 的導(dǎo)入，值是基于 baseUrl 路徑的映射列表。https://www.typescriptlang.org/tsconfig#paths
      "@/*": ["src/*"],
      // ...
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"] // 編譯時(shí)引入的 ES 功能庫(kù)
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"] // 解析時(shí)跳過(guò)的文件
}

2. 在 src 目錄下添加一個(gè) d.ts 聲明文件：

如 ??src/shims-vue.d.ts

/// <reference types="vite/client" />

// 定義 *.vue 文件的類型，否則 import 所有 *.vue 文件都會(huì)報(bào)錯(cuò)
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

// ...

這會(huì)和compilerOptions.types的"vite/client"項(xiàng)一起，提供以下類型定義補(bǔ)充：

• 資源導(dǎo)入 (例如：導(dǎo)入一個(gè) .svg 文件)
• import.meta.env 上 Vite 注入的環(huán)境變量的類型定義
• import.meta.hot 上的 HMR API 類型定義

另外導(dǎo)入一些庫(kù)的時(shí)候可能會(huì)報(bào)Cannot find module 'xxx'..這種找不到模塊的錯(cuò)，原因是沒(méi)有找到對(duì)應(yīng)的聲明文件。

• 有些庫(kù)如lodash可以通過(guò)安裝類型定義包來(lái)解決：npm install -S @types/lodash；
• 若部分插件尚且沒(méi)有自己的 typescript 定義文件，就在我們之前的src/shims-vue.d.ts里聲明一下，如：

// src/shims-vue.d.ts

// remove this part after vue-count-to has its typescript file
declare module 'vue-count-to'

declare module 'vue-echarts'

然后就可以逐步將一些*.js改成*.ts并進(jìn)行類型定義補(bǔ)充和修改了，可以先從main.js做起。

關(guān)于遷移的其他報(bào)錯(cuò)和問(wèn)題，可以參考官網(wǎng)的 JavaScript 遷移文檔。