如何在React+TypeScript中使用Tawk.to？遇类型声明文件缺失错误

报错信息 #

Could not find a declaration file for module '@tawk.to/tawk-messenger-react'.
'/Users/DrStrange/Desktop/supportapp/node_modules/@tawk.to/tawk-messenger-react/dist/tawk-messenger-react.umd.js' implicitly has an 'any' type.

解决方法 #

1. 安装社区维护的类型声明包 #

在项目根目录执行命令：

npm install @types/tawk.to__tawk-messenger-react --save-dev
# 或使用yarn
yarn add @types/tawk.to__tawk-messenger-react --dev

如果社区有维护对应类型包，这是最便捷的解决方式。

2. 手动创建类型声明文件 #

若没有社区提供的类型包，可自行添加声明文件：

• 在项目根目录新建src/types文件夹（不存在则创建）
• 在该文件夹下创建tawk-messenger-react.d.ts文件，写入以下内容：

declare module '@tawk.to/tawk-messenger-react' {
  import React from 'react';

  interface TawkMessengerProps {
    propertyId: string;
    widgetId: string;
    onLoad?: () => void;
    onChatStart?: () => void;
    onChatEnd?: () => void;
    // 根据实际使用的props补充其他类型定义
  }

  const TawkMessengerReact: React.FC<TawkMessengerProps>;
  export default TawkMessengerReact;
}

• 确保tsconfig.json的include字段包含该类型文件夹，示例：

{
  "include": ["src/**/*", "src/types/**/*"]
}

3. 临时跳过类型检查（不推荐） #

仅用于临时测试场景，在导入时添加注释绕过TypeScript校验：

// @ts-ignore
import TawkMessengerReact from '@tawk.to/tawk-messenger-react';

这种方式会屏蔽类型校验，可能隐藏潜在问题，不建议长期使用。

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