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