TypeScript introduction to scalable javascript application

TypeScript
Andrea Paciolla / @PaciollaAndrea

Andrea Paciolla / @PaciollaAndrea
Get in touch with me:
https://github.com/AndreaPaciolla
https://twitter.com/PaciollaAndrea
http://andreapaciolla.it
Frontend Engineer at ObjectWay

Agenda
1. Introduction
2. TypeScript, why?
3. Installation
4. Features
5. TypeScript Alternatives
6. Where TypeScript is used?
7. Conclusion

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

Main reasons to choose TypeScript are...
1. Compile time
2. Strong typing
3. Type definitions
4. Encapsulation
5. 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.

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

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

TypeScript Alternatives?
TypeScript VS Dart / CoffeeScript

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
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 Typings
2. Reference VS amd-dependency
3. Union Types
4. Function Overloads
5. Namespace instead of modules

That’s all! Thank you
Questions?
Get in touch with me:
https://github.com/AndreaPaciolla
https://twitter.com/PaciollaAndrea
http://andreapaciolla.it

TypeScript introduction to scalable javascript application

More Related Content

What's hot (20)

Similar to TypeScript introduction to scalable javascript application (20)

Recently uploaded (20)

TypeScript introduction to scalable javascript application