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.jsoneditorOptions 下设置 " 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文件还不支持。

Logo

前往低代码交流专区

更多推荐