vite3 + js 迁移ts过程

# 具体实操

cd 到项目根目录，命令行敲上tsc –init，生成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 实现
    "strict": true,
    "allowJs": true, // 允许编译器编译JS，JSX文件
    "checkJs": true,
    "noEmit": true, // 编译后不输出任何js文件
    "jsx": "preserve", // 在 .tsx 中支持 JSX
    "sourceMap": true, // 生成目标文件的 sourceMap 文件
    "resolveJsonModule": true, // 允许导入带有“.json”扩展名的模块
    "esModuleInterop": true, // CommonJS/AMD/UMD 模块导入兼容
    "importHelpers": true, // 模块导入辅助，通过 tslib 引入 helper 函数，https://www.typescriptlang.org/tsconfig#importHelpers
    "experimentalDecorators": true,
    "skipLibCheck": true, // 跳过库声明文件的类型检查
    "allowSyntheticDefaultImports": true, // 允许如 import React from "react" 这样的默认导入（从没有设置默认导出的模块中默认导入）
    "suppressImplicitAnyIndexErrors": true, // 禁止报告对象索引的隐式 anys 错误
    "baseUrl": "./", // 非绝对地址的模块会基于这个目录去解析，默认值是当前目录
    "types": ["node", "vite/client"], // 指定加载【哪些】声明文件包，如不设置此项，默认会加载全部能找到的 node_modules/@types/xxx 包
    // "vite/client"用于 vite 项目中的一些类型定义补充，https://www.typescriptlang.org/tsconfig#types
    "isolatedModules": true, // https://cn.vitejs.dev/guide/features.html#typescript-compiler-options
    "paths": {
      // 配置具体如何解析 require/import 的导入，值是基于 baseUrl 路径的映射列表。https://www.typescriptlang.org/tsconfig#paths
      "@/*": ["src/*"],
      // ...
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"] // 编译时引入的 ES 功能库
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"] // 解析时跳过的文件
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在 src 目录下添加一个 d.ts 声明文件：src/shims-vue.d.ts

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

// 定义 *.vue 文件的类型，否则 import 所有 *.vue 文件都会报错
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
}

// ...

1
2
3
4
5
6
7
8
9
10
11

这会和compilerOptions.types的"vite/client"项一起，提供以下类型定义补充：

资源导入 (例如：导入一个 .svg 文件) import.meta.env 上 Vite 注入的环境变量的类型定义 import.meta.hot 上的 HMR API 类型定义

另外导入一些库的时候可能会报Cannot find module 'xxx'..这种找不到模块的错，原因是没有找到对应的声明文件。

有些库如lodash可以通过安装类型定义包来解决：npm install -S @types/lodash；若部分插件尚且没有自己的 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'

1
2
3
4
5
6

最后就是会报错

 // "suppressImplicitAnyIndexErrors": true, //选项已弃用
      "noImplicitAny": false,  // 开启这个选项即可

1
2

上次更新: 2023/08/29, 8:08:00

← v-model介绍 vue3自定义指令的使用 →