Vue3通透教程【十五】补充TS开发环境搭建问题

news2025/1/14 18:04:33

文章目录

  • 🌟 写在前面
  • 🌟 Node中搭建TS开发环境
  • 🌟 验证环境
  • 🌟 写在最后


🌟 写在前面

专栏介绍:
凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其他框架的巨大优势,有兴趣的伙伴可以看一下 Vue框架背后的故事、尤大大对前端生态是这样看的,随着 Vue 框架不断的被认可,现如今的 Vue 框架已经是前端工程师必备的技能了,记得尤大大开发 Vue 的初衷,为了让自己的开发工作更加便捷,也希望这个框架能让更多人的开发工作变得轻松;现如今 Vue 框架做到了,尤大大做到了,当然在 20 年的 9 月 18 日,Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布!如今已经过去了两年多的时间,更多的公司选择了Vue3技术,所以凉哥也在这个时候为大家出这份专栏,本专栏将帮助大家掌握Vue3+TS技术,提升自己竞争力!

温故知新:
在上篇文章中我们为大家讲解了,TS一部分的其他类型,包括我们的 对象类型、函数结构类型、数组类型、 元组、枚举、类型别名 你都掌握了么?那么今天为了我们能够将更多的精力来放到我们的编码过程之中,我们首先带大家将在Node中去搭建我们的TS开发环境,为了我们更好的学习后面的TS语法;同时呢也是为我们前面在初探Typescript文章中的一些问题进行补充描述;各位小伙伴让我们 let’s coding!


🌟 Node中搭建TS开发环境

如果你并没有安装过Node的话你可以看下我之前的安装教程,这里呢我会默认你已经安装好了Node环境,首先我们找到自己以后要专门存放TS代码实例的一个文件夹;用VSCode打开!(其实跟我们初探TypeScript中的安装是一样的,如果你前面安装好了我们这里可以省略操作,本篇目的就是为了补充报错的原因,来为下篇文章的配置做铺垫)

在这里插入图片描述

全局安装typescript

这个呢大家自己检查一下是否安装过,我们前端的教程中带领大家安装过,如果没有安装的话,可以通过下面命令进行安装;这里呢建议大家进行-g全局安装,因为里面有一个包是tsc这个前面我们接触过,为了方面我们在每个地方都可以使用;

npm i -g typescript

在这里插入图片描述


🌟 验证环境

