22. TypeScript
• Microsoft
• Transpila TS -> JS
• Idea general: JS + Tipos + ES.Next
• Todo código JS es código TS valido
• El código JS es difícil de escalar a menos que sean genios
11
27. TypeScript instalación
• Node.js
• Gestor de paquetes
• Editor o IDE (VSCode/IntelliJ IDEA)
npm i n s t a l l −g t y p e s c r i p t
npm view t y p e s c r i p t v e r s i o n
Luego
t s c −v
16
31. TypeScript
• Type annotations
• Type inference
• Compile time type checking
• Optional and default params
• Classes
• Interfaces
• Structural typing
• Arrow function expression
• Enums
• Generics
• Modules
• Tuple types
• Union types and type guards
20
42. Classes
1 c l a s s Car {
2 constructor ( color , doorQty ) {
3 t h i s . color = color ;
4 t h i s . doorQty = doorQty ;
5 }
6
7 run () {
8 console . log ( ' I am the '+ t h i s . color + ' car and I have ' + t h i s .
doorQty + ' doors ' )
9 }
10 }
11
12 var c1 = new Car (”Red” , 4) ;
13 c1 . run () ;
29
43. Classes TS
1 c l a s s Car {
2 color : s t r i n g ;
3 doorQty : number ;
4 constructor ( color : string , doorQty : number) {
5 t h i s . color = color ;
6 t h i s . doorQty = doorQty ;
7 }
8 run () {
9 console . log (` I am the ${ t h i s . color } car and I have ${ t h i s . doorQty}
doors `)
10 }
11 }
12
13 var c1 = new Car (”Red” , 4) ;
14 c1 . run () ;
30
44. Arrow function
1 function ScopeTest ( tuxAge ){
2 t h i s . tuxAge = tuxAge ;
3 t h i s . increaseAge = function () {
4 console . log (” incrementando edad ”) ;
5 t h i s . tuxAge++;
6 }
7 }
8
9 var sTest = new ScopeTest (10) ;
10 setTimeout ( sTest . increaseAge ,1000) ;
11 setTimeout ( function () { console . log ( sTest . tuxAge ) } ,2000) ;
31
45. Arrow function
1 function ScopeTest ( tuxAge ){
2 var s e l f = t h i s ;
3 t h i s . tuxAge = tuxAge ;
4 t h i s . increaseAge = function () {
5 console . log (” incrementando edad ”) ;
6 s e l f . tuxAge++;
7 }
8 }
9
10 var sTest = new ScopeTest (10) ;
11 setTimeout ( sTest . increaseAge ,1000) ;
12 setTimeout ( function () { console . log ( sTest . tuxAge ) } ,2000) ;
32
46. Arrow function
1 function ScopeTest ( tuxAge ){
2 t h i s . tuxAge = tuxAge ;
3 t h i s . increaseAge = () => { //Arrow function
4 console . log (” incrementando edad ”) ;
5 t h i s . tuxAge++;
6 }
7 }
8
9 var sTest = new ScopeTest (10) ;
10 setTimeout ( sTest . increaseAge ,1000) ;
11 setTimeout ( function () { console . log ( sTest . tuxAge ) } ,2000) ;
33
47. Rest parameters
1 function iTakeItAll ( f i r s t , second , . . . allOthers ) {
2 console . log ( allOthers ) ;
3 }
4 iTakeItAll ( ' foo ' , ' bar ' ) ;
5 iTakeItAll ( ' foo ' , ' bar ' , ' bas ' , 'qux ' ) ;
34
48. let
1 function scopeTest () {
2 var info = 123;
3 i f ( true ){
4 var info = 456;
5 }
6 console . log ( info ) ;
7 }
8 scopeTest () ;
35
50. Destructuring
1 var rect = { x : 0 , y : 10 , width : 15 , height : 20 };
2
3 var {x , y , width , height } = rect ;
4 console . log (x , y , width , height ) ;
5
6 var {w, x , . . . remaining} = {w: 1 , x : 2 , y : 3 , z : 4};
7 console . log (w, x , remaining ) ;
37
51. Spread operator
Como argumentos
1 function foo (x , y , z ) { }
2 var args = [0 , 1 , 2 ] ;
3 foo ( . . . args ) ;
Como arreglo (destructuring)
1 var l i s t = [1 , 2 ] ;
2 l i s t = [ . . . l i s t , 3 , 4 ] ;
3 console . log ( l i s t ) ;
38
54. Compilation context
1 {
2 ” include ” : [
3 ”./ f o l d e r ”
4 ] ,
5 ” exclude ” : [
6 ”./ f o l d e r /∗∗/∗. spec . ts ” ,
7 ”./ f o l d e r /someSubFolder”
8 ]
9 }
1 {
2 ” f i l e s ” : [
3 ”./some/ f i l e . ts ”
4 ]
5 }
40
55. Declaration spaces
Type declaration space
1 c l a s s Tuz {};
2 i n t e r f a c e Tux {};
3 type Penguin = {};
Pueden ser usados como tipos
1 var foo : Tuz ;
2 var bar : Tux ;
3 var bas : Penguin ;
41
56. Declaration spaces
Variable declaration space
1 c l a s s Tuz {};
2 var someTuz =Tuz ;
3 var someOtherVar = 123;
Pueden ser usados como tipos
1 var foo = 123;
2 var bar : foo ; // ERROR
42
57. Modulos
• AMD - RequireJS, solamente para browser
• CommonJS - Node.js
• SystemJS - superado por ES6 modules
• ES6 modules
Al utilizar módulos, se hace obligatorio el uso de un bundler para paginas web
43
58. Modulos TS
• Basado en ES6 modulos
• Global module
• File module
• globals.d.ts
44
59. File module
uno.ts
1 export var penguin = ”Tucs ”;
dos.ts
1 import { penguin } from ”./ penguin ”;
2 var bar = penguin ;
3 console . log ( bar )
45
60. Modules - Alias
Export
1 l e t someVar = 123;
2 export { someVar as aDifferentName };
Import
1 import { someVar as aDifferentName } from './ foo ' ;
46
61. Modules - Default
Export
1 export default someVar = 123;
2 export default function someFunction () { }
3 export default c l a s s SomeClass { }
Import
1 import someLocalNameForThisFile from ” . . / foo ”;
47
62. Modules - Resolución
• Por path
• Node
• ./node_modules/something/foo
• ../node_modules/something/foo
• Hasta llegar a /
48
64. Tipos - inline
1 var person : {
2 firstName : s t r i n g ;
3 secondName : s t r i n g ;
4 };
5 person = {
6 firstName : 'John ' ,
7 };
49
65. Tipos - any
1 var penguin : any ;
2
3 // Takes any and a l l types
4 penguin = 'Tuz ' ;
5 penguin = 123;
50
66. Tipos - Generics
1 function reverse<T>(items : T[ ] ) : T[ ] {
2 var toreturn = [ ] ;
3 for ( l e t i = items . length − 1; i >= 0; i −−) {
4 toreturn . push ( items [ i ] ) ;
5 }
6 return toreturn ;
7 }
51
67. Tipos - Union Type
1 function printText ( text : s t r i n g [ ] | s t r i n g ) {
2 var l i n e = ' ' ;
3 i f ( typeof command === ' string ' ) {
4 console . log ( text . trim () ) ;
5 } else {
6 console . log ( text . j o i n ( ' ') ) ;
7 }
8 }
52
68. Tipos - Intersection Type
1 function extend<T, U>( f i r s t : T, second : U) : T & U {
2 return { . . . f i r s t , . . . second };
3 }
4
5 const x = extend ({ a : ” h e l l o ” } , { b : 42 }) ;
53