TypeScript 超實用的新功能來了!
由于 TypeScript 團隊正全力投入下一代 TS 編譯器(v7.0,Go 原生重寫)的開發,原定 7 月 22 日發布的 5.9 版本延期至 8 月 1 日。
雖遲但到,TypeScript 5.9 已正式上線。這一版本沒有引入驚天動地的功能,但在模塊系統、編輯器體驗、默認配置等方面做了不少貼心優化,讓我們這些日常用 TS 的開發者寫得更順、更省心。
更現代的 tsc --init
還記得以前執行 tsc --init 生成的 tsconfig.json 嗎?幾百行的注釋,看得人眼花繚亂,刪都刪不完。TypeScript 5.9 對此下了狠手——大幅瘦身,只保留了核心配置項,足夠現代、也足夠實用。
默認生成的配置如下(刪去了不必要的注釋和冗余):
圖片
整體感覺是:開箱即用,不再啰嗦。新手能快速上手,老手也少了刪配置的煩惱。
全新模塊語法:import defer
這是 5.9 中最具探索性的新增語法,基于 ECMAScript 的提案實現了一種“懶加載模塊”的方式。
提案:https://github.com/tc39/proposal-defer-import-eval/
import defer * as logger from './logger.js';
console.log('程序開始');
// logger.js 在這一刻才真正加載并執行
logger.log('這是一條日志:前端充電寶nb');這意味著什么?模塊的副作用代碼(比如在頂層輸出日志、讀取文件等)不會一上來就跑,只有你訪問它的某個成員時才觸發。這對「有副作用但不一定用到」的工具模塊尤其友好。
使用限制:
- 只能在 --module esnext 下啟用
- 僅支持命名空間形式:import defer * as foo,不支持默認導入
舉個例子:假設你有個只在開發時才用的調試工具模塊:
if (process.env.NODE_ENV === 'development') {
const { inspect } = await import('./debug-tools.js');
inspect(data);
}可以換成更清爽的寫法:
import defer * as debugTools from './debug-tools.js';
if (process.env.NODE_ENV === 'development') {
debugTools.inspect(data);
}優點顯而易見:
- 邏輯直觀,不再需要動態 import。
- 生產環境下不會提前加載該模塊,提升性能。
新模塊目標:node20
隨著 Node.js 的模塊解析機制日趨復雜,TypeScript 也推出了新的模塊目標:node20。
這個選項的作用是讓 TS 編譯器更好地模擬 Node.js 20 的行為,并避免受未來 Node 版本影響。簡單來說,就是「鎖定」當前的行為,寫起來更安心:
{
"compilerOptions": {
"module": "node20",
"moduleResolution": "node20"
}
}對比 nodenext,node20 更穩定、保守:
- 不追蹤 Node 的后續模塊變動。
- 默認 target 為 es2023,避免過度前沿特性。
- 對模塊路徑和擴展名的要求更嚴格,有利于避免“能跑不能構建”的尷尬。
類型提示更聰明了
寫 TS 的人應該都被 VS Code 的類型提示“嚇”過:一 hover,提示框鋪滿一整頁,復雜嵌套類型壓得喘不過氣。
現在不一樣了,TypeScript 5.9 對這塊做了顯著提升:
- 類型結構支持折疊/展開
- 默認展示更清晰簡潔
- 可以自定義提示長度(配置項:js/ts.hover.maximumLength)
來看個簡單例子:
圖片
在 VS Code 里將鼠標懸停在 options 上,5.9 版本會顯示這樣的內容:
圖片
點擊 +,才展開完整結構。這在大項目、深層嵌套的類型系統里,真的省眼又高效。
性能優化與 bug 修復
雖然不是重頭戲,但這部分更新依然值得一提:
- 大型項目首次打開更快,編輯器響應更流暢
- 修復了 AbortSignal.abort() 類型缺失問題
- 改進 JSX 工程的模塊處理邏輯
- 類型縮減邏輯更嚴謹,解決一些邊緣 bug
總結一下
TypeScript 5.9 沒有大張旗鼓,但每一處改進都很實用:
- 項目初始化更輕巧現代
- 模塊加載更智能靈活
- 類型提示更易讀可控
- 模塊目標更穩定可靠
對于日常開發者來說,寫起 TypeScript 來會更順手、更安心,也更有「這工具懂我」的感覺。





























