Vite 学习 - TS 在 Vite 中的使用

Vite 对 TypeScript 的支持

官方文档：

TypeScript

Vite 支持在 Vue SFCs 中导入 .ts 文件 和 <script lang="ts">。

Vite 仅对 .ts 文件执行转译，不执行类型检查。 它假定类型检查由您的 IDE 和构建过程完成（您可以在构建脚本中运行 tsc --noEmit）。

Vite使用 esbuild 将 TypeScript 转换为 JavaScript，这比普通 tsc 快20到30倍，并且 HMR 更新可以在50毫秒内反映在浏览器中。

请注意，由于 esbuild 仅执行不带类型信息的转译，因此它不支持某些功能，例如 const enum 和隐式仅类型的导入。 您必须在 tsconfig.json 的 editorOptions 下设置 " isolatedModules"：true，以便 TS 会针对隔离式编译不起作用的功能向您发出警告。

简单总结就是：

• Vite 支持在 Vue 单文件组件中使用 TypeScript，开箱即用。
• Vite 现在仅对 .ts 文件进行转译，类型检查由 IDE 和 构建过程负责。
• Vite 使用 esbuild 编译工具进行转移，而不是 TypeScript 官方的 tsc。
• esbuild 不支持一些功能，还需要配置 tsconfig.js。

创建项目

Getting Started

Note to Vue users: Vite currently only works with Vue 3.x. This also means you can’t use libraries that are not yet compatible with Vue 3.

Vue用户注意：Vite目前只适用于Vue 3.x。这也意味着您不能使用与Vue 3不兼容的库。

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

修改 main.js

将 main.js 改为 main.ts，并将 index.html 中引入的 main.js 改为 main.ts。

现在就可以 main.ts 中使用 TypeScript

// /src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

let num: number = 100
num.push(200) // 校验警告

createApp(App).mount('#app')

修改 App.vue

将 App.vue 的 <script> 修改为 <script lang="lang">，就可以编写 TypeScript 语法。

<script lang="ts">
import HelloWorld from './components/HelloWorld.vue'

let num: number = 100
num.push(200) // 校验警告

export default {
  props: [],
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

打包前进行类型推断

Vite 现在只支持对 TS 转译，不能对其进行类型推断，所以如果由类型使用错误的代码，只能在打包后运行的时候才会报错。

可以自己在项目中安装 TypeScript，在打包前执行 tsc --noEmit 进行类型推断校验。（--noEmit 不生成输出文件）

Vue 3 TypeScript 支持

安装 TypeScript

# 仅仅为了使用 tsc 命令，所以作为开发依赖安装
npm install -D typescript

编写配置文件

// tsconfig.json
{
  "compilerOptions": {
    // TypeScript 默认会把代码编译为 ECMAScript 3
    // esnext 表示仅仅校验转换 TypeScript 类型，不进行语法编译
    "target": "esnext",
    "module": "esnext",
    // 开启严格模式，这使得对“this”的数据属性进行更严格的推断成为可能
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node"
  },

  // 配置需要校验的文件
  "include": [
    "src/**/*.ts",
    "src/**/*.vue"
  ],

  // 排除不需要 TypeScript 校验的文件
  "exclude": [
    "node_modules"
  ]
}

添加类型声明文件

现在打包项目会报错，找不到App.vue模块相应的类型声明。

在 /src 目录下创建一个 .ts 文件，添加 .vue 文件的类型声明

// /src/shims-vue.d.ts
declare module '*.vue' {
  // Vue 3
  import { defineComponent } from 'vue'
  const Component: ReturnType<typeof defineComponent>
  export default Component
}

此时打包就不会报错。

编写问题代码测试

在 main.ts 文件中编写问题代码：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

let num: number = 100
num.push(200)

createApp(App).mount('#app')

执行打包命令 npm run build 并没有报错。

添加 tsc 校验

修改 build 构建命令：

{
  "scripts": {
    "dev": "vite",
    "build": "tsc --noEmit && vite build"
  },
}

再次打包，错误代码被校验出来，打包失败。

不足

Vite 目前仅支持对 .ts 文件的类型校验，.vue文件还不支持。