TypeScript之字面量類型的使用詳解
更新時(shí)間：2025年12月28日 10:59:47 作者：無(wú)風(fēng)聽海
在TypeScript中,字面量類型是值級(jí)別的類型,表示某個(gè)值本身就是類型的一部分,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
?? 一、什么是字面量類型（Literal Types）？
在 TypeScript 中，字面量類型（Literal Types）是值級(jí)別的類型，表示某個(gè)值本身就是類型的一部分。
常見的字面量類型包括：
| 字面量類型 | 舉例 |
|---|---|
| 數(shù)字 | 1, 42, 0 |
| 字符串 | "hello", "yes" |
| 布爾 | true, false |
這些類型只接受對(duì)應(yīng)的字面值：
type A = 1; const x: A = 1; // ? 合法 const y: A = 2; // ? 報(bào)錯(cuò)：不能賦值 number 給類型 1
?? 為什么要有字面量類型？
字面量類型讓我們可以更嚴(yán)格、更精確地控制值的合法性。
比如在按鈕組件中：
type ButtonSize = 'small' | 'medium' | 'large';
function createButton(size: ButtonSize) { ... }
createButton('medium'); // ?
createButton('huge'); // ? 類型錯(cuò)誤
?? 二、字面量類型 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
?? 三、什么時(shí)候會(huì)推斷為字面量類型？
這是關(guān)鍵！我們來看 TypeScript 中推斷為字面量類型的幾種情況：
? 1.const聲明的變量，會(huì)推斷為字面量類型
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';
? 不會(huì)推斷為字面量類型的情況
| 情況 | 推斷類型 | 原因 |
|---|---|---|
| let a = 42; | number | 因?yàn)?let 變量是可變的 |
| const a = someFunc(); | 非字面量 | 如果返回值無(wú)法靜態(tài)分析成字面量 |
| const obj = { key: 'value' }; | { key: string } | 對(duì)象屬性默認(rèn)是寬泛類型，除非加 as const |
?? 四、推斷字面量類型的實(shí)際應(yīng)用場(chǎ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é)：字面量類型核心知識(shí)表
| 知識(shí)點(diǎn) | 說明 |
|---|---|
| 字面量類型定義 | 1, "hi", true 等 |
| 推斷為字面量的條件 | const 聲明、as const、手動(dòng)指定字面量類型 |
| 推斷不會(huì)是字面量的情況 | let、函數(shù)返回值、普通對(duì)象/數(shù)組字面量 |
| 實(shí)際用途 | 更精確的類型檢查、discriminated union、配置常量、枚舉替代等 |
到此這篇關(guān)于TypeScript之字面量類型的使用詳解的文章就介紹到這了,更多相關(guān)TypeScript 字面量類型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整
輸入框組默認(rèn)是div.input-group。接下來通過本文給大家介紹bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整，感興趣的朋友一起看看吧2016-10-10
想象一下，你把一個(gè)重要內(nèi)容放在一個(gè)彈出窗口，又不聚集到這個(gè)窗口。讓使用屏幕閱讀器的同學(xué)情何以堪，只有當(dāng)他們 tab 到這頁(yè)面結(jié)束，還繼續(xù) tab，才可能找到這個(gè)彈窗2011-10-10
javascript(js) join函數(shù)使用方法介紹
javascript(js) join函數(shù)使用方法介紹...2007-11-11
JavaScript與Cookie之利用Cookie記錄用戶登錄信息2009-12-12
JavaScript ES6中類與模塊化管理超詳細(xì)講解
JavaScript中的模塊化是指將每個(gè)js文件會(huì)被認(rèn)為單獨(dú)一個(gè)的模塊。模塊之間是互相不可見的。如果一個(gè)模塊需要使用另一個(gè)模塊，那么需要通過指定語(yǔ)法來引入要使用的模塊，而且只能使用引入模塊所暴露的內(nèi)容2023-01-01
這篇文章主要介紹了javascript中的set的常用方法和操作,在JavaScript中Set是一種特殊的數(shù)據(jù)結(jié)構(gòu),用于存儲(chǔ)唯一的值,創(chuàng)建Set對(duì)象可以通過new?Set()實(shí)現(xiàn),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果完整實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果,涉及javascript面向?qū)ο蠹笆录O(jiān)聽、響應(yīng)機(jī)制相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
前端開發(fā)常見問題之一： 資源異常、js異常,頁(yè)面出了問題常見的想法是：如何看到錯(cuò)誤信息,資源腳本是否正常,像js、css、圖片這些資源文件經(jīng)常受網(wǎng)絡(luò)等原因,導(dǎo)致資源加載異常,這些會(huì)直接影響我們的頁(yè)面,本文給大家介紹前端監(jiān)控頁(yè)面異常的常用方法,需要的朋友可以參考下2025-04-04
js實(shí)現(xiàn)用戶輸入的小寫字母自動(dòng)轉(zhuǎn)大寫字母的方法
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)用戶輸入的小寫字母自動(dòng)轉(zhuǎn)大寫字母的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
map()方法定義在JavaScript的Array中，它返回一個(gè)新的數(shù)組，數(shù)組中的元素為原始數(shù)組調(diào)用函數(shù)處理后的值，這篇文章主要介紹了js中map()函數(shù)的使用,需要的朋友可以參考下2022-11-11