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

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

这是事实，任何在Java类作品cript将在TypeScript中工作，但这只意味着TypeScript编译器会或多或少地输出JavaScript，可能会在途中发出一堆警告。如果你忽略这些错误，事情仍然有效。

不过，假设你想利用打字稿的力量，你应该开始改变的事情。开始吧。

---

首先，你应该在你的项目中安装typings from Moment.js，可能是从项目文件夹中运行npm install moment。

然后，我通常喜欢打开所有--strictXXX编译器标志（我认为您可以使用--strict）以获得最大数量的警告以忽略和/或修复。

好了，现在：对于constructible东西ES6 /打字稿成语是使用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输出，会看到，它或多或少一样的，你有什么，但现在，当然，打字稿是高兴，让你打电话new Calendar(...)。

---

有更多的变化，你可以做的，当然。例如，你可以使用parameter properties并删除this.events = events;线。或者你可以使用属性初始化和移动this.current = ...出的0函数并进入属性声明。等等。

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