uni-app 完全支持 TypeScript (TS)。它提供了从基础到高级的完整支持方案。
🚀 uni-app x 与蒸汽模式
除了传统的 uni-app,还有其下一代版本uni-app x。它提供更强的性能,并在2026 年推出了“蒸汽模式”,该模式全平台兼容 TS/JS 写法,不再强制使用强类型的 UTS 语言。
在蒸汽模式下,你可以像在普通 uni-app 中一样使用 TS 进行开发,无需担心类型约束。
💡 在不同项目中使用 TypeScript
1. Vue 2 项目
文件支持:可以在
vue文件的<script>标签中编写 TS。TypeScript 版本:通过 HBuilderX 创建的项目默认使用 TS 3.7.5;通过 Vue CLI 创建的项目则使用 TS 4.x。
nvue文件支持:从 HBuilderX 3.99 版本开始,nvue文件也支持编写 TS。
2. Vue 3 项目
文件支持:
vue和nvue文件均完美支持最新版的 TypeScript。
🛠️ 如何在项目中启用 TypeScript
添加
lang="ts"属性:在vue或nvue页面的<script>标签中,添加lang="ts"属性。html
<script lang="ts"> // 在这里编写 TypeScript 代码 let message: string = "Hello, uni-app!"; console.log(message); </script>
安装类型定义:项目需要安装
@dcloudio/types模块来提供 uni-app 的 API 类型定义。配置
tsconfig.json:建议在项目根目录创建tsconfig.json文件并进行配置。一个推荐的配置模板如下:json
{ "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "moduleResolution": "node", "esModuleInterop": true, "sourceMap": true, "skipLibCheck": true, "importHelpers": true, "allowSyntheticDefaultImports": true, "useDefineForClassFields": true, "resolveJsonModule": true, "lib": ["esnext", "dom"], "types": ["@dcloudio/types"] }, "exclude": ["node_modules", "unpackage", "src/**/*.nvue"] }
💎 总结
uni-app 对 TypeScript 的支持是成熟的。无论你使用 Vue 2 还是 Vue 3,通过简单的配置都能获得完整的 TS 开发体验。对于追求极致性能的新项目,可以关注 uni-app x 的蒸汽模式,它同样完美支持 TS。