配置手动编译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某块相互导入的互操作。 |
|
收藏
淘帖
踩
