具有此功能,我需要为其创建一个新实例。一切在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函数移出并移至属性声明中。等等。

但这应该足以让您入门。祝好运!

10-05 21:09
查看更多