TypeScript基礎(chǔ)類型完全指南(附示例代碼)
類型總覽
| 類型 | 描述 | 示例 |
|---|---|---|
boolean | 真/假值 | true, false |
number | 數(shù)值類型 | 42, 3.14, 0xFF |
string | 字符串類型 | "hello", 'world' |
array | 數(shù)組類型 | number[], Array<string> |
tuple | 固定長度數(shù)組 | [string, number] |
enum | 枚舉類型 | enum Color { Red, Green } |
any | 任意類型 | 繞過類型檢查 |
unknown | 未知類型 | 類型安全的any |
void | 無返回值 | 函數(shù)沒有返回值 |
null | 空值 | 表示空值 |
undefined | 未定義 | 變量未賦值 |
never | 永不存在的值 | 拋出異?;驘o限循環(huán) |
object | 非原始類型 | { key: value } |
一、boolean類型
boolean類型表示邏輯值,只有兩個可能的值:true 和 false。這是最基本的數(shù)據(jù)類型之一,常用于條件判斷和邏輯運算。
let isDone: boolean = false; let isActive: boolean = true; // 類型推斷 let hasPermission = true; // 推斷為boolean類型 // 布爾運算 let result: boolean = isDone && isActive;
擴(kuò)展:TypeScript支持所有JavaScript的布爾運算符,如 &&、||、!,并且會進(jìn)行嚴(yán)格的類型檢查,確保操作數(shù)是布爾值。
二、number類型
number類型表示數(shù)值,包括整數(shù)和浮點數(shù)。TypeScript支持十進(jìn)制、十六進(jìn)制、二進(jìn)制和八進(jìn)制字面量。
let decimal: number = 42; let hex: number = 0xFF; // 十六進(jìn)制 let binary: number = 0b1010; // 二進(jìn)制 let octal: number = 0o744; // 八進(jìn)制 let float: number = 3.14;
擴(kuò)展:TypeScript遵循JavaScript的IEEE 754浮點數(shù)標(biāo)準(zhǔn),所有數(shù)字都是浮點數(shù)。與JavaScript一樣,TypeScript還支持 Number 對象和相關(guān)的數(shù)值方法,如 toFixed()、toExponential() 等。
三、string類型
string類型表示文本數(shù)據(jù),可以使用單引號、雙引號或反引號定義。字符串是JavaScript和TypeScript中表示文本的主要方式。
let name: string = "Alice";
let greeting: string = 'Hello';
let message: string = `Welcome, ${name}!`;擴(kuò)展 - 模板字符串:TypeScript支持ES6的模板字符串,可以嵌入表達(dá)式和多行文本。模板字符串使用反引號定義,通過 ${expression} 語法嵌入表達(dá)式。
let user = "Bob";
let score = 95;
let summary = `User: ${user}
Score: ${score}
Grade: ${score >= 90 ? 'A' : 'B'}`;四、array類型
array類型表示相同類型元素的集合。TypeScript提供了兩種定義數(shù)組類型的語法:元素類型后接 [] 或使用泛型數(shù)組類型。
let list1: number[] = [1, 2, 3]; let list2: Array<string> = ["a", "b", "c"]; let mixed: (string | number)[] = [1, "hello", 2];
擴(kuò)展:數(shù)組在TypeScript中具有完整的類型支持,包括數(shù)組方法的類型檢查。當(dāng)嘗試向數(shù)組中添加錯誤類型的元素時,TypeScript會在編譯時報錯。
五、tuple類型
tuple類型表示一個已知元素數(shù)量和類型的數(shù)組,各元素的類型不必相同。元組在表示固定結(jié)構(gòu)的數(shù)據(jù)時非常有用。
let person: [string, number] = ["Alice", 25]; let point: [number, number, number] = [10, 20, 30];
擴(kuò)展:元組在訪問超出定義長度的元素時會使用聯(lián)合類型。元組還支持可選元素和剩余元素,提供了更靈活的數(shù)據(jù)結(jié)構(gòu)定義方式。
六、enum類型
enum類型是對JavaScript標(biāo)準(zhǔn)數(shù)據(jù)類型的一個補充,用于定義一組命名常量。枚舉類型提供了一種給數(shù)值集合賦予友好名稱的方式。
enum Color { Red, Green, Blue }
let c: Color = Color.Green;
enum Direction {
Up = "UP",
Down = "DOWN"
}擴(kuò)展:枚舉支持?jǐn)?shù)字枚舉和字符串枚舉。數(shù)字枚舉的值會自動遞增,而字符串枚舉需要為每個成員初始化。枚舉在編譯后會生成對應(yīng)的JavaScript對象。
七、any類型
any類型是TypeScript的類型系統(tǒng)的逃生艙。使用any類型可以繞過類型檢查,允許變量持有任意類型的值。
let uncertain: any = "hello"; uncertain = 42; uncertain = true; uncertain.nonExistentMethod(); // 編譯時不會報錯
注意事項:any類型會完全繞過TypeScript的類型檢查,應(yīng)該謹(jǐn)慎使用。過度使用any會失去TypeScript的類型安全優(yōu)勢。
any vs unknown區(qū)別:
any:完全繞過類型檢查,可以任意操作unknown:類型安全,需要類型檢查后才能操作
let anyValue: any = "hello"; anyValue.toFixed(); // 編譯通過,運行時可能出錯 let unknownValue: unknown = "hello"; // unknownValue.toFixed(); // 編譯錯誤:需要類型檢查
八、unknown類型
unknown類型是TypeScript 3.0引入的類型安全的any替代品。它表示未知類型的值,在進(jìn)行類型檢查之前不能對其進(jìn)行任何操作。
let value: unknown = "hello";
// 需要類型檢查后才能使用
if (typeof value === "string") {
console.log(value.toUpperCase());
}擴(kuò)展:unknown類型強制開發(fā)者進(jìn)行顯式的類型檢查,這比any更安全。在處理來自外部源(如API響應(yīng))的數(shù)據(jù)時,unknown是更好的選擇。
九、void類型
void類型表示沒有任何類型,通常用于函數(shù)沒有返回值的情況。聲明為void類型的變量只能賦值為undefined或null。
function logMessage(message: string): void {
console.log(message);
}
let unusable: void = undefined;void vs undefined:void表示沒有類型,主要用于函數(shù)返回值;undefined是一個具體的類型,表示未定義的值。void類型的變量可以賦值為undefined,但undefined類型的變量不能賦值為void。
let u: undefined = undefined; let v: void = undefined; // v = u; // 錯誤:不能將undefined分配給void
擴(kuò)展:默認(rèn)情況下,null和undefined是所有其他類型的子類型,可以賦值給其他類型。但在開啟 --strictNullChecks 標(biāo)志后,null和undefined只能賦值給any和它們各自的類型。
十一、never類型
never類型表示那些永不存在的值的類型。例如,never類型是那些總是會拋出異?;蚋揪筒粫蟹祷刂档暮瘮?shù)表達(dá)式的返回值類型。
function error(message: string): never {
throw new Error(message);
}
function infiniteLoop(): never {
while (true) {}
}擴(kuò)展:never類型是任何類型的子類型,也可以賦值給任何類型;然而,沒有類型是never的子類型或可以賦值給never類型(除了never本身)。在聯(lián)合類型中,never類型會被自動移除。
十二、object類型
object類型表示非原始類型,即不是number、string、boolean、symbol、null或undefined的類型。它用于表示對象、數(shù)組、函數(shù)等。
let obj: object = { name: "Alice" };
let arr: object = [1, 2, 3];
let func: object = function() {};擴(kuò)展:使用object類型通常過于寬泛,更好的做法是使用接口或類型別名來定義具體的對象形狀。object類型主要用于表示"非原始值"的通用概念。
十三、類型斷言
類型斷言類似于其他語言中的類型轉(zhuǎn)換,但不進(jìn)行特殊的數(shù)據(jù)檢查或解構(gòu)。它告訴TypeScript你比它更了解某個值的類型。
let someValue: any = "hello world"; let strLength1: number = (someValue as string).length; let strLength2: number = (<string>someValue).length;
擴(kuò)展:TypeScript支持兩種形式的類型斷言:尖括號語法和as語法。在JSX中只能使用as語法。類型斷言不會影響運行時行為,只在編譯階段起作用。
類型系統(tǒng)特性總結(jié)
1. 類型推斷
TypeScript能夠根據(jù)上下文自動推斷變量的類型:
let x = 3; // 推斷為number let y = "hello"; // 推斷為string let z = [1, 2, 3]; // 推斷為number[]
2. 類型兼容性
TypeScript使用結(jié)構(gòu)化類型系統(tǒng),基于類型的形狀進(jìn)行檢查:
interface Named {
name: string;
}
let x: Named;
let y = { name: "Alice", age: 25 };
x = y; // 兼容,因為y具有name屬性3. 類型操作
TypeScript提供了豐富的類型操作符:
// 聯(lián)合類型
let id: string | number;
// 交叉類型
type Named = { name: string };
type Aged = { age: number };
type Person = Named & Aged;
// 類型查詢
let s = "hello";
let n: typeof s; // string類型實踐建議
避免過度使用any:優(yōu)先使用unknown或具體的類型
利用類型推斷:在明顯的情況下讓TypeScript推斷類型
使用嚴(yán)格的null檢查:開啟
--strictNullChecks避免意外的null/undefined錯誤優(yōu)先使用接口:對于對象形狀,接口比類型別名更易擴(kuò)展
合理使用類型斷言:只在確信類型正確時使用類型斷言
掌握這些基礎(chǔ)類型是使用TypeScript的關(guān)鍵第一步,它們構(gòu)成了TypeScript強大類型系統(tǒng)的基礎(chǔ)。
到此這篇關(guān)于TypeScript基礎(chǔ)類型完全指南的文章就介紹到這了,更多相關(guān)TS基礎(chǔ)類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
躲避這些會改變原數(shù)組JavaScript數(shù)組方法讓開發(fā)流暢無阻
JavaScript中有些數(shù)組的操作方法并不符合我們預(yù)期,容易導(dǎo)致想象不到的結(jié)果,因此,為避免這種情況的發(fā)生,本文將介紹哪些原生數(shù)組方法能改變原數(shù)組以及我對于如何更好地使用數(shù)組方法的建議2023-05-05
使用Bootstrap Tabs選項卡Ajax加載數(shù)據(jù)實現(xiàn)
這篇文章主要介紹了使用Bootstrap Tabs選項卡Ajax加載數(shù)據(jù)實現(xiàn),以及遇到的問題,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12
JS實現(xiàn)動態(tài)移動層及拖動浮層關(guān)閉的方法
這篇文章主要介紹了JS實現(xiàn)動態(tài)移動層及拖動浮層關(guān)閉的方法,可實現(xiàn)動態(tài)拖動浮動窗口及關(guān)閉窗口的功能,非常具有實用價值,需要的朋友可以參考下2015-04-04
用js實現(xiàn)隨機(jī)返回數(shù)組的一個元素
js實現(xiàn)隨機(jī)返回數(shù)組的一個元素,這是個奇妙的方法。適合做標(biāo)題性質(zhì)文字的隨機(jī)輪換顯示2007-08-08
jquery.rotate.js實現(xiàn)可選抽獎次數(shù)和中獎內(nèi)容的轉(zhuǎn)盤抽獎代碼
這篇文章主要介紹了jquery.rotate.js實現(xiàn)可選抽獎次數(shù)和中獎內(nèi)容的轉(zhuǎn)盤抽獎代碼,需要的朋友可以參考下2017-08-08

