TypeScript 基礎入門（一）

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 -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.*"
    ]
}
複製代碼