![Page 1: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/1.jpg)
TypeScriptAndrea Paciolla / @PaciollaAndrea
![Page 2: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/2.jpg)
Andrea Paciolla / @PaciollaAndrea
Get in touch with me:https://github.com/AndreaPaciollahttps://twitter.com/PaciollaAndrea
http://andreapaciolla.it
Frontend Engineer at ObjectWay
![Page 3: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/3.jpg)
Agenda
1. Introduction2. TypeScript, why?3. Installation4. Features5. TypeScript Alternatives6. Where TypeScript is used?7. Conclusion
![Page 4: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/4.jpg)
1. Introduction
![Page 5: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/5.jpg)
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
![Page 6: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/6.jpg)
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
![Page 7: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/7.jpg)
Well...
![Page 8: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/8.jpg)
2. TypeScript, why?
![Page 9: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/9.jpg)
Main reasons to choose TypeScript are...
1. Compile time2. Strong typing3. Type definitions4. Encapsulation5. Private and public accessors
![Page 10: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/10.jpg)
Compile time
JavaScript is an interpreted language errors are revealed at run time
TypeScript compiles your code errors are revealed at compile time
![Page 11: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/11.jpg)
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
![Page 12: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/12.jpg)
Type Definitions
- TypeScript uses files with a .d.ts extension as a sort of "header" file- GitHub repository hosts definition files: DefinitelyTyped
![Page 13: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/13.jpg)
Encapsulation
Through classes, is accomplished by either using the prototype pattern, or by using the closure pattern.
![Page 14: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/14.jpg)
Private and public accessors
A compile-time feature only Private variables are hidden outside of a class JavaScript does not have private vars.
![Page 15: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/15.jpg)
3. Installation
![Page 16: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/16.jpg)
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
![Page 17: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/17.jpg)
4. Features
![Page 18: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/18.jpg)
TypeScript Features
● Data Types Supported● Optional Static Type Annotation● Classes● Interface● Namespace● Arrow Expressions● Type Assertions● Ambient Declarations● Source File Dependencies
![Page 19: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/19.jpg)
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)
![Page 20: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/20.jpg)
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'
![Page 21: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/21.jpg)
TypeScript Classes
● Can implement interfaces● Inheritance● Instance methods/members● Static methods/members● Single constructor● Default/Optional parameter● ES6 class syntax
![Page 22: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/22.jpg)
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
![Page 23: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/23.jpg)
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;
![Page 24: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/24.jpg)
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;
![Page 25: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/25.jpg)
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
![Page 26: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/26.jpg)
TypeScript Arrow Expressions Example
function(arg) {
return arg.toUpperCase;
}
// Arrow expression by using the fat arrow operator
(arg) => arg.toUpperCase();
![Page 27: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/27.jpg)
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.
![Page 28: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/28.jpg)
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;
![Page 29: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/29.jpg)
TypeScript Ambient Declarations
A major design goal of TypeScript is to make easy the use of already existing JavaScript libraries by using declarations.
![Page 30: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/30.jpg)
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
![Page 31: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/31.jpg)
5. TypeScript Alternatives
![Page 32: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/32.jpg)
TypeScript Alternatives?
TypeScript VS Dart / CoffeeScript
![Page 33: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/33.jpg)
6. Where TypeScript is used?
![Page 34: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/34.jpg)
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.
![Page 35: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/35.jpg)
7. Conclusion
![Page 36: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/36.jpg)
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
![Page 37: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/37.jpg)
Bonus
1. TSD vs Typings2. Reference VS amd-dependency3. Union Types4. Function Overloads5. Namespace instead of modules
![Page 38: TypeScript introduction to scalable javascript application](https://reader034.vdocuments.site/reader034/viewer/2022042619/58819c651a28ab1a398b45e3/html5/thumbnails/38.jpg)
That’s all! Thank youQuestions?
Get in touch with me:https://github.com/AndreaPaciollahttps://twitter.com/PaciollaAndreahttp://andreapaciolla.it