最近在遷移一個(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)目本地饵史。
具體上完整干貨：
- 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ò)的文件
}
- 在 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 遷移文檔挑豌。
