Charla impartida el 17 de Noviembre en el Codemotion 2016 de Madrid sobre TypeScript.

1. TypeScript
Un lenguaje aburrido
para programadores
torpes y tristes
by @micael_gallego
MADRID · NOV 18-19 · 2016

2. MADRID · NOV 18-19 · 2016
Quién soy?
@micael_gallego
micael.gallego@urjc.es
@micaelgallego

3. MADRID · NOV 18-19 · 2016
Quién soy?
developer

4. MADRID · NOV 18-19 · 2016
Quién soy?
developer

5. MADRID · NOV 18-19 · 2016
Quién soy?
developer

6. MADRID · NOV 18-19 · 2016
Quién soy?
developer
torpe

7. MADRID · NOV 18-19 · 2016
Quién soy?
+
developer
torpe

8. MADRID · NOV 18-19 · 2016
Que he hecho?

9. MADRID · NOV 18-19 · 2016
Qué he hecho?

10. MADRID · NOV 18-19 · 2016
Ya me lo dijo Javier Abadía
Programar
en Java es como...

11. MADRID · NOV 18-19 · 2016
Ya me lo dijo Javier Abadía
Programar
en Java es como...

12. MADRID · NOV 18-19 · 2016
Cómo me
preparaba
para montar
en bici...

13. MADRID · NOV 18-19 · 2016
Un día todo cambió...

14. MADRID · NOV 18-19 · 2016
… llegó “front”

15. MADRID · NOV 18-19 · 2016
… llegó “front”

16. MADRID · NOV 18-19 · 2016

17. MADRID · NOV 18-19 · 2016
https://www.destroyallsoftware.com/talks/wat

18. MADRID · NOV 18-19 · 2016

19. MADRID · NOV 18-19 · 2016

20. MADRID · NOV 18-19 · 2016

21. MADRID · NOV 18-19 · 2016

22. MADRID · NOV 18-19 · 2016

23. MADRID · NOV 18-19 · 2016

24. MADRID · NOV 18-19 · 2016
pero no puedo dejar
de pensar en él...

25. MADRID · NOV 18-19 · 2016
eclipse,
te echo de menos...

26. MADRID · NOV 18-19 · 2016
...necesito tu
ayuda

27. MADRID · NOV 18-19 · 2016
Avísame si me equivoco…
y ayúdame a solucionar mis problemas

28. MADRID · NOV 18-19 · 2016
Dime qué puedo hacer...
...y escribe tu el código por mi

29. MADRID · NOV 18-19 · 2016
A veces cambio de nombre...
...y tú te aseguras de que los demás lo saben

30. MADRID · NOV 18-19 · 2016
Y cuando tengo dudas...
...tú me las resuelves

31. MADRID · NOV 18-19 · 2016
...sé que con JavaScript no
me puedes ayudar

32. MADRID · NOV 18-19 · 2016
pero puedo añadir a mi
código lo que te haga falta

33. MADRID · NOV 18-19 · 2016

34. MADRID · NOV 18-19 · 2016
Qué es TypeScript?
Una extensión de JavaScript ES6
para que puedas ayudar a las herramientas
para que te ayuden a ti

35. MADRID · NOV 18-19 · 2016

36. MADRID · NOV 18-19 · 2016
Vamos a programar y
os lo cuento...

37. MADRID · NOV 18-19 · 2016
Necesitamos un editor moderno
Visual Studio
Code

38. MADRID · NOV 18-19 · 2016
Preparando el entorno...
●
Node.js
https://nodejs.org/
●
Visual Studio Code
https://code.visualstudio.com
●
TypeScript
npm install -g typescript

39. MADRID · NOV 18-19 · 2016

40. MADRID · NOV 18-19 · 2016
Herramientas TypeScript
●
Analizan el código TS y generan JS ES6
(quitando el código no estándar)
●
Si encuentra algún problema en tu código te
avisan
●
Aunque tu código tenga “avisos”, siempre se
genera el JavaScript
●
Un mismo proyecto puede tener código JS y
TS a la vez

