如何解决@tawk.to/tawk-messenger-react模块缺少TypeScript定义的问题

问题场景 #

通过npm i @tawk.to/tawk-messenger-react安装模块后，创建组件并引入：

import TawkMessengerReact from "@tawk.to/tawk-messenger-react";
const TawkMessenger = () => {
  return (
      <TawkMessengerReact
        propertyId="YOUR_PROPERTY_ID"
        widgetId="YOUR_WIDGET_ID"
      />
  ); 
};
export default TawkMessenger;

收到以下错误：

Could not find a declaration file for module '@tawk.to/tawk-messenger-react'. 'c:/develop/eachblock/aquatrack/management-tool-app/node_modules/@tawk.to/tawk-messenger-react/dist/tawk-messenger-react.es.js' implicitly has an 'any' type. Try npm i --save-dev @types/tawk.to__tawk-messenger-react if it exists or add a new declaration (.d.ts) file containing declare module '@tawk.to/tawk-messenger-react';

尝试安装@types/tawk.to__tawk-messenger-react失败，说明官方未提供对应类型包，以下是可行解决方法：

方法1：手动创建自定义类型声明文件 #

这是最推荐的长期解决方案：

1. 在项目根目录或src文件夹下新建types目录（若不存在）
2. 在types目录中创建文件tawk-messenger-react.d.ts
3. 将以下内容写入该文件（可根据组件实际支持的props补充更多类型）：

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

  interface TawkMessengerReactProps {
    propertyId: string;
    widgetId: string;
    onLoad?: () => void;
    onChatMinimize?: () => void;
    onChatMaximize?: () => void;
    onChatStart?: () => void;
    onChatEnd?: () => void;
  }

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

4. 修改tsconfig.json，确保类型文件被TypeScript识别，在include数组中添加：

"include": [
  // 其他已有路径
  "./types/**/*.d.ts"
]

方法2：临时忽略类型检查 #

如果仅需快速运行项目、不想编写类型，可在导入时添加忽略注释：

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

注意：该方法会跳过模块类型校验，不推荐生产环境长期使用。

方法3：贡献类型定义到DefinitelyTyped（可选） #

若有精力，可将完善后的类型定义提交到DefinitelyTyped仓库，帮助其他遇到相同问题的开发者。

内容的提问来源于stack exchange，提问作者Caleb benjamin Calebbenjin