此頁面已棄用

此手冊頁面已更換,前往新頁面

基本類型

程式要能發揮作用,我們需要能夠處理一些最基本的資料單位:數字、字串、結構、布林值等。在 TypeScript 中,我們支援與 JavaScript 中預期的相同類型,並新增列舉類型以協助處理。

布林值

最基本的資料類型是簡單的真/假值,JavaScript 和 TypeScript 稱之為 boolean 值。

ts
let isDone: boolean = false;
Try

數字

與 JavaScript 相同,TypeScript 中的所有數字都是浮點值或 BigInt 整數。這些浮點數會取得類型 number,而 BigInt 整數會取得類型 bigint。除了十六進位和十進位字面值外,TypeScript 也支援 ECMAScript 2015 中引入的二進位和八進位字面值。

ts
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;
Try

字串

在 JavaScript 中建立網頁程式和伺服器程式的另一個基本部分是處理文字資料。與其他語言相同,我們使用 string 類型來指稱這些文字資料類型。就像 JavaScript 一樣,TypeScript 也使用雙引號 (") 或單引號 (') 來包圍字串資料。

ts
let color: string = "blue";
color = 'red';
Try

您也可以使用 範本字串,它可以跨越多行並包含內嵌的運算式。這些字串會以反引號/反撇號 (`) 字元包圍,而內嵌的運算式則為 ${ expr } 的形式。

ts
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.
 
I'll be ${age + 1} years old next month.`;
Try

這等同於以下宣告 sentence

ts
let sentence: string =
"Hello, my name is " +
fullName +
".\n\n" +
"I'll be " +
(age + 1) +
" years old next month.";
Try

陣列

TypeScript 和 JavaScript 一樣,允許您使用值陣列。陣列類型可以用兩種方式撰寫。第一種方式是使用元素類型,後面接 [] 來表示該元素類型的陣列

ts
let list: number[] = [1, 2, 3];
Try

第二種方式使用一般陣列類型,Array<elemType>

ts
let list: Array<number> = [1, 2, 3];
Try

元組

元組類型允許您表示具有固定數量元素的陣列,其類型已知,但不必相同。例如,您可能希望將值表示為 字串數字 的一對

ts
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error
Type 'number' is not assignable to type 'string'.
Type 'string' is not assignable to type 'number'.
2322
2322
Type 'number' is not assignable to type 'string'.
Type 'string' is not assignable to type 'number'.
Try

存取具有已知索引的元素時,會擷取正確的類型

ts
// OK
console.log(x[0].substring(1));
 
console.log(x[1].substring(1));
Property 'substring' does not exist on type 'number'.2339Property 'substring' does not exist on type 'number'.
Try

存取已知索引集之外的元素會失敗並產生錯誤

ts
x[3] = "world";
Tuple type '[string, number]' of length '2' has no element at index '3'.2493Tuple type '[string, number]' of length '2' has no element at index '3'.
 
console.log(x[5].toString());
Object is possibly 'undefined'.
Tuple type '[string, number]' of length '2' has no element at index '5'.
2532
2493
Object is possibly 'undefined'.
Tuple type '[string, number]' of length '2' has no element at index '5'.
Try

列舉

對 JavaScript 標準資料類型集有用的新增功能是 enum。與 C# 等語言一樣,列舉是一種為數值值集提供更友善名稱的方法。

ts
enum Color {
Red,
Green,
Blue,
}
let c: Color = Color.Green;
Try

預設情況下,列舉從 0 開始編號其成員。您可以透過手動設定其其中一個成員的值來變更此設定。例如,我們可以從 1 而不是 0 開始前一個範例

ts
enum Color {
Red = 1,
Green,
Blue,
}
let c: Color = Color.Green;
Try

或者,甚至手動設定列舉中的所有值

ts
enum Color {
Red = 1,
Green = 2,
Blue = 4,
}
let c: Color = Color.Green;
Try

列舉的一個方便功能是您也可以從數值轉到列舉中該值的對應名稱。例如,如果我們有值 2,但不知道它對應到上面 Color 列舉中的什麼,我們可以查詢對應的名稱

ts
enum Color {
Red = 1,
Green,
Blue,
}
let colorName: string = Color[2];
 
// Displays 'Green'
console.log(colorName);
Try

ts

如果你有一個未知類型的變數,你可以透過執行typeof檢查、比較檢查或更進階的類型防護(將在後面的章節中討論)來將其縮小到更具體的內容。

ts
declare const maybe: unknown;
// 'maybe' could be a string, object, boolean, undefined, or other types
const aNumber: number = maybe;
Type 'unknown' is not assignable to type 'number'.2322Type 'unknown' is not assignable to type 'number'.
 
if (maybe === true) {
// TypeScript knows that maybe is a boolean now
const aBoolean: boolean = maybe;
// So, it cannot be a string
const aString: string = maybe;
Type 'boolean' is not assignable to type 'string'.2322Type 'boolean' is not assignable to type 'string'.
}
 
if (typeof maybe === "string") {
// TypeScript knows that maybe is a string
const aString: string = maybe;
// So, it cannot be a boolean
const aBoolean: boolean = maybe;
Type 'string' is not assignable to type 'boolean'.2322Type 'string' is not assignable to type 'boolean'.
}
Try

任何

在某些情況下,並非所有類型資訊都可用,或者其宣告會花費不適當的精力。這些可能發生在未經 TypeScript 或第三方程式庫撰寫的程式碼中的值。在這些情況下,我們可能希望選擇不進行類型檢查。為此,我們使用any類型標記這些值。

ts
declare function getValue(key: string): any;
// OK, return value of 'getValue' is not checked
const str: string = getValue("myString");
Try

any類型是一種使用現有 JavaScript 的強大方式,允許你在編譯期間逐漸選擇加入和選擇退出類型檢查。

unknown不同,類型為any的變數允許你存取任意屬性,即使是不存在的屬性。這些屬性包括函式,而 TypeScript 也不會檢查它們的存在或類型。

ts
let looselyTyped: any = 4;
// OK, ifItExists might exist at runtime
looselyTyped.ifItExists();
// OK, toFixed exists (but the compiler doesn't check)
looselyTyped.toFixed();
 
let strictlyTyped: unknown = 4;
strictlyTyped.toFixed();
'strictlyTyped' is of type 'unknown'.18046'strictlyTyped' is of type 'unknown'.
Try

any將繼續在你的物件中傳播。

ts
let looselyTyped: any = {};
let d = looselyTyped.a.b.c.d;
let d: any
Try

畢竟,請記住,any的所有便利性都是以失去類型安全性為代價的。類型安全性是使用 TypeScript 的主要動機之一,在不必要時,你應該盡量避免使用any

Void

void 有點像是 any 的相反,表示完全沒有任何類型。你通常會看到這是沒有回傳值的函式的回傳類型

ts
function warnUser(): void {
console.log("This is my warning message");
}
Try

宣告 void 類型的變數沒有用,因為你只能指定 null(僅當未指定 strictNullChecks 時,請參閱下一部分)或 undefined 給它們

ts
let unusable: void = undefined;
// OK if `--strictNullChecks` is not given
unusable = null;
Try

Null 和 Undefined

在 TypeScript 中,undefinednull 實際上都有自己的類型,分別命名為 undefinednull。就像 void 一樣,它們本身並沒有什麼用

ts
// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;
Try

預設情況下,nullundefined 是所有其他類型的子類型。這表示你可以將 nullundefined 指定給 number 等類型。

但是,在使用 strictNullChecks 旗標時,nullundefined 只能指定給 unknownany 及其各自的類型(唯一例外是 undefined 也可以指定給 void)。這有助於避免許多常見的錯誤。在想要傳入 stringnullundefined 的情況下,可以使用聯集類型 string | null | undefined

聯集類型是一個進階的主題,我們將在後面的章節中介紹。

請注意:我們建議在可能的情況下使用 strictNullChecks,但為了本手冊的目的,我們假設它已關閉。

從未

never 類型表示從未出現的值類型。例如,never 是總是擲出例外或從不返回的函數表達式或箭頭函數表達式的傳回類型。當變數由任何永遠不會為真的類型防護縮小時,也會取得類型 never

never 類型是每個類型的子類型,並且可以指定給每個類型;但是,沒有任何類型是 never 的子類型,或可以指定給 never(除了 never 本身)。即使 any 也不能指定給 never

傳回 never 的一些函數範例

ts
// Function returning never must not have a reachable end point
function error(message: string): never {
throw new Error(message);
}
 
// Inferred return type is never
function fail() {
return error("Something failed");
}
 
// Function returning never must not have a reachable end point
function infiniteLoop(): never {
while (true) {}
}
Try

物件

object 是一種表示非原始類型的類型,亦即任何不是 numberstringbooleanbigintsymbolnullundefined 的東西。

使用 object 類型,可以更好地表示 Object.create 等 API。例如

ts
declare function create(o: object | null): void;
 
// OK
create({ prop: 0 });
create(null);
create(undefined); // with `--strictNullChecks` flag enabled, undefined is not a subtype of null
Argument of type 'undefined' is not assignable to parameter of type 'object | null'.2345Argument of type 'undefined' is not assignable to parameter of type 'object | null'.
 
create(42);
Argument of type 'number' is not assignable to parameter of type 'object'.2345Argument of type 'number' is not assignable to parameter of type 'object'.
create("string");
Argument of type 'string' is not assignable to parameter of type 'object'.2345Argument of type 'string' is not assignable to parameter of type 'object'.
create(false);
Argument of type 'boolean' is not assignable to parameter of type 'object'.2345Argument of type 'boolean' is not assignable to parameter of type 'object'.
Try

一般來說,您不需要使用這個。

類型斷言

有時您會遇到比 TypeScript 知道的更多值的情況。通常,當您知道某個實體的類型可能比其目前的類型更具體時,就會發生這種情況。

類型斷言是一種告訴編譯器「相信我,我知道我在做什麼」的方法。類型斷言類似於其他語言中的類型轉換,但它不會執行任何特殊檢查或資料結構調整。它不會對執行時間產生影響,而且純粹由編譯器使用。TypeScript 假設您這個程式設計師已經執行了您需要的任何特殊檢查。

類型斷言有兩種形式。

一種是 as 語法

ts
let someValue: unknown = "this is a string";
 
let strLength: number = (someValue as string).length;
Try

另一種版本是「尖括號」語法

ts
let someValue: unknown = "this is a string";
 
let strLength: number = (<string>someValue).length;
Try

這兩個範例是等效的。使用哪一種主要是偏好的選擇;但是,當將 TypeScript 與 JSX 搭配使用時,只允許使用 as 風格的斷言。

關於 let 的說明

您可能已經注意到,到目前為止,我們一直使用 let 關鍵字,而不是您可能更熟悉的 JavaScript var 關鍵字。let 關鍵字實際上是 TypeScript 提供的較新的 JavaScript 結構。您可以在手冊參考中閱讀 變數宣告,進一步了解 letconst 如何修正 var 的許多問題。

關於 NumberStringBooleanSymbolObject

可能會誤以為 NumberStringBooleanSymbolObject 類型與上述建議的小寫版本相同。但是,這些類型並非指語言原語,而且幾乎不應當用作類型。

ts
function reverse(s: String): String {
return s.split("").reverse().join("");
}
 
reverse("hello world");
Try

請改用 numberstringbooleanobjectsymbol 類型。

ts
function reverse(s: string): string {
return s.split("").reverse().join("");
}
 
reverse("hello world");
Try

TypeScript 文件是一個開源專案。歡迎透過 傳送 Pull Request ❤ 來協助我們改善這些頁面。

此頁面的貢獻者
RCRyan Cavanaugh (53)
OTOrta Therox (33)
DRDaniel Rosenwasser (25)
NSNathan Shively-Sanders (4)
MZMicah Zoltu (3)
47+

上次更新:2024 年 3 月 21 日