72小时带你光速入门TypeScript - 环境搭建01

好久没在掘金上更新文章了,最近确实出现了一些变化哈。这两个月的业余时间一直在搞其他方向上的自媒体,也算是走出了那一步,也不知道从什么时候开始,心里一直有个声音,就是不能一直打工,今年终于踏出去了这一步,也在自媒体方向上学到了很多东西。那为啥又在掘金上更新技术blog了呢?我觉着在副业收入没超过主业收入的时候,还是应该以主业为主,不能把自己的技术给弄丢了呀。

回归正题,看到这个标题很多人会说,这一定是一篇标题党,或者说现在前端都烂大街了,还有必要学习Ts吗?我想解释一下:

  • 之前读过我文章的同学应该都知道(掘金平台上也能搜到),我的文章风格主打的就是一个通俗易懂。所以我敢写这样的专题,就说明自己还是很有把握的。
  • 现在前端确实烂大街,如果想要谋求一份性价比较高的工作,除了运气外,知识面广对你绝对有帮助。所以这个专题的价值就出来了,花最少的时间达到不错的一个程度,这绝对是获利的。

容器能够直接运行TypeScript吗?

那肯定是不行的。我们这里所说的容器只有2种,一种是浏览器环境、一种是Node环境。

浏览器只认识 html、css、Javascript。所以想让TypeScript跑起来的话,那就一定要把TypeScript转译成JavaScript,然后去跑Js脚本。

那如何做Ts到Js的转译呢?

Ts官网已经给出了答案。我们可以使用 tsc 这个工具。安装这个工具也非常的简单,只要你安装了TypeScript,tsc就会被自动安装。这个过程就像安装Node,会自动安装npm一样。

css 复制代码
npm i -g typescript

随意找一个空目录,然后编写你的第一个ts文件,index.ts文件内容如下:

ini 复制代码
let name:string = 'hello world!';

随后运行:

复制代码
tsc index.ts

随后,大概率你的编译就报错了,大致截图如下:

上面这个报错告诉我们 变量name重复声明了。

那这是为啥呢?明明我们的name在当前的文件里是唯一的,为啥还会提示name重复声明?

这是因为默认情况下,tsc会将DOM环境作为ts文件的运行容器,而DOM环境里已经存在了name这个全局变量,所以当你再声明这个变量的时候就会报错。

如何证明我的结论是正确的呢?

首先来看下面的这张图:

我们的第一行代码是操作DOM的,而编译器没有报错,这就说明了默认这段代码是要运行在浏览器下的。

再来看一张图:

上面这张图证明了name这个变量,确实在DOM环境里是全局存在的。

所以我们的报错,根据Ts的运行规范来看的话,是合理的。

如何解决呢?3种方案:

  • 修改变量名字,将 name 换成 name1,编译就可以过去啦。编译成功后在当前的目录下会生成一个js文件,js文件的内容是啥,大家自行查看。
  • 既然默认的运行环境是浏览器,那我们是否可以更改这个环境?因为虽然name在浏览器里全局存在,但是在Node环境里,这个全局变量它就不存在啊;答案是可以的。需要我们新建一个tsconfig.json文件来指定当前的运行环境,修改如下:
json 复制代码
// tsconfig.json文件内容如下:
{
    "compilerOptions": {
        "lib": ["ES2015"].     // 指定当前的环境是Node环境,当然这么写其实也不准确,后面的文章里会给大家解释原因
    }
}

// 此时我们就不能使用tsc index.js来编译文件了,因为Ts官方规定,如果目录下存在tsconfig.json文件,
// 如果想要让配置文件生效,那么就只能使用tsc命令(注意,后面不能跟着文件名了)。
  • 最后一种就是模块化。虽然name变量是全局,但是我可以在其他作用域里去声明name变量,这也是Js的一个特性。先删除 tsconfig.json文件,然后index.ts文件修改如下:
ini 复制代码
let name:string = 'hello world';

export {};

此时再编译文件,我们就会发现文件执行编译成功了。

本期总结

本篇文章我们来初体验了一下TypeScript,虽然说遇到了一些问题,但是也知道了问题的原因并且成功的解决了。本来这篇文章还应该有如何搭建一个Ts的前端环境、Ts的后端环境。但是文章篇幅有限,这都已经1000多字了,如果再多的话,体验应该不是很少,所以我决定下篇文章再写如何搭建Ts前后端运行环境。

最后,希望我的文章对你有帮助,我们下期再见啦~~

相关推荐
jay神14 分钟前
基于 YOLOv8 的轴承缺陷检测(Web 版)
前端·人工智能·yolo
jay神22 分钟前
基于 YOLOv8 的森林火灾检测系统(Web 版)
前端·yolo
code2cat26 分钟前
HTML基础篇之第一张网页:从index.html到浏览器里的任务清单
前端·html
miss1 小时前
AI 改完不敢上线?OpenSpec 规约驱动开发实战
前端·代码规范·前端工程化
AiMan2 小时前
腾讯ima还是不可以导出左侧所有对话,只能单条导出,方法不对吗
前端
去伪存真2 小时前
并发量一高就装死?Agent 全链路“防猝死”手册
前端·agent
Moment2 小时前
AI 编程时代,聊聊我的 Mac mini 双屏桌面
前端·后端
AiMan2 小时前
先确认能不能一次把Microsofat Copilot所有内容打包一个文件导出
前端
总要学点什么2 小时前
第97篇:三维数据加载-城市建筑白模自定义着色器——让一条光带沿高度扫上去,快慢却由帧率说了算
前端·gis·webgl·cesium·着色器·空间分析·白模
上海懒图科技3 小时前
工厂厂区电子地图定位导航:厂区人车精准定位,安全合规双保障
前端·arcgis·vue