1.TypeScript是什麼？
TypeScript 是 JavaScript 的一個超集，TypeScript 在 JavaScript 的基礎上新增了可選的 靜態型別 和基於 類 的物件導向程式設計。
2.為什麼要用 TypeScript ?
針對這個問題我們可以從兩個方面來分析：
2.1 用TypeScript的目的是什麼 ?
TypeScript 最大的目的是讓程式設計師更具創造性，提高生產力，它將極大增強 JavaScript 編寫應用的開發和除錯環節，讓 JavaScript 能夠方便於編寫大型應用和進行多人協作。
2.2 TypeScript 和 JavaScript 的對比
TypeScript是一個應用程式級的JavaScript開發語言。（這也表示 TypeScript 比較牛X,可以開發大型應用，或者說更適合大型應用。）TypeScript是JavaScritpt的超集，可以編譯成純JavaScript。比較像Less和Sass，我們可以用更好的程式碼編寫方式來進行編寫，最後還是友好生成原生的JavaScript語言。TypeScript跨瀏覽器、跨作業系統、跨主機、且開源。由於最後它編譯成了JavaScript所以只要能執行JS的地方，都可以執行我們寫的程式，設定在node.js裡。TypeScript始於JavaScript, 終於JavaScript。遵循JavaScript的語法和語義，所以對於我們前端從業者來說，學習起來的的心用手，並沒有太大的難度。TypeScript可以重用JavaScript程式碼，呼叫流行的JavaScript庫。TypeScript提供了類、模組和介面，更易於構建元件和維護。
3.開發環境的安裝
3.1. 安裝Node.js
安裝Node.js非常簡單，只要到Node官網下載一個最新版本就可以了：nodejs.org/zh-cn/ 我這裡就不重複描述了。 安裝好後，可以開啟命令列工具
node -vnpm -v複製程式碼如果看到版本號說明已經安裝成功了，看不到版本號就說明你的node.js沒有安裝成功。
3.2. 安裝TypeScript包
npm install typescript -gtsc --version複製程式碼同樣如果安裝成功後，會出現版本號。
3.3 構建你的第一個TypeScript檔案
1.初始化專案：
進入你的變成資料夾後，可以使用 npm init -y來初始化專案，生成 package.json 檔案。（這裡使用的是預設配置，如果在真實專案中需要重新進行配置）
2. 建立 tsconfig.json檔案
在終端中輸入tsc --init：它是一個TypeScript專案的配置檔案，可以通過讀取它來設定TypeScript編譯器的編譯引數。
編譯選項
你可以通過 compilerOptions 來定製你的編譯選項：
{
"compilerOptions": {
/* 基本選項 */ "target": "es5", // 指定 ECMAScript 目標版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT' "module": "commonjs", // 指定使用模組: 'commonjs', 'amd', 'system', 'umd' or 'es2015' "lib": [], // 指定要包含在編譯中的庫檔案 "allowJs": true, // 允許編譯 javascript 檔案 "checkJs": true, // 報告 javascript 檔案中的錯誤 "jsx": "preserve", // 指定 jsx 程式碼的生成: 'preserve', 'react-native', or 'react' "declaration": true, // 生成相應的 '.d.ts' 檔案 "sourceMap": true, // 生成相應的 '.map' 檔案 "outFile": "./", // 將輸出檔案合併為一個檔案 "outDir": "./", // 指定輸出目錄 "rootDir": "./", // 用來控制輸出目錄結構 --outDir. "removeComments": true, // 刪除編譯後的所有的註釋 "noEmit": true, // 不生成輸出檔案 "importHelpers": true, // 從 tslib 匯入輔助工具函式 "isolatedModules": true, // 將每個檔案做為單獨的模組 （與 'ts.transpileModule' 類似）. /* 嚴格的型別檢查選項 */ "strict": true, // 啟用所有嚴格型別檢查選項 "noImplicitAny": true, // 在表示式和宣告上有隱含的 any型別時報錯 "strictNullChecks": true, // 啟用嚴格的 null 檢查 "noImplicitThis": true, // 當 this 表示式值為 any 型別的時候，生成一個錯誤 "alwaysStrict": true, // 以嚴格模式檢查每個模組，並在每個檔案里加入 'use strict' /* 額外的檢查 */ "noUnusedLocals": true, // 有未使用的變數時，丟擲錯誤 "noUnusedParameters": true, // 有未使用的引數時，丟擲錯誤 "noImplicitReturns": true, // 並不是所有函式裡的程式碼都有返回值時，丟擲錯誤 "noFallthroughCasesInSwitch": true, // 報告switch語句的fallthrough錯誤。（即，不允許switch的case語句貫穿） /* 模組解析選項 */ "moduleResolution": "node", // 選擇模組解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6) "baseUrl": "./", // 用於解析非相對模組名稱的基目錄 "paths": {
}, // 模組名到基於 baseUrl 的路徑對映的列表 "rootDirs": [], // 根資料夾列表，其組合內容表示專案執行時的結構內容 "typeRoots": [], // 包含型別宣告的檔案列表 "types": [], // 需要包含的型別宣告檔名列表 "allowSyntheticDefaultImports": true, // 允許從沒有設定預設匯出的模組中預設匯入。 /* Source Map Options */ "sourceRoot": "./", // 指定偵錯程式應該找到 TypeScript 檔案而不是原始檔的位置 "mapRoot": "./", // 指定偵錯程式應該找到對映檔案而不是生成檔案的位置 "inlineSourceMap": true, // 生成單個 soucemaps 檔案，而不是將 sourcemaps 生成不同的檔案 "inlineSources": true, // 將程式碼與 sourcemaps 生成到一個檔案中，要求同時設定了 --inlineSourceMap 或 --sourceMap 屬性 /* 其他選項 */ "experimentalDecorators": true, // 啟用裝飾器 "emitDecoratorMetadata": true // 為裝飾器提供後設資料的支援
}
}複製程式碼除了上面那些編譯選項你還可以指定需要編譯的檔案:
{
"files": [ "./some/file.ts" ]
}複製程式碼或者，你可以使用 include 和 exclude 選項來指定需要包含的檔案，和排除的檔案：
{
"include": [ "./folder" ], "exclude": [ "./folder/**/*.spec.ts", "./folder/someSubFolder" ]
}複製程式碼==注意== ：使用 globs: / （一個例項用法：some/folder/*/*）意味著匹配所有的資料夾和所有檔案（副檔名為
.ts/.tsx）,當開啟了allowJs: true選項時，副檔名可以是 (.js/.jsx）。
3.安裝@types/node
使用
npm install @types/node --dev-save複製程式碼進行安裝。這個主要是解決模組的宣告檔案問題。
4.建立一個 greeter.ts 檔案
function greeter(person) {
return "Hello, " + person;
}let user = "Jane User";
document.body.innerHTML = greeter(user);
複製程式碼5.編譯程式碼
好的IDE支援對 TypeScript的即時編譯。但是，如果你想使用tsconfig.json時命令列手動執行TypeScript編譯器，你可以通過以下方式:
- 執行
tsc，它會在當前目錄或者是父級目錄尋找tsconfig.json檔案。 - 執行
tsc -p ./greeter.ts.當然，這個路徑可以是絕對路徑，也可以是相對於當前目錄的相對路徑。 - 使用
tsc -w來啟用TypeScript編譯器的觀測模式，在監測到檔案改動之後，它將重新編譯。
6.制定編譯的檔案
你也可以顯示指定需要編譯的檔案：
{
"files":[ "./project/file.ts" ]
}複製程式碼或者，你可以使用 include 和 exculde選項來指定需要包含的檔案和排除的檔案:
{
"include":[ "./folder" ], "exclude":[ "node_modules", "webpack.*" ]
}複製程式碼