Angular组件@Input用AMap.Size类型运行时报错咨询

我来帮你拆解下这个问题：你遇到的核心矛盾是——TypeScript的类型注解本该在编译时被完全擦除，但这里AMap.Size的引用却被保留到了运行时，导致浏览器找不到全局的AMap变量（毕竟你只有类型声明，没有实际的AMap runtime代码）。

为什么会出现这种情况？ #

虽然declare namespace AMap是仅用于类型检查的ambient声明，但在以下场景中，TypeScript（尤其是Angular的AOT编译流程）可能错误地将类型引用保留为运行时代码：

• 你的Angular组件模板中，可能不小心写了依赖AMap runtime的逻辑（比如用instanceof AMap.Size做类型判断），模板编译时会把这类代码转为运行时执行的逻辑；
• 某些TypeScript编译配置（比如preserveConstEnums、emitDecoratorMetadata）会导致类型相关的元数据被保留；
• 命名空间类型的处理在Angular的AOT编译中存在特殊逻辑，导致类型引用未被正确擦除。

具体解决方案 #

1. 使用类型别名隔离命名空间引用

把命名空间类型转为本地类型别名，编译时会完全擦除这个别名，不会留下AMap的引用：

// 先定义本地类型别名
type MapSize = AMap.Size;

@Component({...})
export class YourComponent {
  @Input() size: MapSize;
}

2. 用接口替代类类型（如果适用）

如果AMap.Size只是用来描述数据结构，而非需要实例化的类，把类型声明改为接口：

declare namespace AMap {
  // 把class改为interface
  interface Size {
    width: number;
    height: number;
  }
}

接口在TypeScript编译时会被彻底擦除，不会留下任何运行时痕迹。

3. 检查模板中的运行时类型依赖

绝对不要在模板中写这类代码：

<!-- ❌ 错误：instanceof会触发运行时对AMap的引用 -->
<div *ngIf="size instanceof AMap.Size"></div>

如果需要判断size的结构，改成检查具体属性：

<!-- ✅ 安全：只检查属性，不依赖类型引用 -->
<div *ngIf="size?.width !== undefined && size?.height !== undefined"></div>

4. 调整TypeScript编译配置

检查你的tsconfig.json，确保以下配置：

• 关闭emitDecoratorMetadata（如果不需要元数据功能），这个选项会保留装饰器的类型元数据；
• 确保typeRoots或types正确包含了AMap的类型声明文件，避免TypeScript把类型声明误判为运行时代码。

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