TypeScriptAndrea Paciolla / @PaciollaAndrea

Andrea Paciolla / @PaciollaAndrea

Get in touch with me:https://github.com/AndreaPaciollahttps://twitter.com/PaciollaAndrea

http://andreapaciolla.it

Frontend Engineer at ObjectWay

Agenda

1. Introduction2. TypeScript, why?3. Installation4. Features5. TypeScript Alternatives6. Where TypeScript is used?7. Conclusion

1. Introduction

TypeScript is...

TypeScript lets you write JavaScript the way

you really want to.

TypeScript is a typed superset of JavaScript

that compiles to plain JavaScript.

Any browser. Any host. Any OS. Open Source.

It follows the ECMAScript standards in any new versions

Overview

▷ Syntax based on ECMAScript 4 & ECMASCript 6 proposals

▷ TS is first and foremost a superset of JS

▷ Any regular Javascript is valid TypeScript Code

Well...

2. TypeScript, why?

Main reasons to choose TypeScript are...

1. Compile time2. Strong typing3. Type definitions4. Encapsulation5. Private and public accessors

Compile time

JavaScript is an interpreted language errors are revealed at run time

TypeScript compiles your code errors are revealed at compile time

Strong Typing

Object oriented languages do not allow the type of a

variable to change – hence they are called strongly typed

languages.

The IDE can understand what type of variable you are

working with, and can bring better autocomplete or

Intellisense options

Type Definitions

- TypeScript uses files with a .d.ts extension as a sort of "header" file- GitHub repository hosts definition files: DefinitelyTyped

Encapsulation

Through classes, is accomplished by either using the prototype pattern, or by using the closure pattern.

Private and public accessors

A compile-time feature only Private variables are hidden outside of a class JavaScript does not have private vars.

3. Installation

Get TypeScript setup

For more details check: https://www.typescriptlang.org/docs/tutorial.html

Via npm

$ npm install -g typescript

Visual Studio has a plugin

WebStorm has got built-in plugin

4. Features

TypeScript Features

● Data Types Supported● Optional Static Type Annotation● Classes● Interface● Namespace● Arrow Expressions● Type Assertions● Ambient Declarations● Source File Dependencies

Data Types

● Any (Just when we cannot get the right interface)● Primitive (most of cases)

○ number○ boolean○ string○ void○ null

● Array (most of cases)● Custom (we can define types by using interfaces)

Type Annotation

var a = 987;

a.trim();

// javascript error: typeError: a.trim is not a function on line xxx

var a = 987;

a.trim();

// Property 'trim' does not exist on type 'number'

var a:string = 123;

a.trim()

// cannot convert 'number' to 'string'

TypeScript Classes

● Can implement interfaces● Inheritance● Instance methods/members● Static methods/members● Single constructor● Default/Optional parameter● ES6 class syntax

TypeScript Classes

interface IComplexType { name: string; print(): string;};

class ComplexType implements IComplexType { name: string; print(): string { return "name:" + this.name; }};

var complexType: ComplexType = new ComplexType();complexType.name = "complexType";console.log(complexType.print()); // name:complexType

TypeScript Interfaces

● By convention they start with ‘I’ - e.g. IWebRTCPeer● Used in classes with ‘implements’ keyword● Used on typings context with semicolon syntax - e.g. let dot: IDot;

TypeScript Namespaces

// Used to group classes and interfaces under a common name

declare namespace WebRTCTypings {

interface IComplexType {

name: string;

print(): string;

};

}

var complexType: WebRTCTypings.ComplexType;

TypeScript Arrow Expressions

● Implicit return● No braces for single expression● Part of ES6● Lexically scoped this● You don't need to keep typing function● It lexically captures the meaning of arguments

TypeScript Arrow Expressions Example

function(arg) {

return arg.toUpperCase;

}

// Arrow expression by using the fat arrow operator

(arg) => arg.toUpperCase();

TypeScript Type Assertions

TypeScript's type assertion are purely you telling the compiler that you know about the types better than it does, and that it should not second guess you.

TypeScript Type Assertions Example

var foo = {};

foo.bar = 123; // error in js --> bar does not exist

// TS Way

interface IFoo {

bar: number;

}

var foo: IFoo;

foo.bar = 123;

TypeScript Ambient Declarations

A major design goal of TypeScript is to make easy the use of already existing JavaScript libraries by using declarations.

TypeScript Source File

Get dependencies by using reference.

● Can be done using reference keyword● Must be the first statement of file● Paths are relative to the current file● Can also be done using tsconfig file

5. TypeScript Alternatives

TypeScript Alternatives?

TypeScript VS Dart / CoffeeScript

6. Where TypeScript is used?

Spread TS Worldwide

Typescript is being adopted by tons of companies each day.

In particular, the Angular 2 adoption of TS is spreading it more and more.

7. Conclusion

7. Conclusion

PROs

● Highly scalable● Good for enterprise projects ● Solid abstraction of Ecma Standards

CONs

● Slow compiler● Not enough d.ts (JS libraries are getting more and more)● Not for libraries

Bonus

1. TSD vs Typings2. Reference VS amd-dependency3. Union Types4. Function Overloads5. Namespace instead of modules

That’s all! Thank youQuestions?

Get in touch with me:https://github.com/AndreaPaciollahttps://twitter.com/PaciollaAndreahttp://andreapaciolla.it