[TypeScript] 1. Catching JavaScript Mistakes with TypeScript

The TypeScript compiler is a powerful tool which catches mistakes even in vanilla JavaScript. Try it online at the TypeScript Playground, zero setup required.

Error version:

var movie = { title: "Memento", year: 2000, IMDB: 8.5, title: "" };
var rating = movie.imdb;



function Point(x, x) {
  this.x = x;
  this.y = y;
}
Point.prototype.distance = function() {
  return Math.sqrt(x * x + y * y);
};



function isPast(date) {
  var now = Date().getTime();
  return date.getTime() < now;
}



function ask(question) {
  var answer = confirm(question);
  var answerView = document.getElementByID('answer');
  answerView.innerHTML = answer;
}



function handleLoad() { console.log('loaded'); }
document.onLoad = handleLoad();



function newCoinToss() { 
  return Math.random > 0.5 ? 'HEADS' : 'TAILS'; 
}
var tosses = [1,2,3].map(newCoinToss);

var allHeads = tosses.every(function(toss) { 
  return toss = 'HEADS'; 
});
if (allHeads) console.log(allHeads.length, 'heads in a row!');



document.addEventListener('keydown', function(event) {
  console.log(event.clientX, event.clientY);
});

 

Using WebStorm, in the Terminal, it displays the error message for you.

Fixed version in TypeScript:

var movie = { title: "Memento", year: 2000, IMDB: 8.5 };
var rating = movie.IMDB;



function Point(x,y) {
  this.x = x;
  this.y = y;
}
Point.prototype.distance = function() {
  return Math.sqrt(this.x * this.x + this.y * this.y);
};



function isPast(date) {
  var now = new Date().getTime();
  return date.getTime() < now;
}



function ask(question) {
  var answer = prompt(question);
  var answerView = document.getElementById('answer');
  answerView.innerHTML = answer;
}



function handleLoad() { console.log('loaded'); }
document.onload = handleLoad;



function newCoinToss() { 
  return Math.random() > 0.5 ? 'HEADS' : 'TAILS'; 
}
var tosses = [1,2,3].map(newCoinToss);

var allHeads = tosses.every(function(toss) { 
  return toss == 'HEADS'; 
});
if (allHeads) console.log(tosses.length, 'heads in a row!');



document.addEventListener('mousedown', function(event) {
  console.log(event.clientX, event.clientY);
});