前言

剛寫TS那會兒，我看到項目里莫名其妙冒出個types.d.ts或者global.d.ts，心里是有點懵的。啥？這文件是干啥的？我 .ts文件不是已經(jīng)寫類型了嗎？為啥還要多此一舉？

后來，項目越做越大，第三方庫用得越來越多，加上團隊里有人用JS、有人用TS，我才發(fā)現(xiàn)——.d.ts 文件，其實是個“救火隊員”。

一、啥時候你會突然需要.d.ts？

先說個場景。

我們團隊之前接入了一個老系統(tǒng)，人家封裝了個JS工具庫，叫legacy-utils.js，里面一堆函數(shù)：

// legacy-utils.js
function formatDate(date) {
  return date.toISOString().slice(0, 10);
}

function calculateTax(amount, rate) {
  return amount * rate * 0.01;
}

我們在TS項目里直接 import：

import { formatDate } from './legacy-utils';

formatDate(new Date()); // 報錯：Could not find a declaration file...

紅了！ VSCode一下就給你標(biāo)紅，說“這玩意沒類型，我沒法檢查”。

這時候，你有兩個選擇：

1. 改人家JS文件，變成.ts —— 別想，那是別的團隊維護的。
2. 寫個.d.ts文件，告訴TypeScript：“別慌，我知道它有啥類型。”

于是，我默默在項目里建了個types/legacy-utils.d.ts：

// types/legacy-utils.d.ts
declare module 'legacy-utils' {
  export function formatDate(date: Date): string;
  export function calculateTax(amount: number, rate: number): number;
}

然后，在tsconfig.json里確保typeRoots包含了types目錄。

再回到代碼里，紅波浪線沒了，自動補全也有了，世界清凈了。

那一刻我悟了：.d.ts 就是給JS打“類型補丁”的。

二、還有啥場景會用到它？

場景1：全局變量？別慌，.d.ts來兜底

有些老項目，喜歡把變量掛到window上：

// index.html
<script>
  window.APP_CONFIG = { apiUrl: 'https://api.example.com' };
</script>

你在 TS 里寫：

console.log(window.APP_CONFIG.apiUrl); // 類型“Window & typeof globalThis”上不存在屬性“APP_CONFIG”

煩不煩？煩。

解決方法：建個global.d.ts：

// global.d.ts
interface Window {
  APP_CONFIG: {
    apiUrl: string;
  };
}

保存，刷新，紅波浪線消失。舒服了。

我管這個叫“強行擴展”，雖然有點野路子，但項目要上線，誰還管你是不是優(yōu)雅。

場景2：第三方庫沒提供類型？自己寫！

比如你用了某個小眾npm包，叫super-fast-hash，作者沒寫類型，但你又不想用any（畢竟開了 noImplicitAny）。

你可以：

// types/super-fast-hash.d.ts
declare module 'super-fast-hash' {
  const hash: (input: string) => string;
  export default hash;
}

然后你就可以：

import hash from 'super-fast-hash';
const result = hash('hello'); // 類型正確，不報錯

雖然這庫可能就用一次，但至少代碼看起來“專業(yè)”了點，對吧？

場景3：我想在多個文件里用同一個type，但不想到處import

比如我們項目里經(jīng)常用到一種“用戶狀態(tài)”：

type UserStatus = 'active' | 'inactive' | 'pending';

如果每個文件都import，太麻煩。不如：

// types/global-types.d.ts
type UserStatus = 'active' | 'inactive' | 'pending';

然后在 tsconfig.json 里加：

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types", "types"]
  }
}

這樣，所有 .ts文件里都能直接用UserStatus，不用import。

是不是有點“全局污染”？是。但小項目圖個省事。

三、.d.ts文件的潛規(guī)則

1. 文件名無所謂，但最好有意義
   比如axios.d.ts、env.d.ts，一看就知道是干啥的。

2. 內(nèi)容只能是類型相關(guān)
   你不能在.d.ts里寫const x = 1，會報錯。它只能有type、interface、declare 這些。

3. declare module 是“聲明模塊”的全能鑰匙
   第三方庫沒類型？用它！JS 文件想加類型？用它！

4. 別濫用，小心“類型幻覺”
   你寫了個declare const api: any;，確實不報錯了，但等于啥也沒做。類型檢查形同虛設(shè)，別騙自己。

結(jié)尾

.d.ts文件用得好，它讓你的項目更健壯；用得爛，它讓你的類型系統(tǒng)變成“皇帝的新衣”。

（寫完這篇，我回頭看了看項目里的十幾個 .d.ts 文件，嘆了口氣：是時候重構(gòu)了……）

到此這篇關(guān)于為什么你的TypeScript項目里總會有幾個.d.ts文件的文章就介紹到這了,更多相關(guān)TS項目為何有.d.ts文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論