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

news/2025/1/13 3:32:02/

文章目录

  • 🌟 写在前面
  • 🌟 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.ppmy.cn/news/866060.html

相关文章

跑步机 使用心得

我是办公工作的一员,每天除了吃饭休息外,大多时间都是面对电脑,于是和家里 商量准备在家里添一件健身器材。在淘宝上搜寻和在朋友的建议下,最终选择澳瑞特的跑 步机。选择奥瑞特,就是看中在我们当地就有实体店和售后…

阿里巴巴B2B 3月全国招聘会

招聘会信息如下: 时间

安徽省大数据比赛——数据可视化实战

第四部分:可视化(15分) 近些年空气污染在我国很多地区非常严重,其中PM2.5作为衡量空气质量的一个重要指标,当前数据为2018年12月份1号-10号全国大部分城市的站点检测数据。接下来我们将这些数据进行可视化来看下PM2.5…

算法刷题Day 38 动态规划理论基础+斐波那契数+爬楼梯

Day 38 动态规划 理论基础 动态规划的解题步骤: 确定dp数组(dp table)以及下标的含义确定递推公式dp数组如何初始化确定遍历顺序举例推导dp数组 斐波那契数 很基础 class Solution { public:int fib(int n) {int a 0, b 1;while (n--…

QT+MySql

QT+MySql 安装驱动 sudo apt-get update sudo apt-get install mysql-server 安装QMYSQL驱动程序。 sudo apt-get install libqt5sql5-mysql命令操作 登录 sudo mysql -u root -p查看所有数据库 SHOW DATABASES;创建一个数据库 CREATE DATABASE video_file;选择数…

Windows操纵kafka

这里写目录标题 启动kafk创建一个测试主题查看所有主题查看first详细信息修改分区数(分区数只能增加 不能减少)删除主题生产者生产数据消费命令 启动kafk 安装目录下 .\bin\windows\kafka-server-start.bat .\config\server.properties创建一个测试主题 安装目录下 .\bin\wi…

windows11 无法登录 outlook账户的问题

解决办法: 将以下四行加入到hosts文件 117.28.245.88 logincdn.msauth.net 117.28.245.88 login.live.com 117.28.245.88 account.live.com 117.28.245.88 acctcdn.msauth.net

Skype for linux无法自动登陆

下载skype后,发现每次重新开机都要重新登陆,很是烦人。 解决方法 安装gnome-keyring sudo pacman -S gnome-keyring第一次登陆时会需要你设置kering的密码。后面就可以自动登陆了。