Microsoft TypescriptBY AMINE EL HARRAK

SOFTWARE ENGINEER (FULL-STACK DEVELOPER) @sqli 2017

Agenda

Introduction Installation & Who to use TS ? Features Do's and Don'ts Conclusion

Introduction JAVASCRIPT THAT SCALES.

Introduction

Introduction How use TS ? ***!? Woe Facts Ecosystem

Introduction

Microsoft Typescript is a statically typed compiled language to clean and a simple plain old JavaScript code which runs on any browser, in Node.js or in any JavaScript engine that supports ECMAScript 3 (or newer).

Recent rise of TypeScript’s popularity, data from Google Trends.

Is Anyone using Typescript ?

Angularjs2 IONIC 2 DOJO …

***!?

Why would I want to rewrite all of the applications I already have (Next apps) in this new language? The simple answer is you don’t have to.

Weight of Evidence

Code is hard to navigate Autocompletion Refactorings Compiler checks debug …

TypeScript Facts

Large and scale application development Language, not a framework Cross-compiles to JavaScript Produces idiomatic JavaScript Doesn‘t try to replace JavaScript Offers missing language features (Anticipates ES6, …) Is a superset of JavaScript (Promises easy migration of JS code) JS libs can be used easily (Optional) static typing …

How to get setup ? INSTALLING TYPESCRIPT

How to get setup ?

Installing TypeScript Text Editors Support Compiling to JavaScript

Installing TypeScript

There are two main ways to get the TypeScript tools: Via npm (the Node.js package manager) /  yarn add typescript By installing TypeScript’s Visual Studio plugins.

Installing TypeScript

The easiest way to setup TypeScript is via npm.Using the command below we can install the TypeScript package globally, making the TS compiler available in all of our projects : yarn add typescript or npm install -g typescript //For the latest stable

version npm install -g typescript@next //For our nightly buildsTry opening a terminal anywhere and running tsc -v to see if it has been properly installed.$ tsc -vversion 2.2.1

Text Editors With TypeScript Support

TypeScript is an open-source project but is developed and maintained by Microsoft and as such was originally supported only in Microsoft’s Visual Studio platform. Nowadays, there are a lot more text editors and IDEs that either natively or through plugins offer support for the TypeScript syntax, auto-complete suggestions, error catching, and even built-in compilers. Visual Studio Code – Microsoft’s other, lightweight open-source code editor. TypeScript

support is built in. Official Free Plugin for Sublime Text. The latest version of WebStorm comes with built in support. More including Vim, Atom, Emacs and others.

Compiling to JavaScript

TypeScript is written in .ts files (or .tsx for JSX), which can’t be used directly in the browser and need to be translated to vanilla .js first. This compilation process can be done in a number of different ways: In the terminal using the previously mentioned command line tool tsc. Directly in Visual Studio or some of the other IDEs and text editors. Using automated task runners such as grunt, gulp.

Compiling to JavaScript

The following command takes a TypeScript file named main.ts and translates it into its JavaScript version main.js. If main.js already exists it will be overwritten.tsc main.tsWe can also compile multiple files at once by listing all of them or by applying wildcards :# Will result in separate .js files: main.js worker.js. tsc main.ts worker.ts # Compiles all .ts files in the current folder. Does NOT work recursively. tsc *.ts

Compiling to JavaScript

We can also use the --watch option to automatically compile a TypeScript file when changes are made:# Initializes a watcher process that will keep main.js up to date. tsc main.ts --watch More advanced TypeScript users can also create a tsconfig.json file, consisting of various build settings. A configuration file is very handy when working on large projects with lots of .ts files since it somewhat automates the process. You can read more about tsconfig.json in the TypeScript docs.

Features of TypeScript

Language Features

Type annotations Type inference Compile time type checking Optional, default and rest parameters Classes Interfaces Structural typing Arrow function expressions

Enums Generics Modules Tuple types Union types and type guards

TypeScript grammar

Class

class Person { protected name: string; constructor(name: string) { this.name = name; }}

