TypeScrip入门—环境搭建和第一个TS代码（一）

介绍

TypeScript 扩展了 JavaScript 语法，任何已经存在的 JavaScript 程序，可以不加任何改动，在 TypeScript 环境下运行。TypeScript 只是向 JavaScript 添加了一些新的遵循 ES6 规范的语法，以及基于类的面向对象编程的这种特性。

其次，从 2016 年 9 月底发布的 Angular2 框架开始，就由 TypeScript 编写的，包括我们现在最容易的 Vue.js 的脚手架 Vue-cli 3X 也是由 TypeScript 编写的，并且 Vue-cli 3x 还支持 TypeScript 的项目生成及编写，从这一点就可以看出，其实 TypeScript 成为主流是必然的攻势，而且 TypeScript 有微软和谷歌两大巨头公司支持，肯定会越来越往好的方面发展。

TypeScript 用的是 Es6 的语法，但是大部分浏览器不支持 Es6，所以我们必须安装它的环境，因为它的运行环境可以将我们写的 TypeScript 专成可执行的 Es5 浏览器脚本（JavaScript）

环境搭建

要用 TypeScript 肯定首先要安装 TypeScript，TypeScript 是需要在 NodeJs 的环境上基础上才能安装的，如何安装Node 这种傻瓜式的步骤我这里就不演示了，默认你已经安装了 Node 开发环境，我这里直接演示如何安装 TypeScript 如：

sudo npm install -g typescript

当安装完成之后，你可以通过以下命令来检测你当前安装的版本

tsc -v

我这里安装的为 3.1.6 版本，是目前最新的版本，用来学习

当我安装完成之后我在桌面新建一个目录：TypeScript ,并且在目录里面新建一个 hello.ts，内容如下：

export class Hello {
	
}

可以看到我在里面用 ES6 的语法声明了一个 class 类，其实它就是 JS

我通过命令行终端进入文件夹并且通过 typescript 的 tsc 去编译这个文件 hello.ts 的文件

扫描二维码关注公众号，回复： 4712293 查看本文章

cd desktop/TypeScript
tsc hello.ts

编译完成后会在当前目录下出现一个 hello.js 的可执行文件，当我打开 hello.js 的时候里面的内容被自动变成如下：

"use strict";
exports.__esModule = true;
var Hello = /** @class */ (function () {
    function Hello() {
    }
    return Hello;
}());
exports.Hello = Hello;

可以看到他被翻译成了 Es5 可执行的 JavaScript，其实 TS 这种写法在 Node 里面可以直接写在 JS 里面，只是浏览器还做不到真正意义上的兼容 ES6 所以我们学习 TS 对工作来说还是相当不错的，用更少的代码做更多的事情

TypeScrip入门—环境搭建和第一个TS代码（一）

猜你喜欢