TypeScript 變量

2021-07-08 11:34 更新

根據(jù)定義,變量是“內(nèi)存中的命名空間”,用于存儲(chǔ)值。換句話說(shuō),它充當(dāng)程序中值的容器。TypeScript 變量必須遵循如下的 JavaScript 命名規(guī)則:

  • 變量名稱可以包含字母和數(shù)字。

  • 它們不能包含空格和特殊字符,除了下劃線(_)和美元($)符號(hào)。

  • 變量名不能以數(shù)字作為開頭。

在使用變量之前必須先聲明變量,使用 var 關(guān)鍵字聲明變量。

TypeScript中的變量聲明

在 TypeScript 中聲明變量的類型語(yǔ)法是在變量名后包含冒號(hào)(:),然后跟上類型。就像在 JavaScript 中,我們使用 var 關(guān)鍵字來(lái)聲明變量。

當(dāng)你聲明一個(gè)變量,你有四個(gè)選項(xiàng):

  • 在一個(gè)語(yǔ)句中聲明變量的類型和值。

聲明類型
  • 聲明變量的類型,但是不聲明值。在這種情況下,該變量將被設(shè)置為 undefined。

未定義
  • 聲明它的值,但是不聲明類型。變量類型將被設(shè)置為 any。

任何
  • 既不聲明值也不聲明類型。在這種情況下,變量的數(shù)據(jù)類型將為 any,并將初始化為 undefined。

任何和未定義

下表說(shuō)明了如上所述的變量聲明的有效語(yǔ)法:

序號(hào) 變量聲明語(yǔ)法和說(shuō)明
1

var name:string=“mary

該變量存儲(chǔ) string 類型的值

2

var name:string;

該變量是一個(gè) string 變量。默認(rèn)情況下,變量的值設(shè)置為 undefined

3

var name=“mary

變量的類型是從值的數(shù)據(jù)類型推斷出來(lái)的。這里,變量是 string 類型

4

var name;

變量的數(shù)據(jù)類型是 any。默認(rèn)情況下,它的值設(shè)置為 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)

在編譯時(shí),它會(huì)生成以下 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.5 
sum of the scores:92.5

如果我們?cè)噲D將一個(gè)值分配給不同類型的變量,TypeScript 編譯器會(huì)產(chǎn)生錯(cuò)誤。因此,TypeScript 遵循強(qiáng)類型,強(qiáng)類型語(yǔ)法可確保在賦值運(yùn)算符 (=) 的任一側(cè)指定的類型是相同的。這就是下面的代碼會(huì)導(dǎo)致編譯錯(cuò)誤的原因:

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

TypeScript類型斷言

TypeScript 允許將變量從一種類型更改為另一種類型。TypeScript 將此過(guò)程稱為類型斷言(Type Assertion)。語(yǔ)法是將目標(biāo)類型放在<>符號(hào)之間,并將其放在變量或表達(dá)式的前面。下面的示例解釋了這個(gè)概念:

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

如果你將鼠標(biāo)指針懸停在 Visual Studio 代碼中的類型斷言語(yǔ)句上,它將顯示變量數(shù)據(jù)類型的更改?;旧希绻?S 是 T 的一個(gè)子類型,或者 T 是 S 的一個(gè)子類型,它允許從類型 S 到 T 的斷言成功。

為什么它不叫“類型轉(zhuǎn)換”呢?一般轉(zhuǎn)換意味著某種運(yùn)行時(shí)的支持,而“類型斷言”純粹是一個(gè)編譯時(shí)構(gòu)造,是一種向編譯器提供有關(guān)如何分析代碼的提示方法。

在編譯時(shí),它會(huì)生成以下 JavaScript 代碼:

//Generated by typescript 1.8.10
var str = '1';
var str2 = str;     //str is now of type number
console.log(str2);

它會(huì)產(chǎn)生下面的輸出:

1

TypeScript中的類型推論

Typescript 是強(qiáng)類型的,這個(gè)特性是可選的。TypeScript 也支持變量的動(dòng)態(tài)類型。這意味著,在 TypeScript 支持聲明一個(gè)沒有類型的變量。在這樣的情況下,編譯器會(huì)根據(jù)分配給它的值確定變量的類型。TypeScript 將在代碼中找到變量的第一個(gè)用法,以確定它最初設(shè)置的類型,然后在代碼塊的其余部分中為該變量假定相同的類型。

下面的代碼片段解釋了上述概念:

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

在上面的代碼片段中:

  • 該代碼聲明一個(gè)變量并將其值設(shè)置為2。注意:變量聲明并沒有指定數(shù)據(jù)類型。因此,該程序使用類型推論來(lái)確定變量的數(shù)據(jù)類型,即,它分配該變量被設(shè)置的第一個(gè)值的類型。在這種情況下,num 被設(shè)置為類型 number。

  • 當(dāng)代碼試圖將變量的值設(shè)置為 string 時(shí),編譯器將會(huì)拋出錯(cuò)誤,因?yàn)樽兞康念愋鸵言O(shè)置為 number。

它會(huì)產(chǎn)生如下的輸出:

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

TypeScript變量的作用域

一個(gè)變量的作用域指定變量的定義位置。程序中變量的可用性是由它的作用域決定的。TypeScript 變量可以具有以下作用域:

  • 全局作用域 - 全局變量在編程結(jié)構(gòu)之外進(jìn)行聲明。這些變量可以從代碼內(nèi)的任何地方進(jìn)行訪問。

  • 類作用域 - 這些變量也稱為字段。字段或類變量在類中進(jìn)行聲明,但在方法之外。這些變量可以使用的類的對(duì)象進(jìn)行訪問。字段也可以是靜態(tài)的。靜態(tài)字段可以使用類名來(lái)訪問。

  • 局部作用域 - 局部變量,顧名思義,局部變量在方法,循環(huán)等結(jié)構(gòu)中聲明,局部變量只能在聲明它們的結(jié)造中訪問。

下面的例子說(shuō)明了 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) 

在轉(zhuǎn)換時(shí),會(huì)生成以下 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);

它會(huì)產(chǎn)生如下的輸出:

Global num: 12
10
Global num: 13

如果您嘗試訪問方法外部的局部變量,則會(huì)導(dǎo)致編譯錯(cuò)誤:

error TS2095: Could not find symbol 'local_num'.
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)