有時候，你可能想在 TypeScript 使用一些自定義全局變量。例如，在我的一些 Web 應用程序中，我需要將一些從服務器端渲染時傳遞過來的屬性給在瀏覽器中運行的 JavaScript 代碼使用。為了做到這一點，通常我會在內(nèi)聯(lián)腳本中定義一個名為 __INITIAL_DATA__ 的全局變量，并將一個 JSON 序列化對象賦值給它：

<script>
  window.__INITIAL_DATA__ = {
    userID: "536891193569405430",
  };
</script>

現(xiàn)在，如果我嘗試在一個 TypeScript 文件中訪問 window.__INITIAL_DATA__ 時，編譯器就會產(chǎn)生一個類型錯誤，因為它找不到 __INITIAL_DATA__ 屬性的定義。

// Property '__INITIAL_DATA__' does not exist
// on type 'Window & typeof globalThis'
const initialData = window.__INITIAL_DATA__;

接下來，我將向你展示幾種不同的方法，讓 TypeScript 知道 window.__INITIAL_DATA__ 屬性的存在，并消除類型錯誤。

使用類型斷言

消除類型錯誤的最快方法是在類型斷言中使用 any 類型。我們可以將 window 對象視為任意類型，以便訪問其 __INITIAL_DATA__ 屬性：

const initialData = (window as any).__INITIAL_DATA__;

這個解決方案有效，我們不再遇到類型錯誤。如果你需要一種臨時的方式來訪問 TypeScript 不知道的 window 對象上的屬性，這是一個實用的方法。

(window as any).__INITIAL_DATA__ 表達式是任意類型，因此 initialData 也是任意類型。我們可以進一步使用另一種類型斷言來給 initialData 變量指定更具體的類型：

type InitialData = {
  userID: string;
};
const initialData = (window as any).__INITIAL_DATA__ as InitialData;

現(xiàn)在，我們可以以類型安全的方式訪問 initialData.userID ：

const userID = initialData.userID; // string 類型 

請記住，這并不保證 window.__INITIAL_DATA__ 在運行時會被正確設置。類型檢查器相信我們，并且我們的工作是確保將一個符合預期形狀的對象賦值給 window.__INITIAL_DATA__ 。

聲明一個全局變量

另一種方法是使用 declare var 語法聲明一個全局變量。這樣，我們可以讓 TypeScript 找到這個具有給定名稱和類型的全局變量：

declare var __INITIAL_DATA__: InitialData; 

我們現(xiàn)在可以直接訪問 __INITIAL_DATA__ 變量了……

const initialData = __INITIAL_DATA__; 

……或通過 window 對象獲?。?/p>

const initialData = window.__INITIAL_DATA__; 

有一點要注意的是，在ECMAScript模塊內(nèi)部通過 declare var 聲明的變量是是無法通過 window.__INITIAL_DATA__ 形式訪問的，會收到類型錯誤。而所謂 ECMAScript 模塊就是包含頂級 import 或 export 聲明的那些文件。

你可以使用 declare global { ... } 語法在全局作用域中聲明一個全局變量，以便能夠在 JavaScript 模塊內(nèi)部或外部文件通過 window.__INITIAL_DATA__ 和 __INITIAL_DATA__ 兩種形式訪問。

export function someExportedFunction() {
  // ...
}
declare global {
  var __INITIAL_DATA__: InitialData;
}
const initialData = window.__INITIAL_DATA__;

如果你需要在多個文件或模塊中訪問 window.__INITIAL_DATA__ ，那么在項目中創(chuàng)建一個 globals.d.ts 文件可能是個好主意。在這個文件中，你可以聲明所有將要使用的全局變量：

declare var __INITIAL_DATA__: InitialData; 

增強 Window 接口

最后，你可以使用TypeScript 的接口聲明合并來告訴編譯器在 Window 類型上有一個名為 __INITIAL_DATA__ 的屬性。為了做到這一點，你需要定義一個名為 Window 的接口，設置一個名為 __INITIAL_DATA__ 的屬性：

interface Window {
  __INITIAL_DATA__: InitialData;
}

TypeScript 將會上面的這個接口定義和 lib.dom.d.ts 中定義的 Window 接口合并，從而得到一個單一的 Window 類型。這樣一來，下面的賦值就不再產(chǎn)生類型錯誤了：

const initialData = window.__INITIAL_DATA__; 

請注意，這種方法同樣 ECMAScript 模塊中不起作用。為了使 window.__INITIAL_DATA__ 表達式能夠正確進行類型檢查，需要再次使用 declare global { ... } 語法：

export function someExportedFunction() {
  // ...
}
declare global {
  interface Window {
    __INITIAL_DATA__: InitialData;
  }
}
const initialData = window.__INITIAL_DATA__;

以上就是詳解如何在TypeScript中聲明全局變量的詳細內(nèi)容，更多關于TypeScript聲明全局變量的資料請關注腳本之家其它相關文章！

最新評論