TypeScript之字面量類型的使用詳解
更新時間：2025年12月28日 10:59:47 作者：無風(fēng)聽海
在TypeScript中,字面量類型是值級別的類型,表示某個值本身就是類型的一部分,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
?? 一、什么是字面量類型（Literal Types）？
在 TypeScript 中，字面量類型（Literal Types）是值級別的類型，表示某個值本身就是類型的一部分。
常見的字面量類型包括：
| 字面量類型 | 舉例 |
|---|---|
| 數(shù)字 | 1, 42, 0 |
| 字符串 | "hello", "yes" |
| 布爾 | true, false |
這些類型只接受對應(yīng)的字面值：
type A = 1; const x: A = 1; // ? 合法 const y: A = 2; // ? 報錯：不能賦值 number 給類型 1
?? 為什么要有字面量類型？
字面量類型讓我們可以更嚴(yán)格、更精確地控制值的合法性。
比如在按鈕組件中：
type ButtonSize = 'small' | 'medium' | 'large';
function createButton(size: ButtonSize) { ... }
createButton('medium'); // ?
createButton('huge'); // ? 類型錯誤
?? 二、字面量類型 VS 基礎(chǔ)類型的區(qū)別
| 字面量類型 | 寬泛基礎(chǔ)類型 |
|---|---|
| 'hello' | string |
| 1 | number |
| true | boolean |
你可以認(rèn)為字面量類型是基礎(chǔ)類型的“子類型”。
let a: 'yes' = 'yes'; // ? let b: string = 'yes'; // ? a = b; // ? string 可能不等于 'yes' b = a; // ? 'yes' 一定是 string
?? 三、什么時候會推斷為字面量類型？
這是關(guān)鍵！我們來看 TypeScript 中推斷為字面量類型的幾種情況：
? 1.const聲明的變量，會推斷為字面量類型
const a = 42; // 推斷為 42（字面量類型） let b = 42; // 推斷為 number（更寬泛）
const s = "hello"; // 推斷為 "hello" let t = "hello"; // 推斷為 string
?? 原理： const 聲明表示變量值不可變，所以可以精確地推斷為值本身的類型。
? 2. 使用as const明確指定字面量類型
const arr = [1, 2, 3] as const; // 推斷為 readonly [1, 2, 3] （字面量元組）
const obj = {
type: 'success',
code: 200,
} as const;
// 推斷為 { readonly type: 'success'; readonly code: 200 }
?? as const 是字面量推斷的強(qiáng)制方式，常用于需要精準(zhǔn)類型的地方，比如 Redux、API 返回值、類型映射。
? 3. 明確寫了字面量類型
當(dāng)然，最直接的方法就是你直接指定類型：
let status: 'loading' | 'done' = 'loading';
? 不會推斷為字面量類型的情況
| 情況 | 推斷類型 | 原因 |
|---|---|---|
| let a = 42; | number | 因為 let 變量是可變的 |
| const a = someFunc(); | 非字面量 | 如果返回值無法靜態(tài)分析成字面量 |
| const obj = { key: 'value' }; | { key: string } | 對象屬性默認(rèn)是寬泛類型，除非加 as const |
?? 四、推斷字面量類型的實際應(yīng)用場景
1. 聯(lián)合類型的類型保護(hù)
type Action = 'increment' | 'decrement';
function reducer(action: Action) {
if (action === 'increment') {
// ? Narrowing to 'increment'
}
}
2. 字面量值作為 discriminated union 的 tag
type Shape =
| { kind: 'circle'; radius: number }
| { kind: 'square'; side: number };
function getArea(shape: Shape) {
if (shape.kind === 'circle') {
return Math.PI * shape.radius ** 2;
}
}
3. 使用as const提供精確值類型
const options = ['up', 'down'] as const; type Direction = typeof options[number]; // 'up' | 'down'
? 總結(jié)：字面量類型核心知識表
| 知識點 | 說明 |
|---|---|
| 字面量類型定義 | 1, "hi", true 等 |
| 推斷為字面量的條件 | const 聲明、as const、手動指定字面量類型 |
| 推斷不會是字面量的情況 | let、函數(shù)返回值、普通對象/數(shù)組字面量 |
| 實際用途 | 更精確的類型檢查、discriminated union、配置常量、枚舉替代等 |
到此這篇關(guān)于TypeScript之字面量類型的使用詳解的文章就介紹到這了,更多相關(guān)TypeScript 字面量類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript簡單獲取頁面圖片原始尺寸的方法,可通過Image()對象直接獲取圖片的原始寬高,簡單實用,需要的朋友可以參考下2016-06-06
如何在JavaScript中等分?jǐn)?shù)組的實現(xiàn)
這篇文章主要介紹了如何在JavaScript中等分?jǐn)?shù)組的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)加載進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章給大家介紹了uniapp實現(xiàn)微信小程序一鍵登錄功能,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-10-10
本文詳細(xì)介紹了通過jquery尺寸相關(guān)函數(shù)實現(xiàn)文字自動橫移的方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
JavaScript數(shù)據(jù)結(jié)構(gòu)常見面試問題整理
在JavaScript中,數(shù)據(jù)結(jié)構(gòu)是指相互之間存在一種或多種特定關(guān)系的數(shù)據(jù)元素的集合,是帶有結(jié)構(gòu)特性的數(shù)據(jù)元素的集合。常用的數(shù)據(jù)結(jié)構(gòu)有:數(shù)組、列表、棧、隊列、鏈表、字典、集合等等2022-08-08
JavaScript實現(xiàn)的經(jīng)典文件樹菜單效果
這篇文章主要介紹了JavaScript實現(xiàn)的經(jīng)典文件樹菜單效果,通過JavaScript結(jié)合json數(shù)組實現(xiàn)文件樹菜單的效果,非常簡單實用,需要的朋友可以參考下2015-09-09
利用JavaScript優(yōu)雅地實現(xiàn)每5秒輪詢請求功能
在做實時監(jiān)控系統(tǒng)時,比如服務(wù)器狀態(tài)面板、訂單處理中心或物聯(lián)網(wǎng)設(shè)備看板,每隔 5 秒自動拉取最新數(shù)據(jù)是再常見不過的需求了,但是會遇到好多問題今天我就以一個運(yùn)維監(jiān)控平臺的真實場景為例,帶你從能用做到好用,需要的朋友可以參考下2025-07-07
這篇文章主要介紹了javascript iframe跨域詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
js實現(xiàn)的真正的iframe高度自適應(yīng)(兼容IE,FF,Opera)
由于項目上的需要，要用一個iframe高度自適應(yīng)的功能，在google上搜了很久，找了一些修改了下。大家可以測試下。2010-03-03