1.3　編寫第一個TypeScript程序：Hello World

搭建好TypeScript開發環境后，你就開始編寫第一個TypeScript程序。本節將演示如何用TypeScript編寫程序并進行靜態檢查。

1.3.1　編寫并運行TypeScript程序

首先，創建一個名為HelloWorld.ts的文件，代碼如下。

let greeting:string = "Hello World!";
console.log(greeting);

這段代碼第一眼看上去和JavaScript差不多，但仔細一看，它比JavaScript多了“:string”語句，表示將變量greeting定義為string類型。

TypeScript代碼需要先通過TypeScript編譯器編譯成JavaScript代碼，然后才能在各個瀏覽器或平臺上運行。TypeScript代碼的編譯過程如圖1-10所示。

圖1-10　TypeScript代碼的編譯過程

接下來，執行以下命令，編譯示例代碼。

$ tsc d:\TSProject\HelloWorld.ts

執行命令后，在HelloWorld.ts所在文件夾中找到編譯好的JavaScript文件HelloWorld.js，打開該文件，文件內容如下。

var greeting = "Hello World!";
console.log(greeting);

接下來，將這段JavaScript代碼通過<script>標簽嵌入HTML，以便在瀏覽器中運行；你也可以通過Node.js命令直接運行。在本例中，使用Node.js命令直接運行，命令如下。

$ node d:\TSProject\HelloWorld.js

執行結果如下。

> Hello World!

1.3.2　靜態檢查和智能提示

通過剛才的示例，我們已經了解了編寫TypeScript程序的基本過程，但這并不足以體現TypeScript的優勢。

接下來，修改HelloWorld.ts文件，修改后的文件內容如下。

let greeting:string = "Hello World!";
greeting = 123
console.log(greeting)

在本例中，我們將值123賦給了剛剛定義的string類型的變量greeting。

由于開發人員忘記了greeting是string類型的變量，因此誤用了變量，改變了原來的變量類型。如果使用的是JavaScript，JavaScript并不會阻止這樣的用法，代碼依然可以運行，至于是否有錯，需要人為判斷。因此，這個問題很可能潛伏很久才被發現。

但如果使用TypeScript，在代碼剛寫下的一瞬間，Visual Studio Code就會檢測出這個問題，并顯示在問題窗口中，如圖1-11所示。

圖1-11　錯誤提示

當然，有時候并沒有使用Visual Studio Code，但TypeScript在運行前會經歷編譯環節，因此也能在運行前檢測出該問題。此時，執行如下tsc命令。

$ tsc D:\TSProject\HelloWorld.ts

命令執行結果如圖1-12所示，提示編譯錯誤。

圖1-12　提示編譯錯誤

這個例子雖然簡單，但想必讀者從中已經能看出TypeScript的巨大優勢了。

由于TypeScript需要指定變量類型，因此當變量類型確定時，也能夠確定針對該變量類型的所有操作，這為智能提示打下了基礎。如果使用Visual Studio Code作為IDE，每次在變量后鍵入句號時，都會加載出所有針對該變量的操作以供選擇，如圖1-13所示，這將大幅提高開發效率。

圖1-13　智能提示

第一個TypeScript程序示例到這里就結束了，后面將會詳細介紹TypeScript的語法和特性。

讀者服務：

微信掃碼關注【異步社區】微信公眾號，回復“e60557”獲取本書配套資源以及異步社區15天VIP會員卡，近千本電子書免費暢讀。