TypeScript入门一：配置TS工作环境

• 配置手动编译ts文件工作环境
• 配置webpack自动化打包编译工作环境（后面补充）

 一、typescript入门学习引言

进入主题之前，首先说明这个系列的博客是我刚刚接触typescript的学习笔记，可能不会太深入的解读一些原理方面的东西。但尽可能的把基础的入门使用解析清楚，毕竟使用typescript来实现的项目一般是比较复杂的项目，不仅仅只是简单的语法使用，而是它带来的特性所解决的问题才更值得我们关注，所以在这个系列之后还会有更深入的工程应用方面的博客，也希望大家能给我提供一些意见和思路。

引用阮大佬博客中这样一段描述：javascript 是一种弱类型（或称动态类型）语言，即变量的类型是不确定的。typescript 是微软2012年推出的一种编程语言，属于 javascript 的超集，可以编译为 javascript 执行。 它的最大特点就是支持强类型和 es6 class。

支持强类型，这可能会颠覆你对javascript这门语言的认知，但这也是javascript在面对日益复杂的项目的机遇，至于为什么这么说请等到后期的工程应用方面的博客吧。typescript不一定成为每一个项目中的必需品，但是当你需要它的时候你就会知道它的价值。

阮大佬的相关博客：强类型 javascript 的解决方案

官网相关重要资料（中文官网首页有直接下载文档的连接）：typescript语言规范（github连接）

 二、配置手动编译ts文件工作环境

第一步：安装nodejs环境；

第二部：安装typescript插件： npm install -g typescript 

创建一个工作区间：

ts_app//文件夹
    index.html
    index.ts

然后将下面这段ts代码拷贝到index.ts中：

 1 class greeter {
 2     greeting: string;
 3     constructor(message: string) {
 4         this.greeting = message;
 5     }
 6     greet() {
 7         return "hello, " + this.greeting;
 8     }
 9 }
10 
11 let greeter = new greeter("world");
12 
13 let button = document.createelement('button');
14 button.textcontent = "say hello";
15 button.onclick = function() {
16     alert(greeter.greet());
17 }
18 
19 document.body.appendchild(button);

然后在控制台使用tsc命令将index.ts换行成一个js文件

tsc index.ts

编译完成后会在当前区间生成一个index.js文件，这时候你可以使用index.html引入这个生成的index.js查看效果。

这里介绍使用一个vs code编辑器插件：live server

安装这个插件以后可以直接右键html文件界面点击右键（选择）：open with live server，这时候可以使用一个自动服务在浏览器打开这个html页面，并且可以动态监听这个页面最新的状态，当页面或者js文件发生改变时会自动刷新页面，这样就不需要每次通过tsc编译完js还要手动刷新页面。

第三步：编译全部ts文件

tsc --init //生成tsconfig.json文件
tsc         //tsc直接可以将全部ts文件转换成js文件了

在vs code中使用typescript auto compiler插件自动编译ts文件，生成js文件。这个插件需要tsconfig.json文件的配合，通过tsc --init命令将当前目录下的ts文件相关编译描述设定，只要其中一个ts文件发生更改就可以实现被tsconfig.json监控的文件全部编译刷新。

在tsconfig.json文件中可以通过target字段，设置编译的js文件代码符合es5、es2015、es2016...等版本的语法；还可以通过module字段，设置不同的模块化规范，比如commonjs、none、amd、system、umd、es2015、esnext；还有strict字段可以设置js代码是否为严格模式；esmoduleinterop则控制是否允许es2015模块与commonjs某块相互导入的互操作。