最近因為項目的需要開始着手調查一個叫做typescript的東西，通過翻閱一些github上的源碼，一些論壇的文檔，漸漸的有所了解。無論去學習研究哪種框架或者哪種語言，我們首先要知道的應該是如何去構建開發環境。
實踐才能多出錯多了解嘛，這就是所謂的實踐出真知。廢話不多言，我們先來看看typescript是如何被介紹的。
通過介紹我們了解到typescript對javascript有很好的支持，屬於javascript的一個超集。屬於把javascript開發集成為真正的面向對象的，強類型的框架，使前台的開發可以像后台開發一樣，模塊化，便利化，大大的提高了開發的效率。
首先我們看看開發typescript需要哪些東西？
- 首先我們需要安裝Node.js（Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。）http://nodejs.cn/官方網站上可以下載自己的電腦對應的版本。
- 其次我們需要nodejs的版本管理工具npm,安裝完成后npm install -g typescript通過這個命令就可以下載安裝TypeScript Compiler了。
- 更新TypeScript Compiler
- 輸入指令：npm update -g typescript
- 查看版本：tsc -v
- 安裝Visual Studio Code 開發工具
- Visual Studio Code (VS Code) 是微軟開發的、免費開源、功能強大的輕量級的IDE。
- 運行環境：Windows 7 (64位)
個人覺得學習typescript最快最好的方式是親自實驗，通過github網站去下載基本的原型框架，通過本地搭建的環境試着去運行別人的demo。
下面我們簡單的介紹一下，在本地該如何去搭建運行的環境。
第一步，在本地新建一個文件夾，暫且命名為typescript。通過命令行進入這個文件夾，然后執行 tsc --init命令進行基本的初期化，在本地會生成一個叫做tscconfig.json的配置文件。
第二步，通過vscode工具打開當前目錄。
第三步，我們開始編譯構建的環境，Ctrl+Shift+B。然后如下圖所示。
然后我們選擇構成管理，會生成新的編譯文件。暫時先不上圖了。接下來我們試着去寫我們第一個typescript文件。還是學習代碼的老規則暫且叫做helloword.ts
class Hello { firstName : string; lastName : string; constructor(fiestName : string, lastName : string) { this.firstName = fiestName; this.lastName = lastName; } greeter() { return "歡迎來到typescript的世界，hello" + this.firstName + " " + this.lastName; } } var user = new Hello("王", "小二"); document.body.innerHTML = user.greeter();
代碼編寫完成后，我們需要對它進行編譯的工作，還是Ctrl+Shift+B，然后你會發現原來的目錄下多個一個叫做helloword.js的文件代碼如下：
var Hello = (function () { function Hello(fiestName, lastName) { this.firstName = fiestName; this.lastName = lastName; } Hello.prototype.greeter = function () { return "歡迎來到typescript的世界，hello" + this.firstName + " " + this.lastName; }; return Hello; }()); var user = new Hello("王", "小二"); document.body.innerHTML = user.greeter();
其實我們正真的引用是叫做js的這個文件，而不是ts本身。當我們編譯完成后我們還需要一個頁面來測試我們的代碼是不是可以正常的顯示，因此我們新建了一個叫做index.html的文件。代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Word</title> </head> <body> <script src="helloword.js"></script> </body> </html>
到這個時候目錄的基本demo也算是做成了。結構如下所示：
到此我們第一個typescript項目應就可以正常的跑起來了，下面是見證奇跡的時刻。