41. MADRID · NOV 18-19 · 2016
el lenguaje

42. MADRID · NOV 18-19 · 2016
Valores del mismo tipo en variables
●
Si asignas un valor de un tipo al inicializar
una variable y luego asignas un valor de otro
tipo, TypeScript te avisa
ERROR: Type 'string'
is not assignable to
type 'number'

43. MADRID · NOV 18-19 · 2016
Verificación de uso correcto
●
TS te avisa si usas una propiedad o método
no disponible en el tipo de la variable
ERROR: Property
'length' does not exist
on type 'number'

44. MADRID · NOV 18-19 · 2016
Autocompletado de métodos
●
Como sabe el tipo de la variable y los
métodos que tiene, te ayuda

45. MADRID · NOV 18-19 · 2016
Variables no declaradas
●
Si intentas usar una variable no declarada,
te avisa
ERROR: Cannot
find name 'nam'

46. MADRID · NOV 18-19 · 2016
Variables con cualquier valor
●
Si no inicializas la variable, TS asume que esa
variable puede contener valores de
cualquier tipo
Variable con valores de
diferente tipo

47. MADRID · NOV 18-19 · 2016
Te has dado cuenta?
Era código JavaScript
estándar
Empezamos con las
extensiones de TypeScript

48. MADRID · NOV 18-19 · 2016
Tipos de parámetros
●
TS no puede inferir el tipo de los
parámetros porque no se inicializan*
De qué tipo son estos
parámetros?
* En ES6 se puede dar valor por defecto a los parámetros

49. MADRID · NOV 18-19 · 2016
Tipos de parámetros
●
Para poder ayudar, TS necesita saber de qué
tipo son los parámetros
●
Tipos básicos
Etiquetas de tipo
string number boolean

50. MADRID · NOV 18-19 · 2016
Tipo de retorno de funciones
●
Si le decimos el tipo de retorno de la
función, TS también nos ayuda
ERROR: Type 'string'
is not assignable to
type 'number'

51. MADRID · NOV 18-19 · 2016
Tipo de retorno de funciones
●
Si le decimos que no vamos a devolver
valor, nos avisa si lo hacemos
●
Usamos el “tipo” void
ERROR: Type 'string'
is not assignable to
type 'void'
No devolvemos
valor

52. MADRID · NOV 18-19 · 2016
Llamar a una función
●
Si le decimos los tipos de la función, nos
ayuda si no hacemos bien la llamada
●
Y también puede inferir el tipo de la variable
ERROR: Argument of type
'string' is not
assignable to parameter
of type 'number'
TS conoce que
num es de tipo
number

53. MADRID · NOV 18-19 · 2016
Parámetros opcionales
●
En TS se asume que todos los parámetros
son obligatorios, pero podemos hacer que
sean opcionales con ? parámetro
opcional
ERROR: Supplied
parameters do not match
any signature of call
target.

54. MADRID · NOV 18-19 · 2016
Declaración del tipo en un variable
●
Siempre podemos indicar el tipo de la
variable al declararla
●
También la podríamos inicializar
ERROR: Type 'number' is
not assignable to type
'string'

55. MADRID · NOV 18-19 · 2016
Arrays
●
TS también nos ayuda con los arrays
Tipo string
Tipo string[]
Tipo string

56. MADRID · NOV 18-19 · 2016
Arrays
●
Incluso con sus métodos
ERROR: Argument of type
'string' is not
assignable to parameter
of type 'boolean'

57. MADRID · NOV 18-19 · 2016
¿Has visto todo lo que
te puede ayudar TypeScript
sabiendo el tipo?

58. MADRID · NOV 18-19 · 2016
Te gustaría que TS te
avisara cuando no sabe el
tipo de una variable?

