配置TypeScript工作环境

一、TypeScript入门学习引言

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

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

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

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

第一步：安装nodejs环境；

第二部：安装TypeScript插件：

npm install -g typescript

创建一个工作区间：

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

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

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
    alert(greeter.greet());
}

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某块相互导入的互操作。

链接: https://www.fly63.com/article/detial/6180