TypeScript - 基本語法

---

---

語法定義了一套編寫程式的規則。每種語言規範都定義了自己的語法。TypeScript 程式由以下部分組成：

• 模組
• 函式
• 變數
• 語句和表示式
• 註釋

你的第一個 TypeScript 程式碼

讓我們從傳統的“Hello World”示例開始：

var message:string = "Hello World" 
console.log(message)

編譯後，它將生成以下 JavaScript 程式碼。

var message = "Hello World";
console.log(message);

• 第 1 行聲明瞭一個名為 message 的變數。變數是程式中用於儲存值的機制。

• 第 2 行將變數的值列印到提示符。這裡，console 指的是終端視窗。log() 函式用於在螢幕上顯示文字。

編譯和執行 TypeScript 程式

讓我們看看如何使用 Visual Studio Code 編譯和執行 TypeScript 程式。請按照以下步驟操作：

步驟 1 - 將檔案儲存為 .ts 副檔名。我們將檔案儲存為 Test.ts。程式碼編輯器會在您儲存檔案時標記程式碼中的錯誤（如有）。

步驟 2 - 在 VS Code 的資源管理器窗格中，右鍵單擊“工作檔案”選項下的 TypeScript 檔案。選擇“在命令提示符中開啟”選項。

步驟 3 - 要編譯檔案，請在終端視窗中使用以下命令。

tsc Test.ts

步驟 4 - 檔案編譯為 Test.js。要執行編寫的程式，請在終端中鍵入以下內容。

node Test.js

編譯器標誌

編譯器標誌使您能夠在編譯期間更改編譯器的行為。每個編譯器標誌都公開一個設定，允許您更改編譯器的行為。

下表列出了與 TSC 編譯器關聯的一些常用標誌。典型的命令列用法使用某些或所有開關。

注意 - 可以一次編譯多個檔案。

tsc file1.ts, file2.ts, file3.ts

TypeScript 中的識別符號

識別符號是賦予程式中元素（如變數、函式等）的名稱。識別符號的規則如下：

• 識別符號可以包含字元和數字。但是，識別符號不能以數字開頭。

• 識別符號不能包含特殊符號，下劃線 (_) 或美元符號 ($) 除外。

• 識別符號不能是關鍵字。

• 它們必須是唯一的。

• 識別符號區分大小寫。

• 識別符號不能包含空格。

下表列出了一些有效和無效識別符號的示例：

TypeScript ─ 關鍵字

關鍵字在語言環境中具有特殊含義。下表列出了一些 TypeScript 關鍵字。

空格和換行符

TypeScript 忽略程式中出現的空格、製表符和換行符。您可以在程式中自由使用空格、製表符和換行符，並且可以自由地以整潔一致的方式格式化和縮排程式，從而使程式碼易於閱讀和理解。

TypeScript 區分大小寫

TypeScript 區分大小寫。這意味著 TypeScript 區分大寫和小寫字元。

分號是可選的

每行指令稱為語句。TypeScript 中的分號是可選的。

示例

console.log("hello world")
console.log("We are learning TypeScript")

單行可以包含多個語句。但是，這些語句必須用分號分隔。

TypeScript 中的註釋

註釋是提高程式可讀性的一種方法。註釋可用於包含有關程式的其他資訊，例如程式碼作者、有關函式/結構的提示等。編譯器會忽略註釋。

TypeScript 支援以下型別的註釋：

• 單行註釋 ( // ) - // 和行尾之間的任何文字都被視為註釋

• 多行註釋 (/* */) - 這些註釋可以跨越多行。

示例

//this is single line comment 
 
/* This is a  
   Multi-line comment 
*/

TypeScript 和麵向物件程式設計

TypeScript 是面向物件的 JavaScript。面向物件程式設計是一種遵循現實世界建模的軟體開發範例。面向物件程式設計將程式視為物件的集合，這些物件透過稱為方法的機制相互通訊。TypeScript 也支援這些面向物件的元件。

• 物件 - 物件是任何實體的即時表示。根據 Grady Brooch 的說法，每個物件必須具有三個特徵：

  • 狀態 - 由物件的屬性描述

  • 行為 - 描述物件的行為方式

  • 標識 - 一個唯一值，將物件與一組類似的物件區分開來。

• 類 - 在 OOP 中，類是建立物件的藍圖。類封裝了物件的資料。

• 方法 - 方法促進物件之間的通訊。

示例：TypeScript 和麵向物件程式設計

class Greeting { 
   greet():void { 
      console.log("Hello World!!!") 
   } 
} 
var obj = new Greeting(); 
obj.greet();

上面的示例定義了一個類 Greeting。該類具有一個方法 greet()。該方法在終端上列印字串“Hello World”。new 關鍵字建立類的物件 (obj)。該物件呼叫方法 greet()。

編譯後，它將生成以下 JavaScript 程式碼。

var Greeting = (function () {
   function Greeting() {
   }
   Greeting.prototype.greet = function () {
      console.log("Hello World!!!");
   };
	return Greeting;
}());

var obj = new Greeting();
obj.greet()

上面程式的輸出如下：

Hello World!!!