{“happymonday”: 3}
TypeScript
(ovvero JavaScript “che non si rompe”)
Antonio Pintus & Federico Pinna
1
The path to HAPPINESS
1. Perché un altro xyzScript?
2. Strumenti di lavoro
3. Tipi base, interfacce e classi
2
Happy Monday!
- Antonio Pintus, Technologist al CRS4, CTO di Paraimpu
- Federico Pinna, CTO di Vivocha
3
Un po’ di storia
Historia magistra vitae
4
JavaScript, a troubled history
JavaScript
ES1
AS1
JScript
ES2
ES3
AS2
compromise
ES5
JScript
ES4
ES3.1
ES6
1995 1997 1998 1999 2005 2008 2009 20152012
TypeScript
TypeScript & JS
TypeScript è un superset di JavaScript
da Microsoft, open source
6
Javascript, a bright future
TypeScript
ES2015
ES5
ES2016ES2017
TypeScript & JS
- Con TypeScript, Microsoft aggiunge al linguaggio:
- tipi
- classi
- interfacce
- moduli
- enum
- ed altro…
8
Perché TypeScript?
JavaScript è bellissimo, ma…
- Refactoring === Refucktoring
- Breaking Changes invisibili
- Difficile da documentare
- Difficile usare codice senza documentazione
9
Perché TypeScript?
function getMovies() { return [ { name: "Big Lebowsky", rating: "****" }, { name: "Shallow Graves", rating: "***" } ]; } for (let i of getMovies()) { console.log( i.name.toUpperCase() + ": " + i.rating.length / 5 * 100 + "%" ); }
10
ES6
Perché TypeScript?
function getMovies() { return [ { title: "Big Lebowsky", rating: "****" }, { title: "Shallow Graves", rating: "***" } ]; } for (let i of getMovies()) { console.log( i.name.toUpperCase() + ": " + i.rating.length / 5 * 100 + "%" ); }
11
ES6
Perché TypeScript?
function getMovies() { return [ { title: "Big Lebowsky", rating: 4.8 }, { title: "Shallow Graves", rating: 3.6 } ]; } for (let i of getMovies()) { console.log( i.name.toUpperCase() + ": " + i.rating.length / 5 * 100 + "%" ); }
12
ES6
Perché TypeScript?
function getMovies(begin, end) { return [ { title: "Big Lebowsky", rating: 4.8 }, { title: "Shallow Graves", rating: 3.6 } ].slice(begin, end); } for (let i of getMovies()) { console.log( i.name.toUpperCase() + ": " + i.rating.length / 5 * 100 + "%" ); }
13
ES6
Perché TypeScript?
Typescript è un ottimo “transpiler” ES6 —> ES5
14
TypeScript & JS
- Non aggiunge un nuovo interprete del codice
- Il “transpiler” tsc genera codice JS standard
15
tsc
TypeScript & ECMAScript 6
Il compilatore TypeScript di default produce JS conforme a ES3
È possibile cambiare il JS target:
tsc --target es6
16
Strumenti di lavoro
1. npm
2. tsc
3. vi
17
18
Non vorrete usare ancora vi, vim o altri fantasmi?
Strumenti di lavoro
1. npm
2. tsc
3. vi editor/IDE
19
Visual Studio Code, free, open source (basato su Atom)
20
Tool: giusto due consigli
JetBrains WebStorm
Strumenti di lavoro
Setup:
1. Installare Node.js!
2. npm install -g typescript
3. npm init
4. tsc --init
5. Creare task in Visual Studio Code
21
Strumenti di lavoro
Documentazione:
www.typescriptlang.org
22
TypeScript: un primo esempio
interface User { id?: string; name: string; surname: string; email?: string; } interface Greetable { greeting(): string; } interface Greeter { (target:Greetable): void; } class RealUser implements User, Greetable { id: string; constructor(public name:string, public surname:string, public email?:string) { this.id = this.name + this.surname + Math.random() * this.surname.length; } greeting():string { return `Hi ${this.name}!`; } } let consoleGreeter:Greeter; consoleGreeter = (target:Greetable) => { console.log(target.greeting()); }
23
Warning: this code is USELESS
Tipi di base
24
Boolean, Numbers
let isAmazing: boolean;
let checked: boolean = false;
let sum: number = 25;
let hex: number = 0xfede;
let discount: number = 0.5;
25
Stringhe
26
let name: string;
let city: string = ‘Cagliari’;
let firstRow: string = `Ciao ${name}`;
Array
27
let ids: string[] = [‘a190’,’b266’c190,’z165’,’xj65’] ;
let firstNum: number[] = [1,2,3];
let arr: Array<number>;
Tuple
28
let t: [number, string];
t = [10, ‘Maradona’];
console.log(t[0]);
Enum
29
enum Language {JavaScript, TypeScript, Python};
let lang: Language;
lang = Language.TypeScript;
lang = Language.Cpp; //ERROR
console.log(Language.Python); //2
enum Language {JavaScript=1, TypeScript, Python};
Any
30
let qualsiasi: any = 2016;
qualsiasi = "duemilasedici";
qualsiasi = true;
Void
31
function log(message): void {
console.log(message);
}
Undefined, Null
32
let u: undefined = undefined;
let n: null = null;
contengono solo i valori corrispondenti
Never
33
rappresenta il tipo di quei valori che non accadranno mai
34
Never
???
Never
35
rappresenta il tipo di quei valori che non accadranno mai
function raiseError(message: string): never {
throw new Error(message);
}
function infiniteLoop(): never {
while (true) {};
}
Interfacce
36
Interfacce
- Descrivere oggetti
- Definire contratti e protocolli
- “normare” il duck typing (structural subtyping)
37
Interfacce
Molto flessibili, possono descrivere qualsiasi tipo esistente:
- Proprietà dichiarate
- Proprietà opzionali
- Proprietà aggiuntive e indicizzate
- Metodi
- Ereditarietà
38
Interfacce
interface User { name:string; email?:string; } interface RegisteredUser extends User { id:string; [flag:string]:boolean; }
interface Logger { (…args[]:any) => void; }
39
Classi
40
Classi
Le classi TypeScript aggiungono a ES6 molte funzionalità:
- Supporto di interfacce multiple (implements)
- Access modifiers: public, protected, private
- Proprietà statiche
- Overload di metodi e costruttori
41
Generics
42
Generics
43
I template di C++ sono tornati!!!
Generics
function genericWrapper<T>(data:T):{ data:T } { return { data }; } console.log(genericWrapper(3)); // { data: 3 }
44
Warning: this code is USELESS
Generics
function eventuallyGet():Promise { return Promise.resolve(5); } eventuallyGet().then((data:string) => { console.log(data.toUpperCase()); });
45
Last topic, ma prima…
46
Per non dimenticare…
JSON
47
Typings
48
Typings
Che succede se uso TypeScript con librerie JavaScript?
49
Typings
50
Typings
.d.ts I typings (declaration files) consentono di descrivere tipi, interfacce e classi di librerie esistenti
NPM supporta i typings, ma è necessario usare TypeScript >= 2.x
$ npm install --save-dev @types/some_module
51
Un esempio:
TypeScript & Express
52
TypeScript + Express: la ricetta
1. bootstrap di un’app Express (e.g. usando express-generator)
2. tsc --init
3. npm install --save @types/express [e tutte le lib necessarie]
4. code & compile & run!
53
54
Link utili
- https://www.typescriptlang.org
- http://microsoft.github.io/TypeSearch
- https://code.visualstudio.com
grazie!
www.bentosa.it
55
happy download
leanpub.com/thewebapinntux56
Training Workshop
Growth Networking
www.bentosa.it
57
58
primo corso
Bentosa!
www.bentosa.it/webapi.html
