1. 程式人生 > 實用技巧 >Runoob-TypeScript:TypeScript 變數宣告

Runoob-TypeScript:TypeScript 變數宣告

ylbtech-Runoob-TypeScript:TypeScript 變數宣告

1.返回頂部
1、

TypeScript 變數宣告

變數是一種使用方便的佔位符,用於引用計算機記憶體地址

我們可以把變數看做儲存資料的容器

TypeScript 變數的命名規則:

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

  • 除了下劃線_和美元$符號外,不能包含其他特殊字元,包括空格。

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

變數使用前必須先宣告,我們可以使用 var 來宣告變數。

我們可以使用以下四種方式來宣告變數:

宣告變數的型別及初始值:

var [變數名] : [型別] = 值;

例如:

var uname:string = "Runoob";

宣告變數的型別,但沒有初始值,變數值會設定為 undefined:

var [變數名] : [型別];

例如:

var uname:string;

宣告變數並初始值,但不設定型別,該變數可以是任意型別

var [變數名] = 值;

例如:

var uname = "Runoob";

宣告變數沒有設定型別和初始值,型別可以是任意型別,預設初始值為 undefined

var [變數名];

例如:

var uname;

例項

varuname:string="Runoob";
varscore1:number=50;
varscore2:number=42.50
varsum=score1+score2
console.log("名字: "+uname)
console.log("第一個科目成績: "+score1)
console.log("第二個科目成績: "+score2)
console.log("總成績: "+sum)

注意:變數不要使用 name 否則會與 DOM 中的全域性 window 物件下的 name 屬性出現了重名

使用 tsc 命令編譯以上程式碼,得到如下 JavaScript 程式碼:

var uname = "Runoob";
var score1 = 50;
var score2 = 42.50;
var sum = score1 + score2;
console.log(
"名字: " + uname); console.log("第一個科目成績: " + score1); console.log("第二個科目成績: " + score2); console.log("總成績: " + sum);

執行該 JavaScript 程式碼輸出結果為:

名字: Runoob
第一個科目成績: 50
第二個科目成績: 42.5
總成績: 92.5

TypeScript 遵循強型別,如果將不同的型別賦值給變數會編譯錯誤,如下例項:

var num:number = "hello"     // 這個程式碼會編譯錯誤

型別斷言(Type Assertion)

型別斷言可以用來手動指定一個值的型別,即允許變數從一種型別更改為另一種型別。

語法格式:

<型別>值

或:

 as 型別

例項

var str = '1' 
var str2:number = <number> <any> str   //str、str2 是 string 型別
console.log(str2)

TypeScript 是怎麼確定單個斷言是否足夠

當 S 型別是 T 型別的子集,或者 T 型別是 S 型別的子集時S 能被成功斷言成 S。這是為了在進行型別斷言時提供額外的安全性,完全毫無根據的斷言是危險的,如果你想這麼做,你可以使用 any。

它之所以不被稱為型別轉換,是因為轉換通常意味著某種執行時的支援。但是,型別斷言純粹是一個編譯時語法,同時,它也是一種為編譯器提供關於如何分析程式碼的方法

編譯後,以上程式碼會生成如下 JavaScript 程式碼:

var str = '1';
var str2 = str;  //str、str2 是 string 型別
console.log(str2);

執行輸出結果為:

1

型別推斷

當型別沒有給出時,TypeScript 編譯器利用型別推斷來推斷型別。

如果由於缺乏宣告而不能推斷出型別,那麼它的型別被視作預設的動態 any 型別

var num = 2;    // 型別推斷為 number
console.log("num 變數的值為 "+num); 
num = "12";    // 編譯錯誤
console.log(num);
  • 第一行程式碼聲明瞭變數 num 並=設定初始值為 2。 注意變數宣告沒有指定型別。因此,程式使用型別推斷來確定變數的資料型別,第一次賦值為 2,num設定為 number 型別。

  • 第三行程式碼,當我們再次為變數設定字串型別的值時,這時編譯會錯誤。因為變數已經設定為了 number 型別。

    error TS2322: Type '"12"' is not assignable to type 'number'.

變數作用域

變數作用域指定了變數定義的位置

程式中變數的可用性由變數作用域決定。

TypeScript 有以下幾種作用域:

  • 全域性作用域− 全域性變數定義在程式結構的外部,它可以在你程式碼的任何位置使用。

  • 類作用域− 這個變數也可以稱為欄位。類變數宣告在一個類裡頭,但在類的方法外面。 該變數可以通過類的物件來訪問。類變數也可以是靜態的,靜態的變數可以通過類名直接訪問。

  • 區域性作用域− 區域性變數,區域性變數只能在宣告它的一個程式碼塊(如:方法)中使用。

以下例項說明了三種作用域的使用:

var global_num = 12          // 全域性變數
class Numbers { 
   num_val = 13;             // 例項變數
   static sval = 10;         // 靜態變數
   
   storeNum():void { 
      var local_num = 14;    // 區域性變數
   } 
} 
console.log("全域性變數為: "+global_num)  
console.log(Numbers.sval)   // 靜態變數
var obj = new Numbers(); 
console.log("例項變數: "+obj.num_val)

以上程式碼使用 tsc 命令編譯為 JavaScript 程式碼為:

var global_num = 12; // 全域性變數
var Numbers = /** @class */ (function () {
    function Numbers() {
        this.num_val = 13; // 例項變數
    }
    Numbers.prototype.storeNum = function () {
        var local_num = 14; // 區域性變數
    };
    Numbers.sval = 10; // 靜態變數
    return Numbers;
}());
console.log("全域性變數為: " + global_num);
console.log(Numbers.sval); // 靜態變數
var obj = new Numbers();
console.log("例項變數: " + obj.num_val);

執行以上 JavaScript 程式碼,輸出結果為:

全域性變數為: 12
10
例項變數: 13

如果我們在方法外部呼叫區域性變數 local_num,會報錯:

error TS2322: Could not find symbol 'local_num'.
2、
2.返回頂部
3.返回頂部
4.返回頂部
5.返回頂部
1、 https://www.runoob.com/typescript/ts-variables.html 2、
6.返回頂部
作者:ylbtech
出處:http://ylbtech.cnblogs.com/
本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連線,否則保留追究法律責任的權利。