Angular 5项目手动添加TypeScript类型文件失败求助

针对你在Angular 5项目中集成terraformer-wkt-parser时遇到的@types包安装失败、手动配置类型后页面报错的问题，我整理了一套可行的手动添加类型声明的步骤：

1. 创建自定义类型声明文件 #

因为官方没有提供对应的@types包，我们可以自己编写类型定义：

• 在你的项目src/app目录下新建一个types文件夹（用来存放自定义类型文件）
• 在该文件夹中创建terraformer-wkt-parser.d.ts文件，写入以下基础类型声明（可根据你实际用到的方法扩展）：

declare module 'terraformer-wkt-parser' {
  /**
   * 将WKT字符串解析为GeoJSON对象
   * @param wkt 待解析的WKT字符串
   */
  export function parse(wkt: string): any;

  /**
   * 将GeoJSON对象转换为WKT字符串
   * @param geoJson 待转换的GeoJSON对象
   */
  export function convert(geoJson: any): string;
}

2. 配置TypeScript识别自定义类型 #

修改项目根目录的tsconfig.app.json（如果是全局配置则修改tsconfig.json），在compilerOptions的include数组中添加自定义类型文件的路径，避免之前错误配置typeRoots或types导致的编译问题：

{
  "compilerOptions": {
    // 保留原有配置不变
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    // ...其他配置
  },
  "include": [
    "src/**/*",
    "src/app/types/terraformer-wkt-parser.d.ts"
  ]
}

注意：先恢复之前修改的typeRoots和types配置到初始状态，避免冲突导致的加载失败。

3. 确认脚本文件的正确引入 #

确保你在angular-cli.json中已经正确配置了terraformer-wkt-parser的脚本路径（你提到之前运行正常，这一步可以快速校验）：

"apps": [
  {
    // ...其他配置
    "scripts": [
      "../node_modules/terraformer-wkt-parser/terraformer-wkt-parser.js"
    ]
  }
]

如果路径不对，会导致运行时找不到模块，务必确认node_modules下的文件路径正确。

4. 正确导入并使用模块 #

在你的TypeScript组件/service中，使用以下方式导入模块：

import * as WKT from 'terraformer-wkt-parser';

// 示例用法：解析WKT为GeoJSON
const pointGeoJson = WKT.parse('POINT(116.397428 39.90923)');
console.log('解析后的GeoJSON:', pointGeoJson);

// 示例用法：将GeoJSON转换为WKT
const wktString = WKT.convert(pointGeoJson);
console.log('转换后的WKT:', wktString);

5. 排查页面404问题 #

之前你修改typeRoots和types后出现页面Cannot GET /，大概率是TypeScript编译失败导致Angular无法正常启动。按照上面的步骤恢复配置后，执行ng serve --open重启项目，观察控制台是否有编译错误，逐步排查。

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