TypeScript初识及环境搭建

“学习TypeScript难吗？”，对于新手而言，在刚接触到一门新技术的时候，总是很习惯的问上这么一句。其实：“上手TypeScript几乎没有任何难度可言！”

TypeScript最近很火，有很多开源的项目也是由其开发的，如果你是一名前端开发工程师或准备要成为一名前端开发工程师的话，现在如果再不学习TypeScript就真的太OUT了！那么现在请你系好安全带，和我一起踏上学习TypeScript之旅吧！

一、TypeScript是什么？

相亲也要先了解一下，更何况是学习一门新的知识，对吧。

1、TypeScript 是微软在2012年开发的一门免费开源的编程语言。它是 JavaScript 的一个超集（增强版）。它在JS原来的基础上增加了一套十分强大的类型系统，从而可以让小伙伴们在写代码的时候获得更加丰富的语法提示。在代码的编译阶段也可以通过类型系统的检查，从而有效避免一些线上错误。

2、TypeScript是一门比Java更Script的编程语言。也就是说TypeScript具有真正的面向对象编程思想，你可以采用它来完成更加大型复杂的应用。

3、TypeScript始于JavaScript终于JavaScript。也就是说TypeScript遵循JavaScript的语法和语义，任何Js都可以在Ts内运行，但TypeScript它不可以直接在浏览器中运行，必须要将其转换为JavaScript。

简单的说：你可以用TypeScript来编写出更加出色的JavaScript代码，用来搞定规模可观的JavaScript项目！

二、为什么要学习TypeScript?

1 、拥有强大的靠山，分别为微软与谷歌。TypeScript是由微软开发的，谷歌的Angular框架是用Typescript开发的。所以TypeScript很有可能是未来的前端脚本语言发展的主流方向。

2、Vue 3.0 源码全部用typescript重写。Vue.Js在前两年发展迅速，用户数和粉丝量呈指数级增长，目前Vue开发者插件用户数约为70.4万。

3、Node.js之父瑞安达尔（Ryan Dahl）发布了新的开源项目 deno，而该项目最终是要提供一个安全的 TypeScript 运行环境。

4、为了升职加薪！

三、如何学好TypeScript

1、拥有JavaScript基础，了解Es6（不解释）

2、打开你的开发工具，一定要做到边学边练习。学习编程没有捷径可言，唯一的突破口便是多敲打你的代码。

3、将TypeScript应用到一个较为复杂的场景中。学以致用，学编程也是需要悟的，只有将TypeScript真正应用起来，你才能够领悟到TypeScript带给你的震撼。

四、TypeScript相关

官网：https://www.typescriptlang.org

中文：http://www.tslang.cn

官方博客：https://blogs.msdn.microsoft.com/typescript

五、环境搭建

因为TypeScript在JavaScript的基础上增加了类型系统，所以TypeScript不能够直接在浏览器当中运行。我们需要使用编译器将TypeScript编译为JavaScript。
先来搭建一个TypeScript的基本开发环境：

1、安装Node.js

因为TypeScript编译为JavaScript需要Node环境的支持，所以需要先进行Node的安装。Node的安装很简单，首先打开https://nodejs.org/zh-cn/，下载Node安装包，然后傻瓜式安装。安装完成以后打开命令工具输入：

node -v
npm -v

如果你可以看到node以及npm那就说明你已经成功安装好了Node.js

2、全局安装TypeScript

在命令窗口中继续输入命令：

npm install typescript -g

查看TypeScript版本：

tsc --version

3、运行你的第一个TS程序

• 创建一个temo.ts文件
• 在文件内写入：

var site:string = "demo.com";// string 为设置变量类型
console.log(site);

• 在命令窗口输入以入命令，将ts编译为js：

tsc demo.ts

• 在文件夹内多出一个名字为demo.js的文件：

var site = "demo.com";
console.log(site);

• node运行

node demo.js

4、实现对ts文件监听

• 通过命令，创建package.json

npm init -y

• 打开package.json，增加脚本build执行tsc命令：

"scripts": {
    "build":"tsc"
  }

• tsc命令会使用到tsconfig.json的配置，新建tsconfig.json，输入以下代码：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "outDir": "lib"
  },
  "include":[
    "src/**/*.ts"
  ]
}

以上配置会将src目录下的ts编译到lib文件夹下。outDir设置输出目录。
* 将demo.ts移入到src目录， 输入命令：

cnpm run build

你会发现lib文件夹多了一个demo.js文件。
* 如果要实现代码自动监听，可在package.json中增加start脚本：

  "scripts": {
    "start":"tsc --watch",
    "build":"tsc",
  },

这样在你修改完代码保存后就自动将你的ts文件编译到js当中。