One language to rule them all: TypeScript - SDD...

One language to rule them all:

TypeScript

Gil Fink

CEO and Senior Consultant, sparXys

About Me• sparXys CEO and Senior consultant

• Microsoft MVP in the last 8 years

• Pro Single Page Application Development (Apress) co-author

• 4 Microsoft Official Courses (MOCs) co-author

• GDG Rishon and AngularUP co-organizer

Agenda• The why

• TypeScript syntax and language features

• Building a simple end-to-end app with TypeScript

• Summary

Wait! JavaScript?

Are you nuts?

"JavaScript is the assembly language of the Web"

Erik Meijer

“You can write large programs in JavaScript. You

just can’t maintain them”

Anders Hejlsberg

Let’s Be Serious• JavaScript is really a powerful language:

o Functional

o Dynamic

o Can run everywhere

• Huge community

• Big eco-system

• Tools – IDEs, debuggers, test tools and etc.

The Alternatives• We have several alternatives:

• Hard core vanilla JavaScript development

• JavaScript transpilers

• CoffeeScript – http://coffeescript.org

• Dart – http://dartlang.org

• Clojurescript - https://github.com/clojure/clojurescript

• Script# - http://scriptsharp.com/

What is TypeScript?“TypeScript is a typed superset of JavaScript that compiles to

plain JavaScript” ~typescriptlang.org

Hello TypeScriptDemo

TypeScript is Very Flexible

Any Browser Any Host

Any OS Tool Support

Some TypeScript Key Features

Support standard

JavaScript code with

static typing

Encapsulation through classes

and modules

Support for constructors,

properties and functions

Interfaces and enumssupport

Lambda and generics support

Intellisenseand syntax checking

• Modules

• Classes

• Arrow functions

• Default parameters

• Destructuring

• Spread and rest

• Let and const

• for...of

• Object literal

methods

• Shorthand

properties

• Computed

properties

• Octal / binary

literals

• Symbols

• Template strings

Features from the near Future of

the Web (ES2015/6), Today

Choose your compilation scenario.

It is up to you!

From TypeScript to JavaScript

class Greeter {

greeting: string;

constructor(message: string) {

this.greeting = message;

}

greet() {

return “Hi," + this.greeting;

}

}

TypeScript Code JavaScript Code

TypeScriptCompiler

var Greeter = (function () {function Greeter(message) {

this.greeting = message;}Greeter.prototype.greet =

function () { return “Hi," + this.greeting;

};return Greeter;

})();

tsc.js

How Good is TypeScript’sOutput?

tsconfig.json• Enables to configure the compiler options:

o Target language (ES3, ES5, ES6)

o Module system (AMD, ES6, CommonJS and etc.)

o Source map generation

o Remove comments when compiling

o And more

tsconfig.jsonDemo

Some Important Side Notes

• All JavaScript code is TypeScript codeo Simply copy and paste

• All JavaScript libraries work with TypeScripto You will need a declaration file to work with the library

@Types

Demo

TypeScript Type Annotations

• You can add type annotations to variables and

functions

var str: string = ‘hello’; // str is annotated as string

function foo(name: string) : string { // parameter and function annotated

return ‘hello’ + name;

}

TypeScript Types

Type AnnotationsDemo

Classes and Interfaces• You can define classes (same as in ES2015)

• You can define interfaceso And implement them later

interface IGreeter {

greet(): void;

}

class Greeter implements IGreeter{

greeting: string;

greet() {

console.log(this.greeting);

}

}

var Greeter = (function () {

function Greeter() {

}

Greeter.prototype.greet = function () {

console.log(this.greeting);

};

return Greeter;

})();

Modules• Uses ES2015 modules syntax

export interface IGreeter {

greet(): void;

}

export class Greeter implements IGreeter {

greeting: string;

greet() {

console.log(this.greeting);

}

}

var Greeter = (function () {

function Greeter() {

}

Greeter.prototype.greet = function () {

console.log(this.greeting);

};

return Greeter;

}());

exports.Greeter = Greeter;

Classes, Modules and Interfaces

Demo

Building a Simple End-to-End App with

TypeScriptDemo

TypeScript Versions• TypeScript 1.0

• TypeScript 2.0

• Current version: TypeScript 2.3

What’s New in TypeScript2?

• Generators and Iteration for ES5/ES3

• Type-checking for JavaScript files

• Null- and undefined-aware types

• ES2017 Spread and Rest

• Improved any inference

• Tagged union types

• And a lot more

Questions?

Summary• Open source language that compiles into

JavaScript

• Key features:• Code encapsulation

• Maintainable code

• Tooling support

• Learn TypeScript today!

Resources• TypeScript – http://www.typescriptlang.org

• TypeScript Source Code -

https://github.com/Microsoft/TypeScript

• Definitely Typed –

https://github.com/borisyankov/DefinitelyTyped

• My Website – http://www.gilfink.net

• Follow me on Twitter – @gilfink

Thank You!