JavaScript：学习Vue3为什么要学习TypeScript？

已于 2022-07-10 18:49:15 修改
阅读量8.9k 收藏 6
点赞数 6
分类专栏： JavaScript Vue TypeScript 文章标签： javascript vue.js typescript 前端
于 2020-12-22 10:57:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Big_YiFeng/article/details/111509918
版权
JavaScript 同时被 3 个专栏收录
15 篇文章 0 订阅
订阅专栏
Vue
14 篇文章 0 订阅
订阅专栏
TypeScript
1 篇文章 0 订阅
订阅专栏

TypeScript是什么

如果有阅读过一些TypeScript相关内容的的朋友应该很熟悉一句话：TypeScript 是 JavaScript 的一个超集
在这里插入图片描述

第一次看到这句话我心里就在想“这个超集又是什么？？？”通过一段时间的了解，其实换成通俗的话来讲就是：“js能做的事ts能做，js不能做的ts还是能做”

学习TS的原因

1.趋势

从Vue3.0开始，前端三大主流框架已经全部支持ts，跟着大部队走肯定没问题。

2.易维护

由于js是一种弱类型的语言，在用来做大型的项目的时候，是会难受的，因为经常会出一些意料之外的错误。比如你把一个数组的值赋给了对象，把对象的值赋给了数组等等一些很无语的问题，但ts不会，你可以清晰的知道每个变量的值应该是何种类型，每个函数的返回值又是什么东西

3.友好的提示

在这里插入图片描述
在这里插入图片描述
由于ts是有静态检测的，所以在开发的时候就能修改掉很多错误，避免运行项目时报错带来的性能损耗

4.Vue3.0就是用TypeScript写的！！！

Vue3.0在2021年可能就会由企业大规模使用了，学习了ts之后可以帮助你更好的学习vue3.0 让你不被时代所抛弃
最后总结一句话：
技多不压身，身为程序员，学就完事了

