typescript-介紹&安裝&開發工具

引言：

　　既然有了JavaScript，爲何還須要typescript呢？二者有什麼不一樣呢？

一：介紹

一：typeScript

1：JavaScript

　　JavaScript的產生歷程這裏就不詳細說了，咱們說說關鍵點。

　　1999年12月ECMAScript發佈第三標準版本後，接下來10年就不行了。直到2005年藉助ajax，JavaScript得以復興。

　　2009年12月ECMAScript 5發佈。隨後2012年，開始流行。

　　2015年，ECMAScript 6發佈。

2：typescript出現的緣由

　　（1）JavaScript大型web應用容易出現失控，難以駕馭。

　　（2）而相似 CoffeeScript 和 Script# 語言難以使用JavaScript的語言特性。

　　（3）微軟認爲JavaScript 只是一門腳本語言，設計理念簡單，缺少對類和模塊的支持，並不是真正用於大型web應用。

3：typescript 的特色

　　（1）免費開源

　　（2）基於ECMAScript進行擴展，是 JavaScript的超集。

　　（3）添加可選靜態類型、類、模塊

　　（4）可編譯爲 JavaScript

　　（5）跨平臺，支持全部瀏覽器、主機和操做系統。

下圖能夠看到typescript與es五、es6的關係

　　

二：環境準備

1：安裝node.js

請先安裝nodejs，配置淘寶源

　　前端-Node.js-解釋器軟件包的安裝與介紹　　

　　淘寶源配置

2：npm

　　node.js的包管理工具，不單單承接Node生態的包管理，也承接了JavaScript的包管理工做。安裝node.js時，已經把npm捆綁安裝了。

　　npm有三個不一樣部分組成：網站、註冊表、CLI。網站是用戶發現軟件的主要工具。註冊表是一個關於軟件包的大型數據庫，而CLI則告訴開發者如何在註冊表上發佈軟件包或下載軟件包。

3：yarn

　　yarn是Facebook、Google、Exponent和Tilde 共同開發的一款 新JavaScript 包管理工具。yarn並無試圖取代npm，yarn一樣是從npm註冊源獲取模塊的CLI客戶端。它存在的目的是爲了解決npm面臨的少數問題。好比依賴版本的鎖定、並行安裝以及文案輸出等。固然npm自己也在積極解決這些問題。

　　安裝：npm install -g yarn  （推薦使用Yarn官方推薦方式安裝）

4：typescript 的安裝

　　npm install -g typescript

　　npm install -g ts-node        （ts-node：typescript編譯過程，提供直接運行typescript代碼的能力）

 

5：Visual  Studio Code 工具的安裝

　　這款IDE 很是適合 typescript

 

三：開發工具的配置

1：ts文件的使用--手動編譯

寫一個ts文件，須要編譯成js文件使用

E:\ruby\代碼>tsc hello.ts

　　

2：開發工具VScode --自動編譯ts文件

第一步：建立tsconfig.json文件（命令：tsc --init生成配置文件）

先打開對應的文件夾

　　

在對應的文件夾中生成json配置文件

　　

修改配置文件

　　

 

第二步：菜單：任務--》運行任務，點擊tsc監視 -tsconfig.json。而後就能夠自動編譯生成js代碼

 　　

 

若是你想執行代碼：

 　　

 

3：開發工具Hbuild --自動編譯ts文件

安裝插件

　　

　　

　　

 配置

 　　

 

 　　

 

---

 

資料：

　　視頻教程

　　https://ts.xcatliu.com/（不錯的網絡書籍）

　　W3school

　　菜鳥教程

　　官網