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 肯定首先要安装 TypeScriptTypeScript 是需要在 NodeJs 的环境上基础上才能安装的,如何安装Node 这种傻瓜式的步骤我这里就不演示了,默认你已经安装了 Node 开发环境,我这里直接演示如何安装 TypeScript 如:

sudo npm install -g typescript

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

tsc -v

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

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

export class Hello {
	
}

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

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

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 对工作来说还是相当不错的,用更少的代码做更多的事情

你可能感兴趣的:(TypeScript,TypeScript)