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官網下載一個最新版本就可以了：https://nodejs.org/zh-cn/ 我這里就不重復描述了。 安裝好后，可以打開命令行工具
node -v
npm -v
如果看到版本號說明已經安裝成功了，看不到版本號就說明你的node.js沒有安裝成功。
3.2. 安裝TypeScript包
npm install typescript -g
tsc --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.*"
]
}