59. MADRID · NOV 18-19 · 2016
El tipo any
●
Cuado TS no puede adivinar un tipo mejor
para una variable, considera que tiene el tipo
any Estos parámetros tienen tipo any
Como puede venir cualquier valor,
TS no nos puede ayudar mucho

60. MADRID · NOV 18-19 · 2016
El tipo any
●
Si tomamos la decisión de poner tipo a
todos los parámetros y variables, estaría
bien que TS te avisara si se te olvida
●
TS te puede avisar si una variable tiene un
tipo any implícito
https://basarat.gitbooks.io/typescript/content/docs/options/noImplicitAny.html
--noImplicitAny

61. MADRID · NOV 18-19 · 2016
Fichero tsconfig.json
●
Un proyecto TS suele tener un fichero
tsconfig.json en la raíz para configurar
las herramientas
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Genera módulos Node.js
Genera sourceMaps
Genera los JS en la carpeta “out”
Permite mezclar JS y TS
Incluye y excluye estos ficheros

62. MADRID · NOV 18-19 · 2016
noImplicityAny
●
Avisa cuando se infiere el tipo any para una
variable o parámetro
noImplicitAny activada
https://basarat.gitbooks.io/typescript/content/docs/options/noImplicitAny.html

63. MADRID · NOV 18-19 · 2016
noImplicityAny
●
Si está activada noImplicitAny se obtiene el
siguiente aviso
https://basarat.gitbooks.io/typescript/content/docs/options/noImplicitAny.html
ERROR: Parameter 'name'
implicitly has an 'any'
type

64. MADRID · NOV 18-19 · 2016
noImplicityAny
●
Si no sabemos el tipo, ponemos el tipo del
parámetro como any
https://basarat.gitbooks.io/typescript/content/docs/options/noImplicitAny.html

65. MADRID · NOV 18-19 · 2016
Elegir el tipo más preciso
●
Tipos básicos
– any:
●
Cualquier valor
●
Demasiado genérico
– number, string o boolean:
●
Algunas veces demasiado restringido

66. MADRID · NOV 18-19 · 2016
y si en mi código JS un
parámetro id puede ser
number o string?

67. MADRID · NOV 18-19 · 2016
Tipos
Avanzados

68. MADRID · NOV 18-19 · 2016
TypeScript
no te obliga a cambiar
tu código JavaScript

69. MADRID · NOV 18-19 · 2016
Tiene un sistema de tipos
adaptado a los idiomas
JavaScript

70. MADRID · NOV 18-19 · 2016
Tipos unión
●
Una variable puede tener valores de varios
tipos
https://www.typescriptlang.org/docs/handbook/advanced-types.html
Tipo unión

71. MADRID · NOV 18-19 · 2016
Tipos unión
●
Si la definición del tipo se complica, se
puede definir como un tipo, darle nombre y
usar ese nombre
https://www.typescriptlang.org/docs/handbook/advanced-types.html

72. MADRID · NOV 18-19 · 2016
Enumerados
●
La unión también se puede usar para definir
enumerados de string
https://basarat.gitbooks.io/typescript/content/docs/tips/stringEnums.html
Enumerado
basado en strings
ERROR: Argument of type '"meybe"' is
not assignable to parameter of type
'"yes" | "no" | "maybe"'* Existen mecanismos más avanzados
para declarar enumerados enTypeScript

73. MADRID · NOV 18-19 · 2016
Tipos de
Funciones

74. MADRID · NOV 18-19 · 2016
Tipos de funciones
●
Cuando asignamos una función a una
variable se infiere el tipo de la función
ERROR: Supplied parameters do not
match any signature of call target

75. MADRID · NOV 18-19 · 2016
Tipos de funciones
●
Podemos declarar el tipo de la función de
forma explícita
Tipo de la función
Parámetros =>
Tipo de retorno

76. MADRID · NOV 18-19 · 2016
Tipos de funciones
●
Ahora con parámetros

77. MADRID · NOV 18-19 · 2016
Tipos de funciones
●
Y si nos equivocamos, TS nos ayuda
ERROR: Type '() => string' is not assignable to type '(num: number)
=> number'. Type 'string' is not assignable to type 'number'

