如何在TypeScript文件中导入并使用npm安装的daterangepicker？

已通过以下命令安装daterangepicker及其类型声明包：

npm install daterangepicker
npm install @types/daterangepicker

随后尝试按如下方式导入并使用：

import { DateRangePicker } from 'daterangepicker';

const picker = new DateRangePicker('#date-picker', {
  startDate: '01/01/2022',
  endDate: '01/31/2022'
});

但出现错误提示：

'DateRangePicker' only refers to a type, but is being used as a value here

官方文档中使用jQuery调用该组件，想了解是否可以在.ts文件中直接导入使用它？

原因分析 #

daterangepicker本质是一个jQuery插件，并非独立的ES模块类。你安装的@types/daterangepicker仅提供类型声明，其中的DateRangePicker只是用于类型校验的接口，不是可实例化的构造函数，因此直接new DateRangePicker会触发报错。

正确用法 #

可以在TypeScript文件中使用，但必须基于jQuery调用，具体步骤：

• 确保项目已安装并引入jQuery
  如果未安装jQuery，先执行：

  npm install jquery
  npm install @types/jquery
  

• 正确导入依赖
  导入daterangepicker的样式和插件本身，同时引入jQuery：

  // 导入样式文件
  import 'daterangepicker/daterangepicker.css';
  // 导入插件，使其挂载到jQuery原型上
  import 'daterangepicker';
  // 导入jQuery
  import $ from 'jquery';
  

• 通过jQuery调用组件
  使用jQuery选择器获取元素后，调用daterangepicker方法初始化：

  const $picker = $('#date-picker').daterangepicker({
    startDate: '01/01/2022',
    endDate: '01/31/2022'
  });
  

• 获取组件实例（可选）
  如果需要操作组件实例的方法（比如修改日期、触发事件），可以通过jQuery的data方法获取：

  const pickerInstance = $('#date-picker').data('daterangepicker');
  // 调用实例方法示例
  pickerInstance.setStartDate('02/01/2022');
  

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