如何让WordPress本地化对象在TypeScript中可访问？

问题根源 #

wp_localize_script将变量挂载到全局window对象，但TypeScript默认不识别该自定义全局变量，导致编译时抛出TS2304: Cannot find name 'cookieObject'错误，尽管运行时功能正常。

解决方案 #

1. 声明全局变量类型

通过类型声明告知TypeScript全局变量的结构：

方案一：当前文件内声明

在使用cookieObject的TS文件顶部添加：

declare const cookieObject: { page_id: number } | undefined;

方案二：全局类型文件（推荐）

新建global.d.ts文件，扩展Window接口：

declare global {
  interface Window {
    cookieObject?: {
      page_id: number;
    };
  }
}

export {};

在tsconfig.json的include中加入该文件，确保TS编译器识别：

{
  "include": [
    "src/**/*",
    "global.d.ts"
  ]
}

2. 调整调用代码

直接通过window访问全局变量，逻辑更清晰：

if (window.cookieObject) {
  console.log(window.cookieObject.page_id);
}

修改后，TypeScript可正确识别变量类型，编译报错消除，同时保留原有运行功能。

内容的提问来源于stack exchange，提问作者billybadass