78. MADRID · NOV 18-19 · 2016
Tipos de funciones
●
Para soportar idiomas típicos TS es flexible
●
Permite asignar funciones con menos
parámetros que los declarados en el tipo,
siempre que sus tipos sean compatibles

79. MADRID · NOV 18-19 · 2016
Tipos de
Objetos

80. MADRID · NOV 18-19 · 2016
Tipos de objetos
●
En los objetos literales se infiere el tipo de
la inicialización de la variable

81. MADRID · NOV 18-19 · 2016
Tipos de objetos
●
Por defecto no podemos añadir
propiedades
ERROR: Property 'telefono'
does not exist on type
'{ nombre: string;
salario: number; }'

82. MADRID · NOV 18-19 · 2016
Tipos de objetos
●
Podemos declarar la variable como any, pero
no se realizará ninguna validación
Variable de tipo
any

83. MADRID · NOV 18-19 · 2016
Tipos de objetos
●
En los parámetros de las funciones, el tipo no
se puede inferir
●
Si queremos ayuda, hay que especificar el
tipo de forma explícita
Error no
detectado

84. MADRID · NOV 18-19 · 2016
Tipos de objetos
●
Se le puede dar un nombre al tipo de objeto
Tipo de
objeto

85. MADRID · NOV 18-19 · 2016
Tipos de objetos
●
Se le puede definir propiedades opcionales
Opcional

86. MADRID · NOV 18-19 · 2016
Tipos de objetos
●
Para prevenir errores, TS nos avisa cuando
pasamos una propiedad no declarada
ERROR: ...Object literal
may only specify known
properties, and 'widht'
does not exist...

87. MADRID · NOV 18-19 · 2016
Clases

88. MADRID · NOV 18-19 · 2016
Clases

89. MADRID · NOV 18-19 · 2016
Desde ES6, en JavaScript
se pueden implementar*
clases
* Aunque es azúcar sintáctico de los prototipos

90. MADRID · NOV 18-19 · 2016
Clases en ES6

91. MADRID · NOV 18-19 · 2016
Herencia de clases en ES6

92. MADRID · NOV 18-19 · 2016
Creación de objetos en ES6

93. MADRID · NOV 18-19 · 2016
Clases en ES6
●
No se declaran los atributos
●
Los atributos se crean al usarse (con this) en
el constructor o los métodos
●
No existe el concepto de visibilidad de los
atributos, todos son públicos
●
Hay bastante controversia sobre su uso
https://medium.com/javascript-scene/how-to-fix-the-es6-class-keyword-2d42bb3f4caf#.vvmrzg9f0
https://medium.com/@housecor/in-defense-of-javascript-classes-e50bf2270a95#.bqp1arnuy

94. MADRID · NOV 18-19 · 2016
TypeScript nos puede
ayudar a implementar clases
y crear objetos
(si queremos usarlas)

95. MADRID · NOV 18-19 · 2016
Clases en TypeScript
●
Es obligatorio declarar los atributos
●
Podemos usar visibilidad public (por
defecto), private y protected
●
TypeScript nos avisa de:
– Uso de atributos que no existen
– Llamadas a métodos que no existen o
parámetros no adecuados
– Violaciones de la visibilidad

96. MADRID · NOV 18-19 · 2016
Clases en TypeScript
Declaración
de atributos

97. MADRID · NOV 18-19 · 2016
Clases en TypeScript
●
Para evitar tanta repetición, un parámetro
del constructor con una visibilidad se
considera también un atributo (y se inicializa)

98. MADRID · NOV 18-19 · 2016
Clases y tipos de objetos
●
Los objetos de
una clase se
pueden asignar
a variables
definidas con un
tipo de objeto si
cumplen con su
estructura
Person
cumple la
estructura de
Named
Person es
asignable a
Named

