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前后端运行环境。

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

相关推荐
蜗牛快跑2133 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy4 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图2 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js