TypeScript - 變數

---

---

根據定義，變數是“記憶體中命名的空間”，用於儲存值。換句話說，它充當程式中值的容器。TypeScript 變數必須遵循 JavaScript 命名規則：

• 變數名可以包含字母和數字。

• 它們不能包含空格和特殊字元，除了下劃線 (_) 和美元符號 ($) 之外。

• 變數名不能以數字開頭。

在使用變數之前必須宣告它。使用var關鍵字宣告變數。

TypeScript 中的變數宣告

在 TypeScript 中宣告變數的型別語法是在變數名後包含一個冒號 (:)，後跟其型別。就像在 JavaScript 中一樣，我們使用var關鍵字宣告變數。

宣告變數時，您有四個選項：

• 在一個語句中宣告其型別和值。

• 宣告其型別但不宣告值。在這種情況下，變數將設定為 undefined。

• 宣告其值但不宣告型別。變數型別將設定為分配的值的資料型別。

• 既不宣告值也不宣告型別。在這種情況下，變數的資料型別將為 any，並將初始化為 undefined。

下表說明了如上所述的變數宣告的有效語法：

示例：TypeScript 中的變數

var name:string = "John"; 
var score1:number = 50;
var score2:number = 42.50
var sum = score1 + score2 
console.log("name"+name) 
console.log("first score: "+score1) 
console.log("second score: "+score2) 
console.log("sum of the scores: "+sum)

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

//Generated by typescript 1.8.10
var name = "John";
var score1 = 50;
var score2 = 42.50;
var sum = score1 + score2;
console.log("name" + name);
console.log("first score: " + score1);
console.log("second score : " + score2);
console.log("sum of the scores: " + sum);

上面程式的輸出如下：

name:John 
first score:50 
second score:42.50 
sum of the scores:92.50

如果我們嘗試將值分配給與之型別不同的變數，TypeScript 編譯器將生成錯誤。因此，TypeScript 遵循強型別。強型別語法確保賦值運算子 (=) 兩側指定的型別相同。這就是以下程式碼會導致編譯錯誤的原因：

var num:number = "hello"     // will result in a compilation error

TypeScript 中的型別斷言

TypeScript 允許將變數從一種型別更改為另一種型別。TypeScript 將此過程稱為型別斷言。語法是在變數或表示式前面放置< >符號並將目標型別放在其中。以下示例解釋了這個概念：

示例

var str = '1' 
var str2:number = <number> <any> str   //str is now of type number 
console.log(typeof(str2))

如果將滑鼠指標懸停在 Visual Studio Code 中的型別斷言語句上，它將顯示變數資料型別的更改。基本上，它允許型別從 S 到 T 的斷言成功，如果 S 是 T 的子型別或 T 是 S 的子型別。

它之所以不稱為“型別轉換”，是因為轉換通常意味著某種執行時支援，而“型別斷言”純粹是編譯時構造，並且是您向編譯器提供提示以說明您希望如何分析程式碼的方式。

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

"use strict";
var str = '1';
var str2 = str; //str is now of type number 
console.log(typeof (str2));

它將產生以下輸出：

string

TypeScript 中的型別推斷

鑑於 TypeScript 是強型別的，此功能是可選的。TypeScript 還鼓勵變數的動態型別。這意味著 TypeScript 鼓勵在沒有型別的情況下宣告變數。在這種情況下，編譯器將根據分配給它的值確定變數的型別。TypeScript 將在程式碼中找到變數的第一次使用，確定它最初設定為的型別，然後在程式碼塊的其餘部分為該變數假定相同的型別。

以下程式碼片段解釋了相同的內容：

示例：型別推斷

var num = 2;    // data type inferred as  number 
console.log("value of num "+num); 
num = "12";
console.log(num);

在上面的程式碼片段中：

• 程式碼聲明瞭一個變數並將其值設定為 2。請注意，變數宣告沒有指定資料型別。因此，程式使用型別推斷來確定變數的資料型別，即它分配變數設定為的第一個值型別。在這種情況下，num設定為數字型別。

• 當代碼嘗試將變數的值設定為字串時。編譯器會丟擲一個錯誤，因為變數的型別已設定為數字。

它將產生以下輸出：

error TS2011: Cannot convert 'string' to 'number'.

TypeScript 變數作用域

變數的作用域指定變數定義的位置。變數在程式中的可用性由其作用域決定。TypeScript 變數可以具有以下作用域：

• 全域性作用域 - 全域性變數在程式設計結構之外宣告。這些變數可以在程式碼中的任何位置訪問。

• 類作用域 - 這些變數也稱為欄位。欄位或類變數在類中但方法之外宣告。可以使用類的物件訪問這些變數。欄位也可以是靜態的。可以使用類名訪問靜態欄位。

• 區域性作用域 - 正如其名稱所示，區域性變數在方法、迴圈等結構中宣告。區域性變數僅在其宣告的結構中可訪問。

以下示例說明了 TypeScript 中的變數作用域。

示例：變數作用域

var global_num = 12          //global variable 
class Numbers { 
   num_val = 13;             //class variable 
   static sval = 10;         //static field 
   
   storeNum():void { 
      var local_num = 14;    //local variable 
   } 
} 
console.log("Global num: "+global_num)  
console.log(Numbers.sval)   //static variable  
var obj = new Numbers(); 
console.log("Global num: "+obj.num_val) 

在轉譯時，將生成以下 JavaScript 程式碼：

var global_num = 12;              //global variable 
var Numbers = (function () {
   function Numbers() {
      this.num_val = 13;          //class variable 
   }
   Numbers.prototype.storeNum = function () {
      var local_num = 14;        //local variable 
   };
   Numbers.sval = 10;            //static field 
   return Numbers;
}());

console.log("Global num: " + global_num);
console.log(Numbers.sval);       //static variable  

var obj = new Numbers();
console.log("Global num: " + obj.num_val);

它將產生以下輸出：

Global num: 12
10
Global num: 13

如果嘗試在方法外部訪問區域性變數，則會導致編譯錯誤。

error TS2095: Could not find symbol 'local_num'.