易风有点疯
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
我一定要用vue3+ts吗？
chenbing922886的博客
01-15 4830
我们为什么要用Vue3+ts？
vue3-vite-ts:学习vue3的新属性的同时，尝试ts的写法
03-08
在本项目"vue3-vite-ts"中，我们将深入探讨Vue3的新特性，并结合...通过这个项目，你可以学习到如何将Vue3的新特性与TypeScript的强类型优势相结合，同时利用Vite提升开发效率。实践是最好的老师，动手尝试吧！
开发Vue3.x一定要用TS吗?
zihan0321的博客
11-18 3296
然而，使用 TypeScript 可以提供更好的类型检查和代码提示，以及更好的代码可读性和可维护性。除此之外，Vue 3 的官方文档和许多社区资源都提供了 TypeScript 的示例和文档，因此使用 TypeScript 可以更轻松地在 Vue 3 生态系统中找到帮助和支持。综上所述，使用 TypeScript 开发 Vue 3 应用程序可以提供更好的开发体验和更好的代码质量，但如果你更喜欢使用原生 JavaScript，也是完全可以的。
Vue基础：为什么要学Vue3,Vue3相较于Vue2有那些优势？
最新发布
我就知道你会来，我们一起进步吧！
04-27 546
解释说明：1.Vue2采用的是选项式API，当你不使用的时候可以不用写，比如computed你不需要你就可以不用写，这种选项式API有一个明显的缺点：当你要写一个功能是你可以需要在data()中拿数据，methods中写方法，最后在created中调用方法。解释说明：1.vue2采用的是Object.definePrototype，它每次只能对单个对象中的单个数据进行劫持，所以在Vue2中data()中的数据一多就要进行多次的劫持，所以效率比较低。脚手架：Vue-cli------>create-vue。
vue3用必须用ts开发吗,vue的ts和js相互结合
热门推荐
神器榜
09-09 1万+
CompositionAPI可以更好的逻辑复用和代码组织，同一功能的代码不至于像以前一样太分散，虽然Vue2中可以用minxin来实现复用代码，但也存在问题，比如方法或属性名会冲突，代码来源也不清楚等_?这个和我们CSS离的Less或者Sass是很像的，我们用更好的代码编写方式来进行编写，最后还是友好生成原生的JavaScript语言。3、新增了一个views文件夹。这个和我们CSS离的Less或者Sass是很像的，用更好的代码编写方式来进行编写，最后还是友好生成原生的JavaScript语言。
[总结]学习vue3都需要会哪些typescript的知识点?中秋回家的路上学会ts.
n6308的博客
09-18 850
总结知识点 vue3需要用ts可能是小伙伴没开始玩转vue3的最大障碍, 经过1年vue3+ts开发实战, 我总结了必须要会的ts知识点(内容只有官网内容的1/4), 方便大家学习vue3的时候查阅, 保证大家学会了本文轻松玩转vue3开发. ????祝大家中秋快乐 vue3基础 如果你还没有开始接触vue3, 也可以看我整理的vue3基础教程(带视频). 基础数据类型 课程中的代码大家可以...
vue3快速入门：学习Vue3为什么要学习TypeScript？使用 TypeScript 的 10 个理由
南北极之间
07-07 3091
要回答这个问题，其实官方文档已经给了我们答案。将 Vue 与 TypeScript |维.js (vuejs.org)https://vuejs.org/guide/typescript/overview.html像TypeScript这样的类型系统可以在构建时通过静态分析来检测许多常见错误。这降低了生产中运行时错误的可能性，并且还使我们能够更自信地重构大型应用程序中的代码。TypeScript 还通过在 IDE 中基于类型的自动完成功能改进了开发人员的人体工程学。Vue 是用 TypeScript 本身编
Vue3组件通信（是否使用TS写法）
xiaojian044的博客
12-06 425
父子组件通信 TS写法 子组件给父组件暴露属性或者是方法
Vue3+Typescript日历组件
07-29
首先，我们从标题"Vue3+Typescript日历组件"出发，理解其核心是创建一个基于Vue3的组件，且使用了TypeScript作为编程语言。TypeScript是JavaScript的超集，它提供了静态类型系统，有助于在编码阶段发现潜在的错误，...
laravel-mix-vue3:适用于Vue 3，Typescript和JSX的Laravel Mix扩展
05-28
Laravel Mix v5-Vue 3 适用于Vue 3，Typescript和JSX的Laravel Mix扩展。 不推荐使用用法首先，安装扩展程序。 npm install laravel-mix-vue3 --save-dev//oryarn add laravel-mix-vue3 -D 如果Laravel Mix无法安装...
Vue3、Element Plus、typescript后台管理系统
02-25
1. **基于Vue3**：Element Plus是为Vue3设计的，因此它充分利用了Vue3的新特性，如Composition API，提供了更好的性能和组件设计。 2. **组件丰富**：Element Plus包含了大量的UI组件，如按钮、表格、表单、对话框...
首个 Vue3.x教程_Vue3.x+Ts+Vuex+Antd Ui框架入门进阶视频教程(34讲)-大地老师
01-30
此套Vue3.x+Ts+Vuex+Antd教程录制于2020年11月，所有内容均为大地讲解，每一讲都是专业技术老师试听后发布的，质量有保证。教程由浅入深，逐步深入，让你快速了解并掌握Vue3.x+ts+Vuex+Antd的使用。 此教程包括：Vue3.x环境搭建、Vue/cli脚手架使用、Vite脚手架使用、Vue目录结构 核心文件分析、Vue模板语法、Vue事件、Vue表单、Vue双休数据绑定、Vue Dom操作以、JavaScript表达式 、条件判断、 计算属性、watch侦听器、Vue3集成Sass、Vue3.x todolist 待办事项、Vue3中的单文件组件、Vue3.x
Vue3-ts-element-admin:基于Vue3，elementplus UI，typescript
04-16
Vue3-ts-element-admin 是一个现代Web应用程序开发框架，它整合了Vue.js的最新版本Vue3、Element Plus UI库以及TypeScript。这个项目旨在提供一个高效、可复用且易于维护的后台管理系统的模板，适用于那些希望利用...
vue - - - - vite创建vue3项目（不使用TS）
Dark_programmer的博客
11-15 2506
vite创建vue项目
Vue3 + Vite + TS 从入门到入土
Bao59的博客
01-25 448
从零开始学习Vue3 + Vite + TS
vue3：TS和JS的区别
m0_58714675的博客
02-26 1345
总体来说，TypeScript 是 JavaScript 的超集，可以用来编写更加严谨和结构化的代码。、新的语法特性和更好的开发工具支持，但也增加了一些开发成本。将代码转换为JavaScript，需要编译。解释性语言，因此只有在运行时才会发现错误。可以直接在浏览器中使用，不需要编译。在编译期间可以检查和修复错误。强类型，支持静态和动态类型。弱类型，无法选择静态类型。不支持模块、泛型、接口等。没有庞大的开发人员社区。支持模块、泛型、接口。有庞大的开发人员社区。
v3+ts慢慢学习路之一【了解vue生态现状】+【为什么要学TypeScript】
qq_42514643的博客
01-11 1393
其实之前写过V3的入门，确实，那就是入门要掌握的API，随着v3的版本不断更新，周边组件不断完善，是时候展示真正的掌握核心技术了 一、Vue3生态现状 1、vue版本的更新情况 npm view vue versions 从目前版本迭代来看已经到了3.2.26 算是更新非常快速了 2、周边vuex 版本更新情况 npm view vuex versions 3、周边vue-router版本更新情况 npm view vue-router versions 4、周边element-plus UI库更.
尤雨溪介绍 Vue 3：语法不变、TS 支持很好、2.0 系列还会发一个版本
寒冰屋的专栏
04-23 2412
此前 Vue 发布了3.0 的 beta 版本，不久后项目核心开发者尤雨溪公开分享了关于该版本的相关信息。 首先，beta 阶段意味着： 已合并所有计划内的 RFC 已实现所有被合并的 RFC Vue CLI 现在通过 vue-cli-plugin-vue-next 提供了实验性支持 此外还提供了一个用于 Vue 3 的最小化webpack 配置，支持单文件组件 其中有一个主要的 R...
vue现在什么版本_Vue 3：语法不变、TS 支持很好、2.0 系列还会发一个版本
weixin_39806779的博客
12-30 1778
此前 Vue 发布了 3.0 的 beta 版本，不久后项目核心开发者尤雨溪公开分享了关于该版本的相关信息。首先，beta 阶段意味着：已合并所有计划内的 RFC已实现所有被合并的 RFCVue CLI 现在通过 vue-cli-plugin-vue-next 提供了实验性支持此外还提供了一个用于 Vue 3 的最小化 webpack 配置，支持单文件组件其中有一个主要的 RFC 是关于新引入的 ...
vue3+angent-vue+typescript跳转详情页
07-07
对于Vue 3和Ant Design Vue与TypeScript结合的情况下，跳转到详情页可以采取以下步骤： 1. 在Vue组件中，先引入Vue Router，并创建一个路由实例。 ```typescript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ // 定义路由规则 { path: '/detail/:id', component: DetailPage }, ], }); ``` 2. 创建详情页组件，并在其中获取参数。 ```typescript import { defineComponent, ref, onMounted } from 'vue'; import { useRoute } from 'vue-router'; export default defineComponent({ setup() { const route = useRoute(); const id = ref(''); onMounted(() => { id.value = route.params.id; }); return { id, }; }, }); ``` 3. 在需要跳转的组件中，使用`router-link`或`router.push`方法进行跳转。 ```html <router-link :to="`/detail/${itemId}`">跳转到详情页</router-link> <!-- 或者在 JavaScript/TypeScript 中使用 --> <button @click="gotoDetail(itemId)">跳转到详情页</button> ``` ```typescript import { defineComponent } from 'vue'; import { useRouter } from 'vue-router'; export default defineComponent({ methods: { gotoDetail(id: string) { this.$router.push(`/detail/${id}`); }, }, }); ``` 这样就可以使用Vue Router在Vue 3 + Ant Design Vue + TypeScript项目中进行跳转至详情页了。注意要根据实际情况进行适配和调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

易风有点疯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值