Getting started with typescript

Microsoft Typescript
BY 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 builds
Try opening a terminal anywhere and running tsc -v to see if it has been properly installed.
$ tsc -v
version 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.

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.ts
We 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

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.

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

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]

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 |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.

Step
projectRoot
├── src
│ ├── file1.js
│ └── file2.js
├── built
└── tsconfig.json
1. Setting up your Directories
2. Writing a Configuration File
3. Integrating with Build Tools (Gulp, Webpack …)
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": [
"./src/**/*"
]
}

Getting started with typescript

Related slideshows

More Related Content

Getting started with typescript

Editor's Notes