React TS开发Amazon Connect坐席聊天面板报getMediaController不存在错误

问题原因 #

这个报错是TypeScript类型定义不匹配导致的：getMediaController是amazon-connect-chatjs扩展amazon-connect-streams中BaseConnection原型追加的方法，官方提供的@types/amazon-connect-streams类型声明没有包含这部分扩展定义，所以TS会抛出不存在该属性的错误。

解决步骤 #

• 方案1：全局扩展类型声明（推荐）
  在项目src目录下新建amazon-connect-chat.d.ts类型定义文件，写入以下内容：

import "amazon-connect-streams";

declare module "amazon-connect-streams" {
  interface BaseConnection {
    // 为BaseConnection扩展chatjs新增的getMediaController方法类型
    getMediaController(): Promise<any>;
    // 如果已经安装了@types/amazon-connect-chatjs，可以替换成更精确的类型：
    // getMediaController(): Promise<import("amazon-connect-chatjs").ChatSession>;
  }
}

确认你的tsconfig.json中include配置包含了该声明文件（默认"src/**/*"即可自动识别），保存后重启TS服务即可消除报错。

• 方案2：临时类型断言
  如果仅需要快速消除当前报错，可以对调用对象做类型断言：

const agentChatSession = await (cnn as any).getMediaController();

• 额外检查项
  确认你项目的依赖导入顺序没有问题，必须保证amazon-connect-streams的导入语句在amazon-connect-chatjs之前，否则运行时也可能出现该方法不存在的实际报错。

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