TypeScript 基礎入門（一）

程式碼寫著寫著就懂了發表於2019-01-16
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 -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.*"    ]
  }複製程式碼

來源：https://juejin.im/post/5c3ec9ef6fb9a04a0730a2ef

相關文章