TypeScript 變量聲明
變量是一種使用方便的占位符,用于引用計(jì)算機(jī)內(nèi)存地址。
我們可以把變量看做存儲(chǔ)數(shù)據(jù)的容器。
TypeScript 變量的命名規(guī)則:
- 變量名稱(chēng)可以包含數(shù)字和字母。
- 除了下劃線 _ 和美元 $ 符號(hào)外,不能包含其他特殊字符,包括空格。
- 變量名不能以數(shù)字開(kāi)頭。
變量使用前必須先聲明,我們可以使用 var 來(lái)聲明變量。
我們可以使用以下四種方式來(lái)聲明變量:
聲明變量的類(lèi)型及初始值:
var [變量名] : [類(lèi)型] = 值;
例如:
var uname:string = "Runoob";
聲明變量的類(lèi)型,但沒(méi)有初始值,變量值會(huì)設(shè)置為 undefined:
var [變量名] : [類(lèi)型];
例如:
var uname:string;
聲明變量并初始值,但不設(shè)置類(lèi)型,該變量可以是任意類(lèi)型:
var [變量名] = 值;
例如:
var uname = "Runoob";
聲明變量沒(méi)有設(shè)置類(lèi)型和初始值,類(lèi)型可以是任意類(lèi)型,默認(rèn)初始值為 undefined:
var [變量名];
例如:
var uname;
范例:
var uname:string = "Codebaoku"; var score1:number = 50; var score2:number = 42.50 var sum = score1 + score2 console.log("名字: "+uname) console.log("第一個(gè)科目成績(jī): "+score1) console.log("第二個(gè)科目成績(jī): "+score2) console.log("總成績(jī): "+sum)
注意:變量不要使用 name 否則會(huì)與 DOM 中的全局 window 對(duì)象下的 name 屬性出現(xiàn)了重名。
使用 tsc 命令編譯以上代碼,得到如下 JavaScript 代碼:
var uname = "Codebaoku"; var score1 = 50; var score2 = 42.50; var sum = score1 + score2; console.log("名字: " + uname); console.log("第一個(gè)科目成績(jī): " + score1); console.log("第二個(gè)科目成績(jī): " + score2); console.log("總成績(jī): " + sum);
執(zhí)行該 JavaScript 代碼輸出結(jié)果為:
名字: Codebaoku 第一個(gè)科目成績(jī): 50 第二個(gè)科目成績(jī): 42.5 總成績(jī): 92.5
TypeScript 遵循強(qiáng)類(lèi)型,如果將不同的類(lèi)型賦值給變量會(huì)編譯錯(cuò)誤,如下范例:
var num:number = "hello" // 這個(gè)代碼會(huì)編譯錯(cuò)誤
1. 類(lèi)型斷言(Type Assertion)
類(lèi)型斷言可以用來(lái)手動(dòng)指定一個(gè)值的類(lèi)型,即允許變量從一種類(lèi)型更改為另一種類(lèi)型。
語(yǔ)法格式:
<類(lèi)型>值
或:
值 as 類(lèi)型
1) 范例
var str = '1' var str2:number = <number> <any> str //str、str2 是 string 類(lèi)型 console.log(str2)</any></number>
2) TypeScript 是怎么確定單個(gè)斷言是否足夠
當(dāng) S 類(lèi)型是 T 類(lèi)型的子集,或者 T 類(lèi)型是 S 類(lèi)型的子集時(shí),S 能被成功斷言成 T。這是為了在進(jìn)行類(lèi)型斷言時(shí)提供額外的安全性,完全毫無(wú)根據(jù)的斷言是危險(xiǎn)的,如果你想這么做,你可以使用 any。
它之所以不被稱(chēng)為類(lèi)型轉(zhuǎn)換,是因?yàn)檗D(zhuǎn)換通常意味著某種運(yùn)行時(shí)的支持。但是,類(lèi)型斷言純粹是一個(gè)編譯時(shí)語(yǔ)法,同時(shí),它也是一種為編譯器提供關(guān)于如何分析代碼的方法。
編譯后,以上代碼會(huì)生成如下 JavaScript 代碼:
var str = '1'; var str2 = str; //str、str2 是 string 類(lèi)型 console.log(str2);
執(zhí)行輸出結(jié)果為:
1
3. 類(lèi)型推斷
當(dāng)類(lèi)型沒(méi)有給出時(shí),TypeScript 編譯器利用類(lèi)型推斷來(lái)推斷類(lèi)型。
如果由于缺乏聲明而不能推斷出類(lèi)型,那么它的類(lèi)型被視作默認(rèn)的動(dòng)態(tài) any 類(lèi)型。
var num = 2; // 類(lèi)型推斷為 number console.log("num 變量的值為 "+num); num = "12"; // 編譯錯(cuò)誤 console.log(num);
- 第一行代碼聲明了變量 num 并=設(shè)置初始值為 2。 注意變量聲明沒(méi)有指定類(lèi)型。因此,程序使用類(lèi)型推斷來(lái)確定變量的數(shù)據(jù)類(lèi)型,第一次賦值為 2,num 設(shè)置為 number 類(lèi)型。
- 第三行代碼,當(dāng)我們?cè)俅螢樽兞吭O(shè)置字符串類(lèi)型的值時(shí),這時(shí)編譯會(huì)錯(cuò)誤。因?yàn)樽兞恳呀?jīng)設(shè)置為了 number 類(lèi)型。
error TS2322: Type '"12"' is not assignable to type 'number'.
4. 變量作用域
變量作用域指定了變量定義的位置。
程序中變量的可用性由變量作用域決定。
TypeScript 有以下幾種作用域:
- 全局作用域 ? 全局變量定義在程序結(jié)構(gòu)的外部,它可以在你代碼的任何位置使用。
- 類(lèi)作用域 ? 這個(gè)變量也可以稱(chēng)為 字段。類(lèi)變量聲明在一個(gè)類(lèi)里頭,但在類(lèi)的方法外面。 該變量可以通過(guò)類(lèi)的對(duì)象來(lái)訪問(wèn)。類(lèi)變量也可以是靜態(tài)的,靜態(tài)的變量可以通過(guò)類(lèi)名直接訪問(wèn)。
- 局部作用域 ? 局部變量,局部變量只能在聲明它的一個(gè)代碼塊(如:方法)中使用。
以下范例說(shuō)明了三種作用域的使用:
var global_num = 12 // 全局變量 class Numbers { num_val = 13; // 范例變量 static sval = 10; // 靜態(tài)變量 storeNum():void { var local_num = 14; // 局部變量 } } console.log("全局變量為: "+global_num) console.log(Numbers.sval) // 靜態(tài)變量 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; // 靜態(tài)變量 return Numbers; }()); console.log("全局變量為: " + global_num); console.log(Numbers.sval); // 靜態(tài)變量 var obj = new Numbers(); console.log("范例變量: " + obj.num_val);
執(zhí)行以上 JavaScript 代碼,輸出結(jié)果為:
全局變量為: 12 10 范例變量: 13
如果我們?cè)诜椒ㄍ獠空{(diào)用局部變量 local_num,會(huì)報(bào)錯(cuò):
error TS2322: Could not find symbol 'local_num'.
- 如何通過(guò)JavaScript實(shí)現(xiàn)組件化和模塊化
- 如何通過(guò)Javascript腳本獲取form和input內(nèi)容
- JavaScript如何對(duì)負(fù)數(shù)開(kāi)方
- javascript報(bào)錯(cuò)如何調(diào)試
- JavaScript工程url無(wú)法使用如何解決
- JavaScript不能獲取表單如何解決
- 如何用JavaScript在Vue3中實(shí)現(xiàn)動(dòng)畫(huà)
- javascript中怎么嵌套php腳本
- JavaScript怎么自定義函數(shù)求累加
- 怎么開(kāi)發(fā)javascript錯(cuò)誤上報(bào)工具
- javascript怎么發(fā)送ajax請(qǐng)求參數(shù)
- 怎么使用Javascript的if語(yǔ)句實(shí)現(xiàn)背景色切換
- javascript中怎么修改節(jié)點(diǎn)
- TypeScript 教程
- TypeScript 循環(huán)
- TypeScript String 字符串
- TypeScript Map 對(duì)象
- TypeScript 元組
- TypeScript 聯(lián)合類(lèi)型
- TypeScript 類(lèi)