[TypeScript] - 安装 TypeScript

TypeScript

TypeScript 是 JavaScript 的超集,由微软开发,两者的语法十分类似,JavaScript 学习者转向 TypeScript 来说难度不大。

超集:当集合 A 的所有元素都在集合 B 中可以找到,并且集合 B 可能存在集合 A 不存在的元素,此时称集合 B 为集合 A 的超集,集合 A 叫做集合 B 的子集。举个例子,猫科动物是所有种类猫的超集,各个种类的猫:波斯猫、布偶猫、蓝猫等等都是猫科动物的子集。换而言之,JavaScript 中的所有元素在 TypeScript 都可以找到,因此转语言的门槛极低。

2012 年 10 月,微软发布了首个公开版本的 TypeScript,2013 年 6 月 19 日,在经历了一个预览版之后微软正式发布了正式版 TypeScript 0.9,向未来的 TypeScript 1.0 版迈进了很大一步,截止目前,最新版本的 TypeScript 为 3.6.3。

安装 node

在这里需要提前安装好 nodejs 和 npm,npm 是 nodejs 的包管理工具。Windows 系统只需要下载对应安装文件打开进行安装即可。

官方中文站:nodejs.cn

官方英文站:nodejs.org

推荐下载 msi 格式的安装文件,无需手动加入的系统环境变量

也可以通过命令行的方式进行安装,如果是 Centos 系统,直接使用 yum 命令安装:

# 安装 node
yum install -y nodejs

Mac OS 系统可以使用 brew 命令安装:

# 安装 node
brew install -g node

安装完成后,执行如下命令检测是否安装成功:

# 查看 node 安装版本
node -v

# 查看 npm 版本
npm -v

扩展阅读:淘宝提供了 npm 的镜像以提高下载速度,安装完 node 后使用命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装 cnpm,安装完成后用 cnpm 命令替代 npm 命令即可提高下载速度。

安装 TypeScript

安装 node 之后,打开命令行(终端)输入如下命令全局安装 TypeScript:

# 更新 npm
npm install -g npm

# 安装 TypeScript
npm install -g typescript

执行结果:

image.png

输入命令:tsc -v 即可查看 TypeScript 安装版本。

编写第一个 ts 脚本

TypeScript 支持传统的面向对象编程,接下来我们编写一个类来作为示例。

创建并编辑 test.ts 文件,如果是 Windows 系统可以新建文本文档格式文件,然后将后缀改为 .ts,输入如下内容:

class Cat
{
    color: string;

    constructor(color: string) {
        this.color = color;
    }

    getColor() {
        return this.color;
    }
}

let cat = new Cat("orange");
let color = cat.getColor();

console.log(color);

然后在命令行下进入到 test.ts 所在的文件目录,输入命令:tsc test.ts,然后查看当前目录,可以看到生成了 test.js 文件。

image.png

tsc 命令将 .ts 文件编译为 .js 文件,将 TypeScript 语法转化为了 JavaScript 语法。

关于这个命令的详细参数可以参照:TypeScript - tsc 命令参数列表

调试 TypeScript

TypeScript 需要编译成 JavaScript 才能被执行,每次都要使用 tsc 命令进行编译十分不便,可以使用 --watch 参数实时监听 .ts 文件变化来自动更新生成的 .js 文件。

tsc test.ts --watch

同时监听多个文件使用空格隔开即可

每当修改 test.ts 文件时,对应的 test.js 文件就会自动更新。JavaScript 可以通过浏览器进行调试。

创建一个 HTML 文件 index.html,输入如下内容:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="./test.js"></script>
</body>

</html>

接着我们访问这个 HTML 文件,打开控制台即可看到执行结果。

image.png

为什么要学 TypeScript?

通过 tsc 命令可以十分方便的将 .ts 文件转化为对应的 JavaScript 脚本,也就是说前端也可以应用 TypeScript 来编写,相比于 JavaScript,为什么要学习 TypeScript 呢?

个人感觉,学习 TS 纯属兴趣,并没有“一定要学”之说,网络上众说纷纭,有的人认为学习 TS 可以减少找出问题的时间,当然这也是其中的原因,不过我并不推荐大家一定要去学它,因为我自己也是刚刚起步而已。

“JavaScript 用的好好的,干嘛非得再花时间去学一门新的知识?”

“老了,学不动了”。

相信很多人都会有这种想法,学不学完全看个人兴趣与否,JavaScript 转 TS 的难度并不高,学习的念头总是由一时兴起的,突然有一天感慨:“啊,好想学这个”,然后就开始学了,并没有特别的理由,好比之前一直在学 JavaScript,结果后来知道有 ES6 这种东西,什么箭头函数之类的,感觉很酷。

为了追上技术更新的步伐,果断去看了一下,后来又知道 ES6 也不是最新的了,ES2019 要出来了……技术永远在不断更新,学肯定永远学不完。

有兴趣就去学,我的学习理念就是如此罢了。

目前正在使用 JavaScript 开发 cocos creator 游戏,后期将使用 TypeScript 替换之前的脚本进行开发——好像玩游戏的时候爆了一把极品武器,迫不及待想去试刀的心情,当你用腻了这把刀,接下来就会去寻找更新鲜的刀,不断循环这个过程,生活就会一直充满新鲜感。

学以致用, 学习新事物时一定要在短期内找到可以施展的地方,这才是保持源源不断动力的最佳方法—— 阶段性学习成果以及取得成就。

讨论

还没有人评论~