創建對象/函數的實例將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函數並進入屬性聲明。等等。

但這應該有希望足以讓你開始。祝你好運！