Question

有了这个功能，我需要创建一个新的实例。 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);

Answer 1

确实，在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函数并进入属性声明。等等。

但这应该足以让你开始。祝你好运！

创建对象/函数实例将JavaScript转换为TypeScript

1 个答案: