Angular2 TypeScript项目导入SVGMorpheus后对象为空的问题求助

这个问题我之前碰到过类似的情况，本质原因是SVGMorpheus不是标准的ES模块——它是通过立即执行函数表达式（IIFE）直接把自身挂载到全局window对象上的，而非通过export导出内容。所以你用import * as SVGMorpheus这种模块导入方式时，TypeScript找不到对应的导出项，自然就返回空对象了。

下面给你几个实用的解决办法：

方法一：声明全局变量直接使用 #

这是最直接的方式，核心是让TypeScript识别这个全局变量：

1. 在项目根目录或者src文件夹下创建一个类型声明文件，比如svg-morpheus.d.ts，写入以下内容：

declare var SVGMorpheus: any;

2. 打开你的tsconfig.json，确保include数组包含这个声明文件（一般默认会包含所有.d.ts文件，要是没包含就手动加路径）。
3. 之后在你的Angular组件里，不用写import语句，直接使用全局的SVGMorpheus即可：

// 组件代码示例
ngOnInit() {
  const morpher = new SVGMorpheus('#your-svg-element');
  // 调用SVGMorpheus的方法
  morpher.to('target-shape-id');
}

方法二：通过Angular配置全局注入脚本 #

如果你的项目用Angular CLI构建，可以把SVGMorpheus脚本加入全局脚本列表，让打包工具自动注入：

1. 打开angular.json（老版本是.angular-cli.json），找到projects -> 你的项目名 -> architect -> build -> options -> scripts数组，添加SVGMorpheus的脚本路径：

"scripts": [
  "./path/to/svg-morpheus.js"
]

2. 同样配合方法一里的svg-morpheus.d.ts类型声明，之后就能在组件里直接使用全局的SVGMorpheus了。

方法三：包装成ES模块（适合模块化偏好者） #

如果你想保持模块化的导入习惯，可以自己写一个简单的包装模块：

1. 创建一个svg-morpheus-wrapper.ts文件，内容如下：

// 先加载原始脚本，让它挂载到window上
import './path/to/svg-morpheus.js';

// 扩展window接口，让TypeScript识别SVGMorpheus
declare global {
  interface Window {
    SVGMorpheus: any;
  }
}

// 导出全局变量作为模块导出项
export const SVGMorpheus = window.SVGMorpheus;

2. 之后在组件里导入这个包装模块：

import { SVGMorpheus } from './svg-morpheus-wrapper';

// 使用示例
const morpher = new SVGMorpheus('#your-svg-element');

额外提示 #

如果想要更精准的类型提示（不想用any），可以根据SVGMorpheus的官方API，手动完善svg-morpheus.d.ts里的类型声明，比如定义它的构造函数、方法参数等，这样TypeScript就能提供智能提示了。

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