TypeScript 支持 | vue js typescript
像TypeScript这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误,也让我们在重构大型项目的时候更有信心。通过IDE中基于类型的自动补全,TypeScript还改善了开发体验和效率。Vue本身就是用TypeScript编写的,并对TypeScript提供了一等公民的支持。所有的Vue官方库都自带了类型声明文件,开箱即用。项目配置[1]create-vue[2],即官方的项目脚手架工具,提供了搭建基于Vite[3]且TypeScript就绪的Vue项目的选项。总览[4]在基于Vite的配置中,开发服务器和打包器将只会对TypeScript文件执行语...
像 TypeScript 这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误,也让我们在重构大型项目的时候更有信心。通过 IDE 中基于类型的自动补全,TypeScript 还改善了开发体验和效率。
Vue 本身就是用 TypeScript 编写的,并对 TypeScript 提供了一等公民的支持。所有的 Vue 官方库都自带了类型声明文件,开箱即用。
项目配置 [1]create-vue[2],即官方的项目脚手架工具,提供了搭建基于 Vite[3] 且 TypeScript 就绪的 Vue 项目的选项。
总览 [4]在基于 Vite 的配置中,开发服务器和打包器将只会对 TypeScript 文件执行语法转译,而不会执行任何类型检查,这保证了 Vite 开发服务器在使用 TypeScript 时也能始终保持飞快的速度。
在开发阶段,我们推荐你依赖一个好的 IDE 配置[5]来获取即时的类型错误反馈。
对于单文件组件,你可以使用工具 vue-tsc[6] 在命令行检查类型和生成类型声明文件。vue-tsc 是对 TypeScript 自身命令行界面 tsc 的一个封装。它的工作方式基本和 tsc 一致。除了 TypeScript 文件,它还支持 Vue 的单文件组件。你可以在开启 Vite 开发服务器的同时以侦听模式运行 vue-tsc,或是使用 vite-plugin-checker[7] 这样在另一个 worker 线程里做静态检查的插件。
Vue CLI 也提供了对 TypeScript 的支持,但是已经不推荐了。详见下方的说明[8]。
IDE 支持 [9]强烈推荐 Visual Studio Code[10] (VS Code),因为它对 TypeScript 有着很好的内置支持。
WebStorm[11] 对 TypeScript 和 Vue 也都提供了开箱即用的支持。其他的 JetBrains IDE 也同样可以通过一个免费插件[12]支持。从 2023.2 版开始,WebStorm 和 Vue 插件内置了对 Vue 语言服务器的支持。你可以在设置 > 语言和框架 > TypeScript >...