使用 Visual Studio Code 搭建 TypeScript 開發環境
簡介
TypeScript 官方網站: http://www.typescriptlang.org/
TypeScript是由微軟Anders Hejlsberg(安德斯·海爾斯伯格)領銜開發的。
(安德斯·海爾斯伯格是Delphi 和 C#之父，Turbo Pascal 編譯器的主要作者，.NET 概念發起人之一，同時也是TypeScript開源項目的重要領導人。他於1996年加入微軟，目前是 C# 語言的首席架構師和 TypeScript 的核心開發者，獲微軟卓越工程師 Distinguished Engineer 和微軟技術院士 Technical Fellow 稱號。)
TypeScript 主要特點包括：
- TypeScript 是微軟推出的開源語言，使用 Apache 授權協議
- TypeScript 是 JavaScript 的超集
- TypeScript 增加了可選類型、類和模塊
- TypeScript 可編譯成可讀的、標準的 JavaScript
- TypeScript 支持開發大規模 JavaScript 應用
- TypeScript 設計用於開發大型應用，並保證編譯後的 JavaScript 代碼兼容性
- TypeScript 擴展了 JavaScript 的語法，因此已有的 JavaScript 代碼可直接與 TypeScript 一起運行無需更改
- TypeScript 文件擴展名是 ts，而 TypeScript 編譯器會編譯成 js 文件
- TypeScript 語法與 JScript .NET 相同
- TypeScript 易學易於理解
準備工作
下載並安裝 nodejs 和 Visual Studio Code 。
安裝Node.js並檢測是否安裝成功
安裝 Node.js，安裝過程基本上是下一步即可完成。
然後在CMD中運行如下命令：node -v 來查詢當前 Node.js 的版本號，輸出版本號後就證明安裝成功。
接着可以輸入命令：npm -v 來查詢當前 npm 工具的版本號。
設置 Node.js 的 npm 安裝 package 的全局路徑（非必須）
npm 安裝工具默認會安裝到C盤。因爲 npmrc 文件中默認的設置爲：prefix=${APPDATA}\npm 。安裝在C盤中，有時可能會因爲系統權限的問題，導致不能正常成功的安裝某些工具，那麼我們就可以先將 npm 安裝的全局路徑自定設置一下。
在 nodejs 的安裝目錄下（即你的 nodejs 安裝後的根目錄）新建兩個目錄：node_global ，node_cache，然後找到 nodejs 目錄下的 node_modules/npm 目錄下名爲 npmrc 或者 .npmrc 文件（爲了安全，我們可以先將該文件複製一個副本出來進行備份），使用文本編輯器打開，修改並新增如下：prefix 和 cache 分別對應之前新建的目錄 node_global 和 node_cahce 。
通過設置後，後續在安裝工具的時候，比如安裝 TypeScript ，最終會安裝到 node_global 中。
設置 Node.js 環境變量
新建一個 NODE_PATH -> NODE_PATH=你自己安裝nodejs的路徑\node_global ，然後在Path下新增 %NODE_PATH% 。
安裝 TypeScript
npm install -g typescript // 安裝
安裝完成後，輸入命令 tsc -v 打印出版本號證明安裝成功，安裝成功後對 TypeScript 進行升級一下，保證安裝的爲最新穩定版。
npm update -g typescript // 升級
安裝 Node 的 .d.ts 庫
npm install --save @types/node
@types 的最初版本是 typings 。是一個用來管理 Typescript 定義的庫。
有關 @type 可以查看這篇文章：JavaScript 和 TypeScript 交叉口 —— 類型定義文件(*.d.ts)
創建項目
創建 ts_demo 項目
- 創建
ts_demo目錄 - 在命令行
cmd下進入ts_demo目錄 - cd
ts_demo - 輸入：
npm init，創建package.json
創建完成後使用 Visual Studio Code 打開 ts_demo 目錄。
創建 tsconfig.json
1.使用命令行自動創建（推薦）
tsc --init
2.手動創建
在 ts_demo 目錄下創建一個名爲 tsconfig.json 的文件，並輸入以下內容
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": true,
"allowJs": true
}
,
"exclude": [
"node_modules"
]
}
- arget：編譯之後生成的JavaScript文件需要遵循的標準。有三個候選項：es3、es5、es2015。
- noImplicitAny：爲false時，如果編譯器無法根據變量的使用來判斷類型時，將用any類型代替。爲true時，將進行強類型檢查，無法推斷類型時，提示錯誤。
- module：遵循的JavaScript模塊規範。主要的候選項有：commonjs、AMD和es6。
- removeComments：編譯生成的JavaScript文件是否移除註釋。
- sourceMap：編譯時是否生成對應的source map文件。這個文件主要用於前端調試。當前端js文件被壓縮引用後，出錯時可藉助同名的source map文件查找源文件中錯誤位置。
- outDir：編譯輸出JavaScript文件存放的文件夾。
- include、exclude：編譯時需要包含/剔除的文件夾。
其他的屬性可以查看自動生成的文件中的註釋
新建 student.ts 文件
class Student {
firstName : string;
lastName : string;
constructor(fiestName : string, lastName : string) {
this.firstName = fiestName;
this.lastName = lastName;
}
greeter() {
return "Hello，您好" + this.firstName + " " + this.lastName;
}
}
var user = new Student("王", "小明");
// document.body.innerHTML = user.greeter();
document.body.innerHTML = user.greeter();
修改啓動源
按F5開始調試會生成： launch.json 。如果沒有生成，點擊下拉框添加配置即可。
用 Visual Studio Code 打開項目的 launch.json 文件，"program" 條目，修改如下：
"program": "${workspaceRoot}/student.js",
創建 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>student</title>
</head>
<body>
<script src="student.js"></script>
</body>
</html>
編譯和運行項目
接下來我們將.ts文件編譯爲.js文件
tsc -w student.ts
編譯完成後，使用瀏覽器打開 index.html 文件。
輸出 Hello，您好王 小明 。
