如何在TypeScript中调用Eel暴露的Python函数？JS可正常运行

核心问题 #

TypeScript是强类型语言，编译阶段无法识别Eel在运行时注入到全局的eel对象及其中的Python暴露函数——这就是报错的根源，而纯JS不做静态类型检查，所以能正常运行。

具体解决方案 #

1. 添加全局类型声明 #

创建一个eel.d.ts类型声明文件（放在项目根目录或源码目录下），让TypeScript识别eel对象：

简易版（快速解决）

declare global {
  interface Window {
    eel: any;
  }
}

export {};

精准版（推荐，获得类型提示）

如果清楚暴露的Python函数签名，可以更精确地声明，避免调用时传参错误：

declare global {
  // 定义你暴露的Python函数类型
  interface EelExposedFunctions {
    // 示例：假设暴露了一个接收字符串、返回Promise的问候函数
    greet(name: string): Promise<string>;
    // 按需添加其他函数，比如计算求和
    calculate_sum(a: number, b: number): Promise<number>;
  }

  interface Window {
    eel: EelExposedFunctions;
  }
}

export {};

2. TypeScript中调用函数的方式 #

和JS逻辑完全一致，现在TypeScript不会再报错：

// 调用示例：问候函数
window.eel.greet("Rafael")
  .then((response) => {
    console.log(response);
  })
  .catch((err) => {
    console.error("调用失败:", err);
  });

// 调用示例：求和函数
window.eel.calculate_sum(5, 3)
  .then((total) => {
    console.log("总和:", total);
  });

3. 确保TypeScript配置包含类型文件 #

检查tsconfig.json的include字段，确保它覆盖了你的eel.d.ts文件：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*", "./eel.d.ts"]
}

原理补充 #

Eel在页面加载完成后，会自动把Python端暴露的函数挂载到全局window.eel对象上。JS是动态类型语言，运行时能直接访问这个对象；但TypeScript在编译阶段做静态类型检查，默认不知道这个全局对象的存在，所以必须通过类型声明告知编译器对象的结构。

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