class Employee extends Person { private department: string; constructor(name: string, department: string) { super(name); this.department = department; } public getElevatorPitch() { return `Hello, my name is ${this.name} and I work in ${this.department}.`; }}let howard = new Employee("Howard", "Sales");

console.log(howard.getElevatorPitch());console.log(howard.name); // error

Interfaces

interface ClockInterface { currentTime: Date; setTime(d: Date);}

class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { }}

Generics

function identity<T>(arg: T): T { return arg;}

let output = identity<string>("myString"); // type of output will be 'string'

Enums

const enum Directions { Up, Down, Left, Right}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]

Examples

Modules

//Validation.ts

export interface StringValidator { isAcceptable(s: string): boolean;}

//ZipCodeValidator.ts

export const numberRegexp = /^[0-9]+$/;

export class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); }}

Do's and Don'ts

Do's and Don'ts |General Types

Don’t ever use the types Number, String, Boolean, or Object. These types refer to non-primitive boxed objects that are almost never used appropriately in JavaScript code.

/* WRONG */function reverse(s: String): String;

/* OK */function reverse(s: string): string;

If you’re tempted to use the type Object, consider using any instead. There is currently no way in TypeScript to specify an object that is “not a primitive”.

Do's and Don'ts |Callback Types

Don’t use the return type any for callbacks whose value will be ignored:

/* WRONG */function fn(x: () => any) { x();}

/* OK */function fn(x: () => void) { x();}

Do's and Don'ts |Callback Types

Example :

function fn(x: () => void) { var k = x(); // oops! meant to do something else k.doSomething(); // error, but would be OK if the return type had been 'any‘}

Why: Using void is safer because it prevents you from accidently using the return value of x in an unchecked way

Do's and Don'ts |Overloads and Callbacks

Don’t write separate overloads that differ only on callback arity -> Do write a single overload using the maximum arity:

/* WRONG */declare function beforeAll(action: () => void, timeout?: number): void;declare function beforeAll(action: (done: DoneFn) => void, timeout?: number): void;

/* OK */declare function beforeAll(action: (done: DoneFn) => void, timeout?: number): void;

Do's and Don'ts |Function Overloads

Don’t put more general overloads before more specific overloads, Do sort overloads by putting the more general signatures after more specific signatures:

/* WRONG */declare function fn(x: any): any;declare function fn(x: HTMLElement): number;declare function fn(x: HTMLDivElement): string;

var myElem: HTMLDivElement;var x = fn(myElem); // x: any, wat?

/* OK */declare function fn(x: HTMLDivElement): string;declare function fn(x: HTMLElement): number;declare function fn(x: any): any;

var myElem: HTMLDivElement;var x = fn(myElem); // x: string,

Why: TypeScript chooses the first matching overload when resolving function calls. When an earlier overload is “more general” than a later one, the later one is effectively hidden and cannot be called.

Do's and Don'ts |Use Optional Parameters

Don’t write several overloads that differ only in trailing parameters, Do use optional parameters whenever possible:

/* WRONG */interface Example { diff(one: string): number; diff(one: string, two: string): number; diff(one: string, two: string, three: boolean): number;}

/* OK */interface Example { diff(one: string, two?: string, three?: boolean): number;}

Why: TypeScript chooses the first matching overload when resolving function calls. When an earlier overload is “more general” than a later one, the later one is effectively hidden and cannot be called.

Do's and Don'ts |Use Union Types

Don’t write overloads that differ by type in only one argument position, Do use union types whenever possible:

/* WRONG */interface Moment { utcOffset(): number; utcOffset(b: number): Moment; utcOffset(b: string): Moment;}

/* OK */interface Moment { utcOffset(): number; utcOffset(b: number|string): Moment;}

Note that we didn’t make b optional here because the return types of the signatures differ.

Migrating from JavaScript

Step

projectRoot├── src│ ├── file1.js│ └── file2.js├── built└── tsconfig.json

1. Setting up your Directories2. Writing a Configuration File3. Integrating with Build Tools (Gulp,

Webpack …){ "compilerOptions": { "outDir": "./built", "allowJs": true, "target": "es5" }, "include": [ "./src/**/*" ]}

“

”Thank you !