如何导入和使用通过NPM安装的包

Question

我使用以下命令安装了'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 reffers to a type, but is being used as a value here

在他们的文档中，他们使用jQuery来调用它，但我想知道我是否可以导入它并在。ts文件中使用?http://www.daterangepicker.com/

Answer 1

这有点晚了，但你可以在项目中做一些更改时在typescript中使用它。

首先你需要安装daterangepicker(你已经安装了)

npm install daterangpicker

然后根据你的项目结构在任何文件夹中创建DateRangePickerDirective类

import {Directive, ElementRef, OnInit, Input, Output, EventEmitter} from '@angular/core';
@Directive({
selector: '[daterangepicker]'
})
export class DateRangePickerDirective implements OnInit {
@Input() options: Object = {};
@Output() selected: any = new EventEmitter();
constructor(private elementRef: ElementRef) {}
ngOnInit() {
$(this.elementRef.nativeElement)
.daterangepicker(this.options, this.dateCallback.bind(this));
}
dateCallback(start:any, end:any, label:any) {
let message = 
[start.format('YYYY-MM-DD') ,end.format('YYYY-MM-DD')]

;
this.selected.emit(message);
}
}

在src(或任何其他文件夹，是所有ts实现的根文件夹)中创建文件名typings.d.ts，并在其中添加以下代码

interface JQuery{
daterangepicker(options?: Object, callback?: Function): any;
}

所以它会将daterangepicker类型设置为JQuery

我们还需要moment和jquery NPM包

npm install jquery
npm install moment

添加angular的样式和脚本。如果在angular项目中使用Json文件

"styles": [
---other styles files-------
"node_modules/daterangepicker/daterangepicker.css"
],
"scripts": [
---other js files---
"./node_modules/jquery/dist/jquery.min.js",
"node_modules/moment/moment.js",
"node_modules/daterangepicker/daterangepicker.js"
],

由于daterangepicker依赖于moment和jquery，所以我们必须遵循确切的顺序，所以首先加载jquery，然后加载moment，最后加载daterangepicker时，它不会在任何地方中断。另外，如果你已经运行了项目并添加了这个文件，那么你必须再次启动npm进程，因为当项目已经运行时，它不会工作。

最后添加下面一行在HTML文件

<input value="" daterangepicker name="start"
(selected)="dateSelected($event)"
[options]="pickerOptions"
class="form-control"/>

在NgModuledeclarations中添加DateRangePickerDirective

@NgModule({
declarations: [OtherModuleComponent,DateRangePickerDirective],
imports: [CommonModule, NgxPaginationModule, RouterModule.forChild(routes)],
exports: [RouterModule],
})

在.ts文件中添加下面的代码

//import $ as it is not working without importing it and give error on build
import * as $ from "jquery";
pickerOptions: Object = {
'showDropdowns': true,
'showWeekNumbers': true,
'timePickerIncrement': 5,
'autoApply': true,
// 'startDate': '05/28/2016',
// 'endDate': '06/03/2016'
};

dateSelected(message:any) {
let [startDate,endDate] = message;
console.log(startDate);
console.log(endDate);
//perform operations which you have to perform
}

对于整个项目的详细信息将非常有帮助。

Answer 2

尝试使用

const DateRangePicker = require('daterangepicker');

通过使用require而不是import，我们可以访问daterangepicker模块的默认导出，作为一个可以用new实例化的值。

Answer 3

这是一个旧的javascript模块，没有为ES模块导入配置/设置。

你可以使用这个语法来导入和使用它:

import * as DateRangePickerImport from 'daterangepicker';
var DateRangePicker = (DateRangePickerImport as any).default;
const picker = new DateRangePicker(document.getElementById(''), {
startDate: '01/01/2022',
endDate: '01/31/2022',
});

或者您可以按照注释中的建议做，并通过导入@types/node使用require，然后:

var DateRangePicker = require('daterangepicker');
const picker = new DateRangePicker(document.getElementById(''), {
startDate: '01/01/2022',
endDate: '01/31/2022',
});

或者您可以在tsconfig中设置"esModuleInterop": true，然后:

import DateRangePicker from 'daterangepicker';
const picker = new DateRangePicker(document.getElementById(''), {
startDate: '01/01/2022',
endDate: '01/31/2022',
});

https://www.typescriptlang.org/docs/handbook/modules.html