具有此功能,我需要为其创建一个新实例。一切在JavaScript中都可以正常工作,但是如何将其转换为TypeScript?
function Calendar(selector, events) {
this.el = document.querySelector(selector);
this.events = events;
this.current = moment().date(1);
this.draw();
var current = document.querySelector('.today');
if(current) {
var self = this;
window.setTimeout(function() {
self.openDay(current);
}, 500);
}
}
var calendar = new Calendar('#calendar', data);
var calendar = new Calendar('#calendar', data);
最佳答案
的确,任何可以在JavaScript中工作的东西都可以在TypeScript中工作,但这仅意味着TypeScript编译器将或多或少地输出JavaScript,这可能会在途中吐出一堆警告。如果您只是忽略这些错误,那么一切仍然可以进行。
但是,假设您想利用TypeScript的功能,则应该开始进行更改。开始吧。
首先,您应该在项目中安装typings from Moment.js,可能是从项目文件夹中运行npm install moment
。
然后,我通常喜欢打开所有--strictXXX
编译器标志(我想您可以只使用--strict
)来获取要忽略和/或修复的最大警告数。
好的,现在:ES6 / TypeScript惯用语是使用class
。以下是我所做的一些修改以及一些内联注释:
import * as moment from 'moment';
class Calendar {
// a Calendar has an el property which is a possibly null DOM element:
el: Element | null;
// a Calendar has a current property which is a Moment:
current: moment.Moment;
// a Calendar has an events property which is an array of Event:
events: Event[];
// the constructor function is what gets called when you do new Calendar()
// note that I assume selector is a string and events is an array of Event
constructor(selector: string, events: Event[]) {
this.el = document.querySelector(selector);
this.events = events;
this.current = moment().date(1);
this.draw();
var current = document.querySelector('.today');
if (current) {
var self = this;
window.setTimeout(function() {
self.openDay(current);
}, 500);
}
}
draw() {
// needs an implementation
}
openDay(day: Element | null) {
// needs an implementation
}
}
declare let data: Event[]; // need to define data
var calendar = new Calendar('#calendar', data);
您需要实现
draw()
和openDay()
方法,这些方法可能是Calendar.prototype
的一部分。我在那儿放了存根给他们。您还需要定义data
,它是(我猜是)事件数组(如果还有其他事情,您需要更改events
的类型。如果您看一下上面的编译后的JavaScript输出,您会发现它与您所拥有的或多或少相同。但是,现在,当然,TypeScript很高兴让您调用
new Calendar(...)
。当然,您可以进行更多更改。例如,您可以使用parameter properties并删除
this.events = events;
行。或者,您可以使用属性初始化程序并将this.current = ...
从constructor
函数移出并移至属性声明中。等等。但这应该足以让您入门。祝好运!