随着应用规模的增长，越来越多的开发者认识到静态语言的好处。静态类型系统可以帮助防止许多潜在的运行时错误，这就是为什么Vue 3是用TypeScript编写的。这意味着在Vue应用开发中，使用TypeScript进行开发不需要任何其他工具。TypeScript在Vue 3世界中是一等公民。

有两种方式，可以实现在Vue 3应用中支持使用TypeScript。

1. 基于Vue 3 Preview创建的项目

如果是选择Vue 3模板“Vue 3 Preview”进行项目创建，正如前文hello-world应用那样，则可以采用如下的步骤实现对TypeScript的支持。

在应用的根目录下执行如下命令：

vue add typescript

此时，在命令行会出现提示框，根据提示选择即可。这里都是选“Y”即可，看到如下输出内容，则证明已经完成。

2. Manually select features（手动选择）方式

如果是采用Manually select features（手动选择）方式创建应用，则直接可以选择TypeScript作为支持选项。具体步骤如下。

选择“TypeScript”，而后回车。

选择“3.x (Preview)”，而后回车。

3. TypeScript应用的差异

相比于JavaScript的应用而言，TypeScript的应用的目录结构如下。

l 多了TypeScript语言的配置文件tsconfig.json

l package.json和package-lock.json中多了对TypeScript等依赖的描述

l main.js改为了main.ts

l 多了shims-vue.d.ts文件

l 所有在Vue组件中使用JavaScript的地方，都改为了TypeScript

参考引用

本系列归档至《跟老卫学Vue.js开发》：GitHub - waylau/vuejs-enterprise-application-development: Vue.js Enterprise Application Development. 《跟老卫学Vue.js开发》/《Vue.js 3企业级应用开发实战》源码
参考书籍《Vue.js 3企业级应用开发实战》：《Vue.js 3企业级应用开发实战（双色版）(博文视点出品)》(柳伟卫)【摘要书评试读】- 京东图书

Vue 3系列之03——Vue 3使用TypeScript相关推荐

ionic+vue+capacitor系列笔记--03项目使用Native插件
1. 下载依赖 npm install @capacitor/camera 添加权限配置代码到安卓文件夹里的 AndroidManifest.xml <uses-permission andro ...
Vue 进阶系列丨自定义指令实现按钮权限功能
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
Vue.js 系列教程 3：Vue-cli，生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
我的新宠Vue a系列项目初构
开始学习vue,每天晚上学习,学习周期2周左右,过程中会搜集整理互联网资源,并且结合自己实践,出新,形成一套自己风格的学习资料,这就是我的新宠Vue.会将曾经阅读过的相关文献在[食粮]中说明,本[食粮 ...
Vue 进阶系列（一）之响应式原理及实现
Vue进阶系列汇总如下,欢迎阅读. Vue 进阶系列(一)之响应式原理及实现 Vue 进阶系列(二)之插件原理及实现 Vue 进阶系列(三)之Render函数原理及实现什么是响应式Reactivit ...
vue取div当前宽度_【前端大神面考面试官系列】入门Vue全家桶
(给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...
Vue.js 系列教程 4：Vuex
原文:intro-to-vue-4-vuex 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理.这个系列教程 ...
Vue 进阶系列丨权限控制 addRoute()
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
【前端vue——系列6】vue连接摄像头并实现摄像头暂停，计时，截图到本地等功能
系列文章总结 [前端vue--系列1]vue的路由 [前端vue--系列2]vue中的data是函数而不是对象与computed的实现原理 [前端vue--系列3]vue框架的优缺点:vue实现双向绑 ...

Vue 3系列之03——Vue 3使用TypeScript

1. 基于Vue 3 Preview创建的项目

2. Manually select features（手动选择）方式

3. TypeScript应用的差异

参考引用

Vue 3系列之03——Vue 3使用TypeScript相关推荐

最新文章

热门文章