CODEWITHSUNDEEP
javascripttypescript
Bizgu Daniela
Bizgu Daniela

Reputation: 71

Create instance of object/function convert JavaScript to TypeScript

Having this function I need to create a new instance of it. Everything works fine in JavaScript but how to I convert it to 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);

Upvotes: 0

Views: 745

Answers (1)

jcalz
jcalz

Reputation: 330501

It is true that anything that works in JavaScript will work in TypeScript, but that just means that the TypeScript compiler will output your JavaScript more or less untouched, possibly spitting out a bunch of warnings on the way. If you just ignore the errors, things will still work.

But assuming you want to leverage the power of TypeScript, you should start changing things. Let's start.

First, you should install the typings from Moment.js in your project, probably by running npm install moment from your project folder.

Then, I usually like to turn on all the --strictXXX compiler flags (I think you can just use --strict) to get the maximum number of warnings to ignore and/or fix.

Okay, now: the ES6/TypeScript idiom for a constructible thing is to use a class. Here's a look at some modifications I made, with some inline comments:

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);

You need to implement the draw() and openDay() methods which are presumably part of the Calendar.prototype. I put stubs for them in there. You also need to define data, which is (I'm guessing) an array of events (if it's something else you need to change the type of events.

If you look at the compiled JavaScript output from the above, you'll see that it's more or less the same as what you had. But now, of course, TypeScript is happy to let you call new Calendar(...).

There are more changes you can make, of course. For example, you can use parameter properties and remove the this.events = events; line. Or you can use property initializers and move the this.current = ... out of the constructor function and into the property declaration. Et cetera.

But this should hopefully be enough to get you started. Good luck!

Upvotes: 1

Related Questions