TypeScript 類型主要用于編譯時(shí)進(jìn)行類型檢查，并在編譯為 JavaScript 后被擦除，因此無(wú)法在運(yùn)行時(shí)直接作為值訪問(wèn)。若需在運(yùn)行時(shí)獲取或使用字面量值，應(yīng)采用 const 常量或?qū)ο髮傩詠?lái)存儲(chǔ)這些值，并通過(guò) typeof 操作符輔助推導(dǎo)類型，從而在保證類型安全的同時(shí)，實(shí)現(xiàn)運(yùn)行時(shí)值的訪問(wèn)。

1. TypeScript 類型基礎(chǔ)與運(yùn)行時(shí)行為

TypeScript 的核心價(jià)值在于其強(qiáng)大的靜態(tài)類型系統(tǒng)，它允許開(kāi)發(fā)者在代碼編寫階段捕獲潛在的類型錯(cuò)誤。type 關(guān)鍵字用于聲明類型別名，它本質(zhì)上是一種編譯時(shí)構(gòu)造，僅用于提供類型信息，幫助編譯器進(jìn)行檢查。例如：

type CardType = 'InformationCard';

這里的 CardType 聲明了一個(gè)字符串字面量類型 'InformationCard'。在 TypeScript 代碼被編譯成純 JavaScript 后，所有的類型信息都會(huì)被“擦除” (Type Erasure)，這意味著在運(yùn)行時(shí)，這些類型聲明將不復(fù)存在。因此，嘗試在運(yùn)行時(shí)直接訪問(wèn)一個(gè) type 聲明，例如 console.log(CardType)，是不可行的，因?yàn)?CardType 在 JavaScript 運(yùn)行時(shí)環(huán)境中并沒(méi)有對(duì)應(yīng)的實(shí)體。

2. 運(yùn)行時(shí)獲取值的替代方案

由于類型在運(yùn)行時(shí)不可用，如果我們需要在運(yùn)行時(shí)獲取或使用一個(gè)特定的字面量值（例如上述的 'InformationCard'），我們需要將其存儲(chǔ)在一個(gè) JavaScript 運(yùn)行時(shí)可訪問(wèn)的實(shí)體中，如 const 變量或?qū)ο髮傩浴?/p>

2.1 使用常量聲明字符串字面量

最直接的方法是使用 const 關(guān)鍵字聲明一個(gè)常量來(lái)存儲(chǔ)所需的字符串字面量。這樣，這個(gè)值在運(yùn)行時(shí)是可訪問(wèn)的。

// 定義一個(gè)常量，其值在運(yùn)行時(shí)可用
const CARD_TYPE_VALUE = 'InformationCard';

console.log(CARD_TYPE_VALUE); // 輸出: InformationCard

// 可以在類型定義中引用這個(gè)常量的值類型，以保持類型一致性
type MyCardType = typeof CARD_TYPE_VALUE; // MyCardType 的類型是 'InformationCard'

function processCard(type: MyCardType) {
    console.log(`處理卡片類型: ${type}`);
}

processCard(CARD_TYPE_VALUE); // 正確
// processCard('OtherCard'); // 編譯錯(cuò)誤，因?yàn)?'OtherCard' 不是 MyCardType

這種方法清晰地分離了類型定義和值定義，同時(shí)通過(guò) typeof 確保了類型與值的關(guān)聯(lián)性。

2.2 使用對(duì)象存儲(chǔ)字面量值

當(dāng)需要管理一組相關(guān)的字面量值時(shí)，將它們作為對(duì)象的屬性來(lái)存儲(chǔ)是一種常見(jiàn)的做法。這種方式不僅可以在運(yùn)行時(shí)訪問(wèn)這些值，還能提供更好的組織結(jié)構(gòu)。

// 定義一個(gè)對(duì)象，其屬性值在運(yùn)行時(shí)可用
const CardConstants = {
    informationCard: "InformationCard",
    warningCard: "WarningCard",
    // 更多卡片類型...
} as const; // 使用 'as const' 斷言，將屬性值推斷為字面量類型

console.log(CardConstants.informationCard); // 輸出: InformationCard

// 從對(duì)象屬性中提取類型，創(chuàng)建聯(lián)合類型
type AvailableCardType = typeof CardConstants[keyof typeof CardConstants];
// AvailableCardType 的類型是 "InformationCard" | "WarningCard"

function displayCard(type: AvailableCardType) {
    console.log(`顯示卡片類型: ${type}`);
}

displayCard(CardConstants.informationCard); // 正確
// displayCard("UnknownCard"); // 編譯錯(cuò)誤

使用 as const 斷言是一個(gè)重要的技巧，它告訴 TypeScript 將對(duì)象中的每個(gè)屬性值推斷為其最窄的字面量類型（例如，"InformationCard" 而不是 string），這對(duì)于創(chuàng)建精確的聯(lián)合類型至關(guān)重要。

3. 注意事項(xiàng)與最佳實(shí)踐

• 明確區(qū)分類型與值： 始終記住 type 聲明僅存在于編譯時(shí)，而 const 聲明或?qū)ο髮傩詣t在運(yùn)行時(shí)持有實(shí)際的值。

• 利用 typeof 運(yùn)算符： typeof 運(yùn)算符在 TypeScript 中有兩種用法。當(dāng)它用于表達(dá)式時(shí)，它返回一個(gè)字符串，表示表達(dá)式的數(shù)據(jù)類型（如 JavaScript 的 typeof）。當(dāng)它用于類型上下文時(shí)，它用于獲取變量或?qū)傩缘?TypeScript 類型。這是將運(yùn)行時(shí)值與編譯時(shí)類型關(guān)聯(lián)起來(lái)的關(guān)鍵。

• 枚舉類型 (Enums)： 對(duì)于一組相關(guān)的常量，TypeScript 的 enum 類型也是一個(gè)可行的選擇。枚舉成員既可以作為類型使用，也可以作為運(yùn)行時(shí)值使用。

  enum CardEnum {
      Information = 'InformationCard',
      Warning = 'WarningCard',
  }
  
  console.log(CardEnum.Information); // 輸出: InformationCard
  
  function processCardByEnum(type: CardEnum) {
      console.log(`處理枚舉卡片類型: ${type}`);
  }
  
  processCardByEnum(CardEnum.Warning); // 正確

  然而，在現(xiàn)代 TypeScript 開(kāi)發(fā)中，as const 斷言的對(duì)象字面量通常比 enum 更受青睞，因?yàn)樗峁┝烁`活的類型推斷和更小的編譯產(chǎn)物。

4. 總結(jié)

在 TypeScript 中，類型聲明（如 type 別名）是編譯時(shí)概念，它們?cè)谶\(yùn)行時(shí)會(huì)被擦除。因此，我們不能直接從 type 聲明中獲取運(yùn)行時(shí)值。要實(shí)現(xiàn)運(yùn)行時(shí)對(duì)特定字面量值的訪問(wèn)，我們需要將這些值存儲(chǔ)在 JavaScript 運(yùn)行時(shí)可用的實(shí)體中，例如 const 常量或?qū)ο蟮膶傩?。通過(guò)結(jié)合使用 const 聲明和 typeof 類型運(yùn)算符，我們可以在保持嚴(yán)格類型檢查的同時(shí)，有效地管理和使用運(yùn)行時(shí)值，從而編寫出既健壯又靈活的 TypeScript 代碼。

以上がTypeScript の型と実行時(shí)の値: 深い理解と実踐の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。