title: '前端開發系列040-基礎篇之TypeScript簡單介紹'
tags:
  - javaScript系列
  - TypeScript系列

categories: []
date: 2017-11-12 18:05:13

一、TypeScript語言簡單說明

簡單說明

TypeScript 是微軟2012年推出的一種程式語言，屬於 JavaScript 的超集，可以編譯為 JavaScript 執行。它最大特點是強大的型別系統和對ES6的支援，TypeScript託管於GitHub上面。

TypeScript程式碼，通過編譯可以轉換為純正的 JavaScript程式碼，且編譯出來的 JavaScript程式碼能夠執行在任何瀏覽器上。TypeScript 的編譯工具也可以執行在任何伺服器和任何系統上。

設計目標

TypeScript從一開始就提出了自己的設計目標，主要如下：

• 遵循當前以及未來出現的ECMAScript規範。
• 為大型專案提供構建機制（通過Class 、介面和模組等支撐）。
• 相容現存的JavaScript程式碼，即任何合法的JavaScript程式都是合法的typeScript程式。
• 對於發行版本的程式碼沒有執行開銷。（使用過程可以簡單劃分為程式設計階段和執行階段）。
• 成為跨平臺的開發工具，TypeScript使用Apache作為開源協議，且能夠在所有主流的作業系統上安裝和執行。

TypeScript的優勢

❏ 擁有活躍的社群支援和生態

❏ 增加了程式碼的可讀性和可維護性

❏ 擁抱 ES6 規範，也支援ES7 草案的規範

❏ TypeScript本身非常包容，相容所有現行的JavaScript程式碼

TypeScript的劣勢

❏ 短期投入到工作可能增加開發成本

❏ 整合到自動構建流程中需要額外的工作量

❏ 學習需要成本，需要理解介面、Class、泛型等知識

關於TypeScript更多資訊，請參考TypeScript官網和TypeScript中文網站或TypeScript Github託管倉庫。

二、開發環境和工具支援

命令列工具

安裝命令：$ npm install -g typescript

-g表示全域性安裝，上面的命令執行後會在全域性環境下安裝 tsc 命令。

檢視版本資訊命令：$ tsc --version

可以通過$ tsc --help來檢視tsc使用幫助，通過$ tsc --version命令來檢視tsc版本驗證是否安裝成功，當前最新的版本為Version 2.9.1，安裝成功後我們就可以在任何地方來執行 tsc 命令了。

我們可以通過在命令列中輸入$ tsc xxx.ts命令來把檔案編譯為JavaScript檔案，上述命令中xxx為對應檔案的名稱，編譯完成後將得到xxx.js檔案。

編輯器使用

主流的編輯器都支援 TypeScript。下面列出推薦的編輯器（點選獲取編輯器或IDE對TypeScript的支援）

Atom 21世紀黑客文字編輯器（擁有眾多強大外掛）

WebStorm 強大的前端開發編輯器

Visual Studio Code 內建了TypeScript支援，且本身也由TypeScript實現。

三、TypeScript元件

TypeScript語言內部被劃分為三層，每層又被一次劃分為子層或者是元件。

TypeScript語言內部的每一層都有自己不同的用途。

語言層：實現所有TypeScript的語言特性。
編譯層：執行編譯和型別檢查操作，並把程式碼轉換為JavaScript。
語言服務層：生成資訊以幫助編輯器或其它開發工具提供更好的輔助特性。