HOW TO JAVASCRIPT BETTER

A TypeScript STORY

Tech Talks Conference – Sofia 2015 1

By Viktor Mitev

The problem?

Tech Talks Conference – Sofia 2015 2

Can break silently and be discovered months later.

Lack of standardised set of development tools.

JavaScript is a dynamic language: 𝑬𝑟𝑟𝑜𝑟𝑠= 𝒎𝑜𝑟𝑒𝒄𝑜𝑑𝑒𝟐

The reaction...

Tech Talks Conference – Sofia 2015 3

© This video is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License

The solution?

Tech Talks Conference – Sofia 2015 4

Compiled JavaScript

What is TypeScript?

Tech Talks Conference – Sofia 2015 5

Free. Open Source. Flexible. Any browser. Any host. Any OS. Many IDEs.

TypeScript is a typed superset of JavaScript that compiles to standard JavaScript.

TypeScript is Microsoft‘s solution for large-scale JavaScript development.

Tech Talks Conference – Sofia 2015 6

At a glance…var __extends = (this && this.__extends) || function (d,b) {

for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];function __() { this.constructor = d; }__.prototype = b.prototype;d.prototype = new __();

};

var Animal = (function () {function Animal(name) {

this.name = name;}Animal.prototype.move = function (meters) {

alert(this.name + " moved " + meters + "m.");};return Animal;

})();

var Snake = (function (_super) {__extends(Snake, _super);function Snake(name) {

_super.call(this, name);}Snake.prototype.move = function () {

alert("Slithering...");_super.prototype.move.call(this, 5);

};return Snake;

})(Animal);

The reality

class Animal {

constructor(public name) { }

move(meters) {

alert(this.name + " moved " + meters + "m.");

}

}

class Snake extends Animal {

constructor(name) { super(name); }

move() {

alert("Slithering...");

super.move(5);

}

}

The dream

What a mess!

Then… Why?

Tech Talks Conference – Sofia 2015 7

Optimized output depending on compilation target levels: ES3, ES5 or even ES6.

Interfaces and classes (messy for ES3 & 5, but with shared syntax when ES6 comes).

JavaScript code is valid TypeScript code. You can start off with JavaScript and just add types.

Static typing and compile-time errors help catch mistakes and bugs much, much earlier.

As the name suggests… TYPES!

Primitive types

• var isDone: boolean = false;

• var height: number = 6;

• var name: string = "bob";

• var list: number[] = [1, 2, 3];

• var object: Object = { property: "value" };

• function warnUser(): void {alert("There is no return value!");return;

}

Tech Talks Conference – Sofia 2015 8

Complex types

• Functional typing

var add: (x: number, y: number) => number;add = function (x, y) { return x + y; };

• Structural definitions (inline interfaces)

function print(obj: { label: string }) {console.log(obj.label);

}print({ lable: "Dyslexia" });

• Built-in objects (or defined classes)

var currentDate: Date = new Date();var regExp: RegExp = /qwerty/;

Tech Talks Conference – Sofia 2015 9

Any types

• var notSure = 4; // type inferencenotSure = "it can't be a string";

• var notSure: any = 4;

notSure = "maybe a string instead";notSure = false;

• function acceptsString(s: string) { ... }

acceptsString(<any>4);

Tech Talks Conference – Sofia 2015 10

More syntax

• “Fat-arrow” functions

• Interfaces

• Classes

• Generic types

• Modules (Namespaces)

• Ambient definitions

Tech Talks Conference – Sofia 2015 11

Demonstration

Tech Talks Conference – Sofia 2015 12

Migrate an existing JavaScript application1

Demonstration - Recap

• Install and configure the IDE plug-in + NodeJS

• Change .js files to .ts ones

• Add necessary .d.ts files for external libraries

• Fix variables declared with one type and then reused as another

• Fix caught invalid function calls and/or object access

• Add types wherever possible

Tech Talks Conference – Sofia 2015 13

Demonstration

Tech Talks Conference – Sofia 2015 14

Upgrade the migrated application2

Resources

• TypeScript official Handbook by Microsoft ®

• “TypeScript - JavaScript for tools” presentation by Ben Smith

• List of languages that compile to JavaScript by David Bonnet

• DefinitelyTyped by Boris Yankov

Tech Talks Conference – Sofia 2015 15

Tech Talks Conference – Sofia 2015 16

var questions: any = attendees.ask("?");

Tech Talks Conference – Sofia 2015 17

Tech Talks Conference – Sofia 2015 18