99. MADRID · NOV 18-19 · 2016
Interfaces en TypeScript
●
Un tipo de objeto se parece mucho a un
interfaz de lenguajes como Java o C#
●
Podemos declarar un tipo de objeto como
un interfaz

100. MADRID · NOV 18-19 · 2016
Interfaces en TypeScript
●
Las clases pueden implementar interfaces
●
TS nos avisa si la clase no cumple la
estructura del interfaz ERROR: Class 'Person'
incorrectly implements
interface 'Named'.
Property 'name' is missing
in type 'Person'

101. MADRID · NOV 18-19 · 2016
Tipos de las
Librerías
Bibliotecas?

102. MADRID · NOV 18-19 · 2016
Tipos de las librerías
●
Lo ideal sería que todas las bibliotecas que
usamos tuvieran los tipos ya definidos
●
TypeScript viene de serie con librerías del
navegador
●
Podemos usar las que queramos
dependiendo del entorno de ejecución
dom webworker es5 es6

103. MADRID · NOV 18-19 · 2016
Librerías de terceros?
●
La comunidad ha definido el tipo de 2344
librerías
https://www.npmjs.com/~types

104. MADRID · NOV 18-19 · 2016
Librerías de terceros?
●
La comunidad ha definido el tipo de 2344
librerías
https://www.npmjs.com/~types

105. MADRID · NOV 18-19 · 2016
Librerías de terceros?
●
Algunas incluso están implementadas en TS
https://www.npmjs.com/~types

106. MADRID · NOV 18-19 · 2016
Y si la librería no tiene tipos?
●
Puedes usarla como en JavaScript (sin ninguna
ayuda de TS)
●
O puedes ir definiendo los tipos que te vayan
haciendo falta partiendo de la documentación
●
Y si la definición es de calidad, puedes
compartirla con la comunidad en
DefinitelyTyped
http://definitelytyped.org/

107. MADRID · NOV 18-19 · 2016
Y mucho
más...

108. MADRID · NOV 18-19 · 2016
Otras características de TypeScript
●
Lenguaje
– Generics en clases y funciones
– Async / Await (ES7)
– Anotaciones (ES7)
●
Herramientas
– Generar ES5 (evitando el uso de Babel)
– Transpilador en el browser (prototipado)

109. MADRID · NOV 18-19 · 2016
Interesante...
Y quién ha hecho
esto?

110. MADRID · NOV 18-19 · 2016

111. MADRID · NOV 18-19 · 2016
Quién ha hecho TypeScript?
●
Un proyecto desarrollado
en abierto en GitHub
●
Liderando Anders Hejlsberg
– (Turbo Pascal, Delphi, C#)
●
Financiado por Microsoft
●
Licencia Apache 2
http://www.typescriptlang.org/
https://www.gitbook.com/book/basarat/typescript/details

112. MADRID · NOV 18-19 · 2016
Volvemos a la eterna
discusión de qué lenguajes son mejores?
Tipado estático vs dinámico?

113. MADRID · NOV 18-19 · 2016
El eterno debate
●
Static vs Dynamic
– https://pchiusano.github.io/2016-09-15/static-vs-dynamic.html
●
Static typing will not save us from bugs
– http://www.drmaciver.com/2016/10/static-typing-will-not-save-us-from-broken-softwar
e/
●
Types
– https://gist.github.com/garybernhardt/122909856b570c5c457a6cd674795a9c
●
What to know before debating type systems
– http://blogs.perl.org/users/ovid/2010/08/what-to-know-before-debating-type-systems.
html
●
Unit testing is't enough. You need static typings too
– http://evanfarrer.blogspot.com.es/2012/06/unit-testing-isnt-enough-you-need.html

114. MADRID · NOV 18-19 · 2016
Uncle Bob
Robert C. Martin
http://blog.cleancoder.com/uncle-bob/2016/05/01/TypeWars.html
You don't need static type checking if you
have 100% unit test coverage
As TDD becomes more accepted, dynamic
languages will be preferred

115. MADRID · NOV 18-19 · 2016
Encuesta totalmente sesgada hacia Javeros torpes como yo ;)
https://twitter.com/micael_gallego/status/787916015648768000