安装完成后呢 我们还是一样做一个小小的测试,我们首先创建一个index.ts文件,然后我们写入简单的一行简单的ts代码let str:String='哈喽,几何'然后在控制台执行tsc index.ts命令,然后你就会发现在index.ts同目录下多了一个·index.js`文件,这个就是我们的tsc将我们的ts编译成我们的js了,今天要给大家补充的就是当我们打开js后我们在回到我们的ts文件就会出现报错!

在这里插入图片描述

出现报错的原因呢,我们鼠标悬浮上去后提示的是无法重新声明块范围变量“str”。这是因为什么呢?其实这就是我们今天就来为大家讲解的内容,默认情况下我们TS会做下面几种假设:

1、把当前环境作为浏览器环境,因为TS默认不知道自己所执行的环境,所以默认会当成dom浏览器环境,我们可以验证一下你在文件中可以输入document、window对象;

2、如果代码中没有使用模块化语句(import、export),便默认为是全局执行的;

所以应该能够联想到,这里呢TS并不知道js就是自己的编译后的文件,所以js中有了变量str,我们在ts中再去声明就会报错;当然我们可能也会看到我们在TS中明明用的是let但是为什么编译后的js中却变成了var其实这个就是我们要讲的第三点;

3、编译的代码默认是ES3;因为编译成ES3能够为我们的代码在浏览器中运行启到很好的兼容性。当然我们目前在node环境中运行其实是不需要必须是ES3版本的;

结合上面的三种假设会让我们的代码没有实现我们最理想的状态,如何更改以上的假设呢?

1、使用tsc命令的时候添加参数选项
2、创建ts配置文件,更改ts编译的选项(推荐)


🌟 写在最后

大家看完这篇文章后,对TS的默认假设以及我们的报错是否有了进一步的了解呢?我们也暴露出了如何更改这些默认假设,并且我们建议使用第二种通过ts的配置文件来更改编译选项,小伙伴们可以动手尝试一下 先把我们的环境搭建起来,也还原一下我们上面的波浪线提示,我们下篇文章中,为大家讲解TS的配置!

几何送书七十四期 购买地址

参与方式:本博客中进行评论即可,只要评论内容不被折叠都可以参与抽奖;
抽奖方式:程序自动拉取未折叠的评论随机抽取5位伙伴,每人最多可评论5次;
抽奖时间:2023-07-15 17:00;
结果公布:待抽奖(2023-07-15 17:20会将结果公布到这里)
本期获奖者送实体书《CSS选择器世界(第2版)》一本本(包邮到家)

在这里插入图片描述

原创不易,望各位大佬支持一下! \textcolor{blue}{原创不易,望各位大佬支持一下!} 原创不易,望各位大佬支持一下!

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/753070.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【运维】 第02讲(上):企业 Nginx 高性能优化配置实战总结

本课时讲解关于 Nginx 配置优化的内容,相信对于 Nginx 你一定并不陌生,它是一款轻量级的开源 Web 服务及代理程序。在 Nginx 出现之前市场上主流两款 Web 服务,一款是 Windows 系统上的 IIS,另外一款是 Linux 系统上的 Apache。而…

c++11 标准模板(STL)(std::basic_istream)(七)

定义于头文件 <istream>template< class CharT, class Traits std::char_traits<CharT> > class basic_istream : virtual public std::basic_ios<CharT, Traits> 类模板 basic_istream 提供字符流上的高层输入支持。受支持操作包含带格式的…

​“你的期望薪资是多少?” Hr现身说法,以退为进多杀2k

面试是初见1小时就要相互了解优缺点的过程&#xff0c;在你问我答的交锋中如何不露声色、不卑不亢的展现自己&#xff0c;通过以下几个常见问题的拆解&#xff0c;你会得到答案的~ 1.你的期望薪资是多少&#xff1f; 菜鸟的回答:假设上家公司是10K&#xff0c;一般人会说我想…

命令行系列:windows cmd官方文档

官方文档 和java开发、Android开发一样。cmd也有官方文档&#xff1a; https://learn.microsoft.com/en-us/windows-server/administration/windows-commands/windows-commands 如下图&#xff0c;我们可以看到经典的cd,clean命令。 cd命令的全程是什么&#xff1f; cd命令…

基于51单片机的红外测温系统的设计与实现

功能框图 功能描述 本设计以STC89C52单片机为核心控制器&#xff0c;加上其他的模块一起组成非接触人体红外测温的整个系统&#xff0c;其中包含中控部分、输入部分和输出部分。中控部分采用了STC89C52单片机&#xff0c;其主要作用是获取输入部分数据&#xff0c;经过内部处理…

基于SpringBoot+vue的校园闲置物品交易网站设计与实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

【测试开发】软件测试的常用概念

目录 一. 软件测试的生命周期 1. 需求分析 2. 测试计划 3. 测试设计&#xff0c;测试开发 4. 测试执行 5. 测试评估 ​编辑 二. 软件的生命周期 1. 需求分析 2. 计划阶段 3. 设计阶段 4. 编码阶段 5. 测试阶段 6. 运行维护 三. 如何描述一个BUG 1. 发现问题…

Mac 谷歌浏览器选中查看悬浮出现的元素样式

Mac 谷歌浏览选中查看悬浮出现的元素样式 1. Mac 暂停脚本执行快捷键 command \或F8 2.以斗鱼主站下载悬浮面板为例 3. 操作步骤 &#xff08;1&#xff09;打开控制台&#xff0c;选中源代码 &#xff08;2&#xff09;鼠标选中下载&#xff0c;让面板悬浮出来 &#xf…

网络安全面试题

以下为网络安全各个方向涉及的面试题&#xff0c;星数越多代表问题出现的几率越大&#xff0c;祝各位都能找到满意的工作。 注&#xff1a;本套面试题&#xff0c;已整理成pdf文档&#xff0c;但内容还在持续更新中&#xff0c;因为无论如何都不可能覆盖所有的面试问题&#xf…

Linux命令----modprobe命令详解

【原文链接】Linux命令----modprobe命令详解 一、modprobe命令的作用 加载内核模块&#xff1a; 使用modprobe命令可以加载指定的内核模块到运行中的内核中。加载内核模块可以在运行时添加新的功能、驱动程序或修改内核行为。 解决模块依赖关系&#xff1a; modprobe命令可以…

机器学习学习笔记——第二章:模型评估与选择

机器学习 机器学习学习笔记——第二章&#xff1a;模型评估与选择 文章目录 机器学习一、经验误差与过拟合1.1、经验误差与泛化误差1.2、过拟合与欠拟合 二、 三个问题三、评估方法3.1、留出法&#xff08;hold-out&#xff09;3.2、k折-交叉验证法&#xff08;k-fold cross v…

银河麒麟系统无法进入桌面拷贝备份文件

最近使用VMWare搭建银河麒麟系统升级后&#xff0c;无法进入桌面&#xff0c;而是进入tty1界面 这个时候如何想导出里面的文件就可以用文件共享的方式右键到虚拟机设置-选项&#xff0c;如图所示 选择一个共享目录 如d盘vm目录 登录tty1账号密码 ls列出文件 如图进行文件拷贝…

.NetCore录屏生成Gif动图程序(Form)的开发过程[代码已上传GitCode]

&#x1f32e;.NetCore录屏生成Gif动图程序(Form)的开发过程 前言: 开发环境&#xff1a;.NetCore3.1 GitCode地址&#xff1a;罗马苏丹默罕默德 / RecordDesktopGif GitCode FrameWork版本地址&#xff1a;尚未同步功能 实现功能 选中屏幕的一块矩形区域按照设置的参数录制…

Qt中QMainWindow的相关介绍

目录 菜单栏 工具栏 状态栏&#xff1a; 停靠窗口&#xff1a; QMainWindow 是标准基础窗口中结构最复杂的窗口&#xff0c;其组成如下: 提供了菜单栏 , 工具栏 , 状态栏 , 停靠窗口 菜单栏&#xff1a;只能有一个&#xff0c;位于窗口的最上方 工具栏&#xff1a;可以有多…

《爱的教育》超全思维导图

思维导图是帮助理解和记忆的高效生产力工具&#xff01; 思维导图以图形的形式表达信息&#xff0c;可视化和关联性&#xff0c;可以更好的激发创作和想象力。 在思维导图中&#xff0c;我们使用简洁的关键词或短语来表达思想&#xff0c;而不是完整的句子或段落。可以帮助我们…

MAYA鲨鱼的绑定

最后一个柚有问题 轴向正确的旋转&#xff0c;成C型 弄乱了 W整体移动 D单个移动 X轴没指向下一个关节 控制器创建 根控制器 控制器很好匹配关节 建组 出来了&#xff0c;控制器位置还在 确保旋转关节是0 处理层级 控制器不跟着 没办法刷蒙皮 # 错误: file: H:/Autodesk/May…

安达发|如何选择适合企业的APS排程系统?

APS是一个优化的排程调度工具&#xff0c;归根结底&#xff0c;APS追求的是企业生产效率的提升&#xff0c;而不是替代人工排程。如何验证呢&#xff1f;对于APS用户来说&#xff0c;检验衡量的最简单的方法就是&#xff0c;拿出过去某一个月实际生产计划的历史数据&#xff0c…

微信小程序创建步骤图文

1.登录微信公众平台 首先&#xff0c;通过网址登录https://mp.weixin.qq.com/&#xff0c;找到立即注册 进行点击。 2.进入该页面时&#xff0c;选择点击小程序 3.注册开发者账号点击立即注册 4.进入该页面 账号信息注册 5.下一步 邮箱激活 注意 &#xff1a;登录邮箱&…

【AntD】Antd Table组件的头部单元格水平居中,单元格居左:

文章目录 一、效果图:二、实现代码: 一、效果图: 二、实现代码: customHeaderCell: () > ({ style: { textAlign: center } }),//头部单元格水平居中

Vue3间距(Space)

可自定义设置以下属性&#xff1a; 对齐方式&#xff08;align&#xff09;&#xff0c;类型&#xff1a;‘start’|‘end’|‘center’|‘baseline’&#xff0c;默认 undefined间距方向&#xff08;direction&#xff09;&#xff0c;类型&#xff1a;‘horizontal’|‘vert…