TypeScript是微軟公司推出的開源的類型化腳本語言，目的是用于為弱類型的javaScript提供強類型的識別和感知功能，同時它提供了類、接口、繼承等相關在javaScript中不容易實現(xiàn)的功能，語法類似C#，簡潔易懂，是構建大中型Web應用的一門非常理想的語言。

ü 通過這篇文章，你可以學到：

認識WisOne IDE

在WisOne IDE中編寫TypeScript代碼

在屬性面板更改控件的屬性

在WisOne IDE中運行TypeScript代碼

本文源代碼鏈接：http://www.wisone.com/app/sample/helloworld.frm

盡管微軟在Visual Studio 2012中通過插件包的方式可以使用TypeScript的智能提示和編譯功能，但是對于很多開源世界而來的開發(fā)人員來說，裝個數(shù)G的Visual Studio來開發(fā)TypeScript有些大材小用，還好現(xiàn)在互聯(lián)網(wǎng)上有一些專門用于輔助TypeScript開發(fā)的平臺，WisOne智云平臺就是其中具有代表性的一個Web平臺。

通過如下的網(wǎng)址進入智云平臺：

http://www.wisone.com/ide

WisOne IDE網(wǎng)頁呈現(xiàn)了一個基于Web的IDE集成化開發(fā)環(huán)境，它使用TypeScript作為開發(fā)語言，并提供了可視化的開發(fā)與設計工具，如圖1.1所示。

WisOne目前還只是預覽階段，但是隨著WisOne團隊的不斷升級和完善，相信不久的將來，我們就可以在WisOne上使用TypeScript來開發(fā)專業(yè)性的Web應用了。

Example 1：Hello Word!

接下來讓我們來了解一下如何在WisOne平臺上學習TypeScript，就從經(jīng)典的Hello Word開始，步驟如下所示：

（1）從工具欄上拖一個按鈕，如圖1.2所示。

（2）選中按鈕，可以在屬性面板中設置按鈕的屬性信息，是不是很像Visual Studio或者是Delphi等集成化開發(fā)環(huán)境。在屬性面板中，設置Caption屬性為“Hello World”，以更改按鈕的顯示文字。

（3）雙擊按鈕，將進入到WisOne的代碼編輯環(huán)境，可以看到WisOne自動產(chǎn)生了單擊事件代碼存根，在空白處輸入代碼即可，如圖1.3所示。

由圖中可以發(fā)現(xiàn)，WisOne的代碼編輯器有智能提示功能，這對于初學TypeScript的人來說，實在太妙了，不用安裝龐大的Visual Studio，也可以直接玩轉(zhuǎn)TypeScript的語法提示。

（4）在代碼存根位置輸入如下的代碼：

button1Click(sender: Core.Classes.TComponent){ //我的第一行TypeScript代碼 this.button1.caption="你好，世界"; }

?

這行代碼用于更改按鈕的標題，可以看到，WisOne的IDE對TypeScript進行了很好的整合，這讓整個Web IDE特別的具有Windows版開發(fā)工具的味道。

好了，已經(jīng)迫不急待的要運行代碼了，單擊WisOne IDE左上角的“運行”按鈕，如圖1.4所示。

可以看到WisOne在一個新的頁面上開啟了我們的窗口，單擊按鈕，是不是發(fā)現(xiàn)按鈕的標題已經(jīng)發(fā)生了改變，如圖1.5所示。

Example 2：使用TypeScript類型

接下來看一下TypeScript中如何使用類型，javaScript是不需要顯示定義類型的，為變量的賦值決定了其類型，這種弱類型的語法極不利于大型可擴展的應用開發(fā)，而TypeScript提出了類型的概念，在定義變量時可以指定其類型，這個示例中向窗口中再次添加一個按鈕，然后編寫如下的示例代碼：

module Unit1{//定義一個函數(shù)，可以看到TypeScript的強類型代碼 function Greeter(greeting: string) {this.greeting = greeting;}export class TForm1 extends Core.Forms.TForm{btnType: Core.StdCtrls.TButton;btnTypeClick(sender: Core.Classes.TComponent){//構造一個Greeter類的實例var greeter = new Greeter("Hello world");//訪問Greeter類的屬性this.btnType.caption=greeter.greeting;}}}

?

在Unit1單元名稱下面，定義了一個函數(shù)Greeter，可以看到這個函數(shù)的形式參數(shù)是string類型的值，在函數(shù)體內(nèi)定義了一個屬性。

在按鈕的單擊事件處理代碼中，首先實例化了Greeter類的實例，然后調(diào)用其屬性，如果為Greeter的構造函數(shù)傳遞一個非字符串類型的值，WisOne將會拋出錯誤提示，如圖1.6所示：

可以看到，WisOne在編譯TypeScript時，將錯誤提示顯示在調(diào)試面板中，非常便于我們了解其中的語法錯誤，TypeScript提供了類型功能，這對于開發(fā)大型可擴展的應用來說，確實是一個必要的功能。

將123456刪除，替換為一個字符串，然后運行程序，這次成功運行通過，單擊按鈕將顯示Greeter中的屬性值，如圖1.7所示。

小結(jié)

本文介紹了在WisOne平臺上開發(fā)TypeScript的基礎知識，討論了WisOne IDE的組成，以及如何使用WisOne編寫TypeScript代碼，通過一個經(jīng)典的“Hello World”來演示如何在WisOne平臺上編寫TypeScript代碼。最后通過一個類型化的TypeScript示例，介紹了WisOne平臺的調(diào)試功能。

關于WisOne平臺的更多信息，可以通過如下的網(wǎng)址獲取：

http://www.wisone.com/

轉(zhuǎn)載于:https://www.cnblogs.com/lincats/p/3328780.html

總結(jié)

以上是生活随笔為你收集整理的在WisOne平台上学习TypeScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。