116. MADRID · NOV 18-19 · 2016
Según Anders, TS no es ni tipado
estático ni dinámico
https://twitter.com/ahejlsberg/status/792762247239995392?s=09

117. MADRID · NOV 18-19 · 2016
¿TypeScript o JavaScript?
Depende del programador
y del proyecto

118. MADRID · NOV 18-19 · 2016
Hay quien considera que TypeScript lo
complica todo innecesariamente
(y es comprensible)

119. MADRID · NOV 18-19 · 2016https://twitter.com/pinchito/status/654293829013643265

120. MADRID · NOV 18-19 · 2016https://twitter.com/CodingCarlos/status/780536033712738305

121. MADRID · NOV 18-19 · 2016
TypeScript es un nuevo enfoque,
tu JavaScript de siempre pero con
una red de seguridad

122. MADRID · NOV 18-19 · 2016
Cada vez hay más JavaScripters
convencidos que ven
bondades en TypeScript

123. MADRID · NOV 18-19 · 2016https://twitter.com/javiervelezreye/status/793594508298551296

124. MADRID · NOV 18-19 · 2016https://twitter.com/maxlynch/status/733669142985908225

125. MADRID · NOV 18-19 · 2016
https://medium.com/webpack/sustaining-webpack-for-
the-future-part-1-32bea7f9e8a2#.7mbnncr89
SeanT. Larkin
Webpack core developer

126. MADRID · NOV 18-19 · 2016
La experiencia de un JavaScripter
cualquiera...
http://teropa.info/blog/2016/05/19/things-that-excite-me-about-angular-2.html

127. MADRID · NOV 18-19 · 2016
Llevo trabajando desde hace mucho tiempo
con lenguajes dinámicos (JavaScript,
Clojure, Ruby) sin verificación de tipos ni
autocompletado en mi editor.

128. MADRID · NOV 18-19 · 2016
Mi cerebro ha aprendido a trabajar sin esas
cosas. Sabía que estas funcionalidades son
las ventajas que aportaTypeScript, pero no
eran para mi. No creo que valga la pena
añadir nuevas herramientas y la gestión de
los tipos de las librerías.

129. MADRID · NOV 18-19 · 2016
Pero empecé a usarTypeScript en algunos
proyectos y algo ocurrió. Me olvidaba de
queTypeScript estaba ahí.
Seguía programando como había hecho
con JavaScript durante años.

130. MADRID · NOV 18-19 · 2016
La gente dice que TypeScript es como una
pequeña capa encima de JavaScript, pero
hasta que no lo pruebas no te das cuenta.
Es sólo JavaScript pero con cinturón de
seguridad.

131. MADRID · NOV 18-19 · 2016
He empezado a detectar problemas en
mis proyectos JavaScript donde he
pensado “podríamos haber detectado este
error antes si hubiéramos tenido un
interfazTypeScript”

132. MADRID · NOV 18-19 · 2016
Cuál es la adopción de
TypeScript?

133. MADRID · NOV 18-19 · 2016
Es el lenguaje recomendado por Google
para aplicaciones Angular 2

134. MADRID · NOV 18-19 · 2016
TypeScript
coffeescript
ES6
GoogleTrends

135. MADRID · NOV 18-19 · 2016
TypeScript es para mi?
estarás pensando...

136. MADRID · NOV 18-19 · 2016
Depende de
lo torpe que
seas

137. MADRID · NOV 18-19 · 2016
Te he
convencido…
Y lo sabes

138. MADRID · NOV 18-19 · 2016
Prueba, y
me cuentas!
Gracias!
por venir
@micael_gallego micael.gallego@urjc.es
https://goo.gl/forms/i3m2SOFr8nAaZWB62
Feedback de la
charla y de TypeScript