global.d.ts 无效问题解决

__畫戟__2024-04-11 22:01

问题描述

和 src 同级目录有一个 types目录，其中包含 global.d.ts，如下

js 复制代码

declare global {
  interface Window {
    config: {
      url: string;
    };
  }
}

在组件中访问

js 复制代码

window.config = 'x';

ts显示此错误

js 复制代码

Error:(10, 22) TS2339: Property 'config' does not exist on type 'Window'.

我的tsconfig.json如下

json 复制代码

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "jsxImportSource": "vue",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "strictFunctionTypes": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "types": [
      "vite/client"
    ]
  },
  "include": ["src", "types/**/*.d.ts"],
  "exclude": ["dist", "node_modules"]
}

问题解决

方法1

一种简单的方法是从你的 global.d.ts 导出一个空对象，如下所示：

js 复制代码

declare global {
  interface Window {
    config: {
      url: string;
    };
  }
}

// 添加此语句后，Typescript/CRA可以提取声明文件:
export {}

方法2

如果你的.d.ts文件不导入或导出任何内容，您可以省略该declare global块。

你需要确保此文件位于@types目录中，或者你已配置typeRoots为包含类型声明的目录，例如

js 复制代码

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