TS系列(4): let和const是如何工作的?

本篇是「一起学习TypeScript 」系列的第4篇,接下来笔者将持续深耕,不定时更新一系列精彩纷呈的TypeScript文章,旨在解答使用TypeScript过程中的各种疑难杂症,一起探索TS的无穷魅力!

【TS系列回顾】:

TS系列(1): React中能否使子组件实现"类型安全"?

TS系列(2): 使用泛型提升TS函数可重用性

TS系列(3): 什么情况下可以使用any?

众所周知,在TS中声明变量(let 或者const)的方式会影响它们是否可以更改。

一、TS如何推断let变量?

当我们使用let关键字声明变量时,变量是可变的且可以重新被赋值。

🌰假设,我们有1个代表唱片流派的类型AlbumGenre

ts 复制代码
type AlbumGenre = "rock" | "country" | "electric"

现在,使用let声明一个变量albumGenre

上述代码中,由于声明变量时使用的是let,TS知道该值稍后可以更改,它将albumGenre推断为string类型,而不是特定的文字类型"rock"。因为我们后续可以继续将albumGenre赋值,例如:

ts 复制代码
albumGenre = "country"

所以,当我们使用let声明时,TS会推断出更宽的类型以容纳你后续会重新分配的变量!

那么,应该怎么修改呢?如下👇🏻所示,现在albumGenre 可以被重新赋值,并且只能赋AlbumGenre 集合里的值。此时,当我们调用handleGenre就不再回飘红了:

二、TS如何推断const变量?

当我们使用const关键字声明变量时,变量是不可变的,不可以重新被赋值!

相比于let,TS在推断const声明的变量时,类型会更窄:

此时,我们将鼠标悬停在albumGenre上时,会发现TS已经将其推断为文字类型"rock"

如果你对const变量进行重新赋值,会发现:

TypeScript模仿了JavaScript对const的处理,以防止可能的运行时错误。当你使用const声明变量时, TS 会将其推断为你指定的文字类型

因此,我们可以得知TS利用了JS的工作原理来发挥其优势。这也提醒了我们,在声明变量时尽量使用const而不是let,因为const在类型限制上更加严格!

如果,你不得不使用let声明变量,也尽量在声明时指定清楚该变量的类型哦😉

相关推荐
kyriewen35 分钟前
我扒了 GPT-5.6 的全部编程跑分——有一项 OpenAI 没敢放出来
前端·gpt·ai编程
前端H1 小时前
微前端 v3 架构升级:从加载隔离到状态协同
前端·架构·状态模式
陆枫Larry2 小时前
小程序包体积优化:用 SVG 图片替换 iconfont,并保留 CSS 控色能力
前端
退休倒计时3 小时前
【每日一题】LeetCode 437. 路径总和 III TypeScript
算法·leetcode·typescript
环境栈笔记3 小时前
多账号浏览器选型检查清单:Profile、权限、Session 和任务日志怎么评估
前端·人工智能·后端·自动化
前端炒粉4 小时前
手写promise
java·前端·javascript
LaughingZhu4 小时前
智能体经典范式构建:ReAct、Plan-and-Solve 与 Reflection
前端·react.js·前端框架
jsonbro4 小时前
手把手带你实现发布订阅模式
前端·vue.js·设计模式
一只猫的梦4 小时前
自动化模块 (Automation Module)
前端·chrome
熊猫钓鱼>_>4 小时前
Electron:当 Web 技术统治桌面
大数据·前端·javascript·人工智能·架构·electron·agent