在 TypeScript 中，變量是存儲數(shù)據(jù)的容器。與 JavaScript 類似，TypeScript 變量在使用前必須先聲明。聲明變量時，我們可以使用 var、let 或 const 關(guān)鍵字，但 var 由于其作用域特性（函數(shù)作用域而非塊級作用域），在現(xiàn)代 TypeScript 代碼中通常不推薦使用，更推薦使用 let 和 const。

TypeScript 變量的命名規(guī)則

• 變量名必須以字母、下劃線（_）或美元符號（$）開頭。
• 變量名不能是 TypeScript 的保留關(guān)鍵字（如 class、function 等）。
• 變量名區(qū)分大小寫。

聲明變量的方式

聲明變量的類型及初始值：

let uname: string = "Runoob";
let score: number = 95;

聲明變量的類型，但沒有初始值：

let uname: string; // uname 的類型為 string，但初始值為 undefined
let score: number; // 同理，score 的類型為 number，初始值為 undefined

聲明變量并初始值，但不設(shè)置類型（不推薦，因為會失去類型檢查的優(yōu)勢）：

let uname = "Runoob"; // uname 的類型會被推斷為 string
let score = 42; // score 的類型會被推斷為 number

聲明變量沒有設(shè)置類型和初始值（同樣不推薦）：

let uname; // uname 的類型為 any，初始值為 undefined

注意：盡量避免使用 var 聲明變量，因為它會導(dǎo)致一些作用域相關(guān)的問題。在現(xiàn)代 TypeScript 代碼中，推薦使用 let 和 const。

實例

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

注意

變量不要使用 name 否則會與 DOM 中的全局 window 對象下的 name 屬性出現(xiàn)了重名。

使用 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);

執(zhí)行該 JavaScript 代碼輸出結(jié)果為：

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

TypeScript 遵循強類型，如果將不同的類型賦值給變量會編譯錯誤，如下實例：

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

類型斷言（Type Assertion）

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

類型斷言的基本用法

1.尖括號語法

<類型>值

2.as關(guān)鍵字語法

值 as 類型

實例

let str = '1';
let str2: number = <number><any>str; 
// 這里先將 str 斷言為 any 類型，然后再斷言為 number 類型
// 或者使用 as 語法
// let str2: number = str as any as number; 
// 但這種寫法并不常見，通常我們會直接斷言到目標(biāo)類型
// 更合理的做法是避免不必要的斷言，或者確保斷言是有根據(jù)的
// 例如，如果我們知道某個字符串實際上表示的是一個數(shù)字，并且我們想要將其用作數(shù)字：
let numericStr = '42';
let num: number = Number(numericStr) as number; 
// 這里使用了 Number 函數(shù)進(jìn)行轉(zhuǎn)換，并斷言結(jié)果為 number 類型
// 但更好的做法是直接使用 TypeScript 的類型推斷和類型保護(hù)：
let parsedNum = parseInt(numericStr, 10);
if (!isNaN(parsedNum)) {
    // 在這里，我們可以安全地使用 parsedNum，因為它已經(jīng)被驗證為一個數(shù)字
    console.log(parsedNum + 10); // 輸出 52
}

注意：上面的 <number><any>str 寫法只是為了演示類型斷言的語法，實際上這樣做是不合理的，因為直接將一個字符串?dāng)嘌詾閿?shù)字類型是不安全的。正確的做法應(yīng)該是使用 TypeScript 提供的類型轉(zhuǎn)換函數(shù)（如 Number、parseInt 等）或者類型保護(hù)機制

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

1. 類型兼容性：

   • 當(dāng)S類型是T類型的子集，或者T類型是S類型的子集時，TypeScript通常允許將S斷言為T。這是類型兼容性的基本原則，它確保了斷言后的類型在使用時不會引發(fā)類型錯誤。
   • 例如，如果有一個接口A和一個實現(xiàn)了接口A的類B，那么可以將B的實例斷言為A的類型，因為B是A的一個具體實現(xiàn)。

2. 開發(fā)者意圖和上下文：

   • TypeScript編譯器會嘗試?yán)斫忾_發(fā)者的意圖，并根據(jù)代碼上下文來判斷類型斷言的合理性。
   • 如果開發(fā)者在代碼中明確指出了某個值的類型（例如通過類型注釋或類型斷言），并且這個類型與上下文中的其他信息相符，那么TypeScript通常會接受這個類型斷言。

3. 類型系統(tǒng)的限制：

   • TypeScript的類型系統(tǒng)有一些內(nèi)置的限制和規(guī)則，這些規(guī)則決定了哪些類型斷言是合法的，哪些是不合法的。
   • 例如，TypeScript不允許將一個值斷言為完全不兼容的類型。如果嘗試將一個字符串?dāng)嘌詾橐粋€數(shù)字，TypeScript會報錯，因為這兩種類型在類型系統(tǒng)中是不兼容的。

