オブジェクト/関数のインスタンスを作成する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

それが真実であることJavaSで働くものcriptはTypeScriptで動作しますが、それはTypeScriptコンパイラがJavaScriptを多かれ少なかれ出力することを意味し、恐らく警告の束を吐き出します。エラーを無視しても、問題は解決しません。

しかし、あなたは活字体の力を活用したいと仮定すると、あなたは物事を変える開始する必要があります。始めましょう。

---

まず、あなたはおそらく、あなたのプロジェクトフォルダからnpm install momentを実行することにより、プロジェクト内のtypings from Moment.jsをインストールする必要があります。

次に、私は通常、--strictXXXコンパイラフラグをオンにしたい（私はあなたがちょうど--strictを使うことができると思う）警告を無視して修正する最大数を得る。

さて、今：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); 

あなたはおそらくCalendar.prototypeの一部でありdraw()とopenDay()メソッドを実装する必要があります。私はそこにスタブを入れました。あなたはまた、eventsのタイプを変更する必要がある場合、（私は推測している）イベントの配列を推測しているdataを定義する必要があります。

上記のコンパイル済みのJavaScript出力を見ると、 「それはあなたが持っていたものと同じで、多かれ少なかれだことがわかりでしょう。しかし、今は、もちろん、活字体はあなたがnew Calendar(...)を呼びましょうて幸せです。

---

もちろん、あなたが作ることができるより多くの変更があります。たとえば、 、あなたはparameter propertiesを使用してthis.events = events;行を削除します。それとも、プロパティの初期化子を使用することができますし、の外にthis.current = ...を移動することができます0関数とプロパティ宣言に渡されます。その他。

しかし、これがうまくいけば、あなたが始めるのに十分でなければなりません。がんばろう！