Angular组件导入无TypeScript类型JS模块的优化方法咨询

针对你当前用require导入highcharts-regression出现的类型警告，以下是两种更规范的实现方式：

方案一：使用类型断言消除警告 #

直接通过类型断言明确require返回值的类型，避免any类型和无返回值的警告：

import { Component } from "@angular/core";
import * as Highcharts from 'highcharts';

// 断言require返回的是接收Highcharts实例的函数
const HC_Regression = require('highcharts-regression') as (highchartsInstance: typeof Highcharts) => void;
HC_Regression(Highcharts);

这种方式无需额外文件，快速解决类型警告，适合临时场景。

方案二：创建自定义类型声明文件（推荐） #

通过创建类型声明文件，让TypeScript识别模块类型，完全符合ES模块规范：

1. 在项目src目录下新建typings/highcharts-regression.d.ts文件，内容如下：

declare module 'highcharts-regression' {
  import * as Highcharts from 'highcharts';
  // 定义插件的函数类型
  const regressionPlugin: (highcharts: typeof Highcharts) => void;
  export default regressionPlugin;
}

2. 在Angular组件中使用ES模块导入：

import { Component } from "@angular/core";
import * as Highcharts from 'highcharts';
import HC_Regression from 'highcharts-regression';

HC_Regression(Highcharts);

这种方式从根源解决类型问题，代码更规范，适合长期维护的项目。

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