4. 類型保護(hù)：

   • 類型保護(hù)是TypeScript中的一種機制，它允許開發(fā)者在運行時檢查變量的類型，并根據(jù)檢查結(jié)果來縮小變量的類型范圍。
   • 雖然類型保護(hù)與類型斷言在功能上是不同的（類型保護(hù)是運行時檢查，而類型斷言是編譯時語法），但類型保護(hù)的結(jié)果可以作為類型斷言的依據(jù)。例如，如果通過類型保護(hù)確定了一個變量的類型是某個特定類型，那么可以使用類型斷言來明確指定這個類型。

5. 編譯器的智能推斷：

   • TypeScript編譯器具有強大的類型推斷能力，它可以根據(jù)代碼中的其他信息來推斷出變量的類型。
   • 在某些情況下，編譯器可能已經(jīng)能夠推斷出變量的確切類型，此時再進(jìn)行類型斷言可能是多余的。但在其他情況下，編譯器可能無法完全推斷出變量的類型，此時類型斷言就顯得尤為重要。

類型斷言與類型轉(zhuǎn)換的區(qū)別

類型斷言與類型轉(zhuǎn)換（如 C# 中的類型轉(zhuǎn)換操作）不同。類型轉(zhuǎn)換通常需要運行時的支持來檢查轉(zhuǎn)換是否成功，并可能拋出異常。而類型斷言是 TypeScript 的一個編譯時特性，它不會改變代碼的運行時行為。類型斷言只是告訴編譯器如何分析代碼，而不會引入任何運行時的性能開銷。

編譯后的 JavaScript 代碼

當(dāng) TypeScript 代碼被編譯成 JavaScript 時，類型斷言會被完全移除。這是因為 JavaScript 本身是一個動態(tài)類型語言，不支持靜態(tài)類型檢查。因此，編譯后的代碼只包含運行時需要的邏輯，而不包含任何類型信息。

例如，以下 TypeScript 代碼：

let str: string = "1";
let str2: string = str as string; // 這里的類型斷言在編譯后會被移除
console.log(str2);

編譯后會變成：

var str = "1";
var str2 = str;
console.log(str2);

執(zhí)行輸出：1

類型推斷

在TypeScript中，當(dāng)變量或表達(dá)式的類型沒有明確指定時，編譯器會嘗試根據(jù)上下文信息來推斷其類型，這一過程被稱為類型推斷。類型推斷使得代碼更加簡潔，同時仍然保持了類型安全。

以下是一個類型推斷的例子：

var num = 2; // 類型推斷為 number
console.log("num 變量的值為 " + num);
// num = "12"; // 如果取消注釋，會導(dǎo)致編譯錯誤，因為不能將字符串賦值給number類型的變量
// console.log(num);

在上述代碼中，變量num被初始化為數(shù)字2，因此TypeScript編譯器推斷其類型為number。如果嘗試將字符串"12"賦值給num（如注釋所示），編譯器會報錯，因為字符串類型與number類型不兼容。

變量作用域

變量作用域決定了變量在程序中的可見性和生命周期。

全局作用域

全局變量定義在程序結(jié)構(gòu)的外部，它可以在你代碼的任何位置使用。

類作用域

這個變量也可以稱為 字段。類變量聲明在一個類里頭，但在類的方法外面。 該變量可以通過類的對象來訪問。類變量也可以是靜態(tài)的，靜態(tài)的變量可以通過類名直接訪問。

局部作用域

 局部變量，局部變量只能在聲明它的一個代碼塊（如：方法）中使用。

TypeScript支持多種作用域，包括全局作用域、函數(shù)作用域（在TypeScript中，由于類的存在，更準(zhǔn)確地說是塊級作用域和類作用域，但傳統(tǒng)意義上的函數(shù)作用域仍然適用）、塊級作用域（由{}包圍的代碼塊）以及類作用域。

以下是一個展示不同作用域使用的例子：

var global_num = 12; // 全局變量

class Numbers {
    num_val = 13; // 實例變量，屬于類實例的作用域
    static sval = 10; // 靜態(tài)變量，屬于類本身的作用域

    storeNum(): void {
        var local_num = 14; // 局部變量，僅在storeNum方法內(nèi)部可見
        console.log("局部變量為: " + local_num); // 正確使用局部變量
    }
}

console.log("全局變量為: " + global_num);
console.log(Numbers.sval); // 正確訪問靜態(tài)變量
var obj = new Numbers();
console.log("實例變量: " + obj.num_val); // 正確訪問實例變量

// console.log("局部變量為: " + local_num); 
// 如果取消注釋，會導(dǎo)致編譯錯誤，因為local_num在方法外部不可見

執(zhí)行結(jié)果如下：

全局變量為: 12
10
實例變量: 13

如果嘗試在storeNum方法外部訪問局部變量local_num（如注釋所示），TypeScript編譯器會報錯，因為local_num在方法外部不可見，其作用域僅限于storeNum方法內(nèi)部。

需要注意的是，在TypeScript中，使用var聲明的變量具有函數(shù)作用域（或在全局作用域中聲明時具有全局作用域），但在ES6及更高版本的JavaScript中引入的let和const關(guān)鍵字提供了塊級作用域。在TypeScript中，也推薦使用let和const來聲明變量，以利用塊級作用域帶來的優(yōu)勢

到此這篇關(guān)于TypeScript 變量聲明的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)TypeScript 變量聲明內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論