Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
TypeScript
Un lenguaje aburrido
para programadores
torpes y tristes
by @micael_gallego
MADRID · NOV 18-19 · 2016
MADRID · NOV 18-19 · 2016
Quién soy?
@micael_gallego
micael.gallego@urjc.es
@micaelgallego
MADRID · NOV 18-19 · 2016
Quién soy?
developer
MADRID · NOV 18-19 · 2016
Quién soy?
developer
MADRID · NOV 18-19 · 2016
Quién soy?
developer
MADRID · NOV 18-19 · 2016
Quién soy?
developer
torpe
MADRID · NOV 18-19 · 2016
Quién soy?
+
developer
torpe
MADRID · NOV 18-19 · 2016
Que he hecho?
MADRID · NOV 18-19 · 2016
Qué he hecho?
MADRID · NOV 18-19 · 2016
Ya me lo dijo Javier Abadía
Programar
en Java es como...
MADRID · NOV 18-19 · 2016
Ya me lo dijo Javier Abadía
Programar
en Java es como...
MADRID · NOV 18-19 · 2016
Cómo me
preparaba
para montar
en bici...
MADRID · NOV 18-19 · 2016
Un día todo cambió...
MADRID · NOV 18-19 · 2016
… llegó “front”
MADRID · NOV 18-19 · 2016
… llegó “front”
MADRID · NOV 18-19 · 2016
MADRID · NOV 18-19 · 2016
https://www.destroyallsoftware.com/talks/wat
MADRID · NOV 18-19 · 2016
MADRID · NOV 18-19 · 2016
MADRID · NOV 18-19 · 2016
MADRID · NOV 18-19 · 2016
MADRID · NOV 18-19 · 2016
MADRID · NOV 18-19 · 2016
MADRID · NOV 18-19 · 2016
pero no puedo dejar
de pensar en él...
MADRID · NOV 18-19 · 2016
eclipse,
te echo de menos...
MADRID · NOV 18-19 · 2016
...necesito tu
ayuda
MADRID · NOV 18-19 · 2016
Avísame si me equivoco…
y ayúdame a solucionar mis problemas
MADRID · NOV 18-19 · 2016
Dime qué puedo hacer...
...y escribe tu el código por mi
MADRID · NOV 18-19 · 2016
A veces cambio de nombre...
...y tú te aseguras de que los demás lo saben
MADRID · NOV 18-19 · 2016
Y cuando tengo dudas...
...tú me las resuelves
MADRID · NOV 18-19 · 2016
...sé que con JavaScript no
me puedes ayudar
MADRID · NOV 18-19 · 2016
pero puedo añadir a mi
código lo que te haga falta
MADRID · NOV 18-19 · 2016
MADRID · NOV 18-19 · 2016
Qué es TypeScript?
Una extensión de JavaScript ES6
para que puedas ayudar a las herramientas
par...
MADRID · NOV 18-19 · 2016
MADRID · NOV 18-19 · 2016
Vamos a programar y
os lo cuento...
MADRID · NOV 18-19 · 2016
Necesitamos un editor moderno
Visual Studio
Code
MADRID · NOV 18-19 · 2016
Preparando el entorno...
●
Node.js
https://nodejs.org/
●
Visual Studio Code
https://code.visuals...
MADRID · NOV 18-19 · 2016
MADRID · NOV 18-19 · 2016
Herramientas TypeScript
●
Analizan el código TS y generan JS ES6
(quitando el código no estándar...
MADRID · NOV 18-19 · 2016
el lenguaje
MADRID · NOV 18-19 · 2016
Valores del mismo tipo en variables
●
Si asignas un valor de un tipo al inicializar
una variable...
MADRID · NOV 18-19 · 2016
Verificación de uso correcto
●
TS te avisa si usas una propiedad o método
no disponible en el ti...
MADRID · NOV 18-19 · 2016
Autocompletado de métodos
●
Como sabe el tipo de la variable y los
métodos que tiene, te ayuda
MADRID · NOV 18-19 · 2016
Variables no declaradas
●
Si intentas usar una variable no declarada,
te avisa
ERROR: Cannot
fin...
MADRID · NOV 18-19 · 2016
Variables con cualquier valor
●
Si no inicializas la variable, TS asume que esa
variable puede c...
MADRID · NOV 18-19 · 2016
Te has dado cuenta?
Era código JavaScript
estándar
Empezamos con las
extensiones de TypeScript
MADRID · NOV 18-19 · 2016
Tipos de parámetros
●
TS no puede inferir el tipo de los
parámetros porque no se inicializan*
De...
MADRID · NOV 18-19 · 2016
Tipos de parámetros
●
Para poder ayudar, TS necesita saber de qué
tipo son los parámetros
●
Tipo...
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 ay...
MADRID · NOV 18-19 · 2016
Tipo de retorno de funciones
●
Si le decimos que no vamos a devolver
valor, nos avisa si lo hace...
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 ll...
MADRID · NOV 18-19 · 2016
Parámetros opcionales
●
En TS se asume que todos los parámetros
son obligatorios, pero podemos h...
MADRID · NOV 18-19 · 2016
Declaración del tipo en un variable
●
Siempre podemos indicar el tipo de la
variable al declarar...
MADRID · NOV 18-19 · 2016
Arrays
●
TS también nos ayuda con los arrays
Tipo string
Tipo string[]
Tipo string
MADRID · NOV 18-19 · 2016
Arrays
●
Incluso con sus métodos
ERROR: Argument of type
'string' is not
assignable to parameter...
MADRID · NOV 18-19 · 2016
¿Has visto todo lo que
te puede ayudar TypeScript
sabiendo el tipo?
MADRID · NOV 18-19 · 2016
Te gustaría que TS te
avisara cuando no sabe el
tipo de una variable?
MADRID · NOV 18-19 · 2016
El tipo any
●
Cuado TS no puede adivinar un tipo mejor
para una variable, considera que tiene el...
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
b...
MADRID · NOV 18-19 · 2016
Fichero tsconfig.json
●
Un proyecto TS suele tener un fichero
tsconfig.json en la raíz para conf...
MADRID · NOV 18-19 · 2016
noImplicityAny
●
Avisa cuando se infiere el tipo any para una
variable o parámetro
noImplicitAny...
MADRID · NOV 18-19 · 2016
noImplicityAny
●
Si está activada noImplicitAny se obtiene el
siguiente aviso
https://basarat.gi...
MADRID · NOV 18-19 · 2016
noImplicityAny
●
Si no sabemos el tipo, ponemos el tipo del
parámetro como any
https://basarat.g...
MADRID · NOV 18-19 · 2016
Elegir el tipo más preciso
●
Tipos básicos
– any:
●
Cualquier valor
●
Demasiado genérico
– numbe...
MADRID · NOV 18-19 · 2016
y si en mi código JS un
parámetro id puede ser
number o string?
MADRID · NOV 18-19 · 2016
Tipos
Avanzados
MADRID · NOV 18-19 · 2016
TypeScript
no te obliga a cambiar
tu código JavaScript
MADRID · NOV 18-19 · 2016
Tiene un sistema de tipos
adaptado a los idiomas
JavaScript
MADRID · NOV 18-19 · 2016
Tipos unión
●
Una variable puede tener valores de varios
tipos
https://www.typescriptlang.org/do...
MADRID · NOV 18-19 · 2016
Tipos unión
●
Si la definición del tipo se complica, se
puede definir como un tipo, darle nombre...
MADRID · NOV 18-19 · 2016
Enumerados
●
La unión también se puede usar para definir
enumerados de string
https://basarat.gi...
MADRID · NOV 18-19 · 2016
Tipos de
Funciones
MADRID · NOV 18-19 · 2016
Tipos de funciones
●
Cuando asignamos una función a una
variable se infiere el tipo de la funció...
MADRID · NOV 18-19 · 2016
Tipos de funciones
●
Podemos declarar el tipo de la función de
forma explícita
Tipo de la funció...
MADRID · NOV 18-19 · 2016
Tipos de funciones
●
Ahora con parámetros
MADRID · NOV 18-19 · 2016
Tipos de funciones
●
Y si nos equivocamos, TS nos ayuda
ERROR: Type '() => string' is not assign...
MADRID · NOV 18-19 · 2016
Tipos de funciones
●
Para soportar idiomas típicos TS es flexible
●
Permite asignar funciones co...
MADRID · NOV 18-19 · 2016
Tipos de
Objetos
MADRID · NOV 18-19 · 2016
Tipos de objetos
●
En los objetos literales se infiere el tipo de
la inicialización de la variab...
MADRID · NOV 18-19 · 2016
Tipos de objetos
●
Por defecto no podemos añadir
propiedades
ERROR: Property 'telefono'
does not...
MADRID · NOV 18-19 · 2016
Tipos de objetos
●
Podemos declarar la variable como any, pero
no se realizará ninguna validació...
MADRID · NOV 18-19 · 2016
Tipos de objetos
●
En los parámetros de las funciones, el tipo no
se puede inferir
●
Si queremos...
MADRID · NOV 18-19 · 2016
Tipos de objetos
●
Se le puede dar un nombre al tipo de objeto
Tipo de
objeto
MADRID · NOV 18-19 · 2016
Tipos de objetos
●
Se le puede definir propiedades opcionales
Opcional
MADRID · NOV 18-19 · 2016
Tipos de objetos
●
Para prevenir errores, TS nos avisa cuando
pasamos una propiedad no declarada...
MADRID · NOV 18-19 · 2016
Clases
MADRID · NOV 18-19 · 2016
Clases
MADRID · NOV 18-19 · 2016
Desde ES6, en JavaScript
se pueden implementar*
clases
* Aunque es azúcar sintáctico de los prot...
MADRID · NOV 18-19 · 2016
Clases en ES6
MADRID · NOV 18-19 · 2016
Herencia de clases en ES6
MADRID · NOV 18-19 · 2016
Creación de objetos en ES6
MADRID · NOV 18-19 · 2016
Clases en ES6
●
No se declaran los atributos
●
Los atributos se crean al usarse (con this) en
el...
MADRID · NOV 18-19 · 2016
TypeScript nos puede
ayudar a implementar clases
y crear objetos
(si queremos usarlas)
MADRID · NOV 18-19 · 2016
Clases en TypeScript
●
Es obligatorio declarar los atributos
●
Podemos usar visibilidad public (...
MADRID · NOV 18-19 · 2016
Clases en TypeScript
Declaración
de atributos
MADRID · NOV 18-19 · 2016
Clases en TypeScript
●
Para evitar tanta repetición, un parámetro
del constructor con una visibi...
MADRID · NOV 18-19 · 2016
Clases y tipos de objetos
●
Los objetos de
una clase se
pueden asignar
a variables
definidas con...
MADRID · NOV 18-19 · 2016
Interfaces en TypeScript
●
Un tipo de objeto se parece mucho a un
interfaz de lenguajes como Jav...
MADRID · NOV 18-19 · 2016
Interfaces en TypeScript
●
Las clases pueden implementar interfaces
●
TS nos avisa si la clase n...
MADRID · NOV 18-19 · 2016
Tipos de las
Librerías
Bibliotecas?
MADRID · NOV 18-19 · 2016
Tipos de las librerías
●
Lo ideal sería que todas las bibliotecas que
usamos tuvieran los tipos ...
MADRID · NOV 18-19 · 2016
Librerías de terceros?
●
La comunidad ha definido el tipo de 2344
librerías
https://www.npmjs.co...
MADRID · NOV 18-19 · 2016
Librerías de terceros?
●
La comunidad ha definido el tipo de 2344
librerías
https://www.npmjs.co...
MADRID · NOV 18-19 · 2016
Librerías de terceros?
●
Algunas incluso están implementadas en TS
https://www.npmjs.com/~types
MADRID · NOV 18-19 · 2016
Y si la librería no tiene tipos?
●
Puedes usarla como en JavaScript (sin ninguna
ayuda de TS)
●
...
MADRID · NOV 18-19 · 2016
Y mucho
más...
MADRID · NOV 18-19 · 2016
Otras características de TypeScript
●
Lenguaje
– Generics en clases y funciones
– Async / Await ...
MADRID · NOV 18-19 · 2016
Interesante...
Y quién ha hecho
esto?
MADRID · NOV 18-19 · 2016
MADRID · NOV 18-19 · 2016
Quién ha hecho TypeScript?
●
Un proyecto desarrollado
en abierto en GitHub
●
Liderando Anders He...
MADRID · NOV 18-19 · 2016
Volvemos a la eterna
discusión de qué lenguajes son mejores?
Tipado estático vs dinámico?
MADRID · NOV 18-19 · 2016
El eterno debate
●
Static vs Dynamic
– https://pchiusano.github.io/2016-09-15/static-vs-dynamic....
MADRID · NOV 18-19 · 2016
Uncle Bob
Robert C. Martin
http://blog.cleancoder.com/uncle-bob/2016/05/01/TypeWars.html
You don...
MADRID · NOV 18-19 · 2016
Encuesta totalmente sesgada hacia Javeros torpes como yo ;)
https://twitter.com/micael_gallego/s...
MADRID · NOV 18-19 · 2016
Según Anders, TS no es ni tipado
estático ni dinámico
https://twitter.com/ahejlsberg/status/7927...
MADRID · NOV 18-19 · 2016
¿TypeScript o JavaScript?
Depende del programador
y del proyecto
MADRID · NOV 18-19 · 2016
Hay quien considera que TypeScript lo
complica todo innecesariamente
(y es comprensible)
MADRID · NOV 18-19 · 2016https://twitter.com/pinchito/status/654293829013643265
MADRID · NOV 18-19 · 2016https://twitter.com/CodingCarlos/status/780536033712738305
MADRID · NOV 18-19 · 2016
TypeScript es un nuevo enfoque,
tu JavaScript de siempre pero con
una red de seguridad
MADRID · NOV 18-19 · 2016
Cada vez hay más JavaScripters
convencidos que ven
bondades en TypeScript
MADRID · NOV 18-19 · 2016https://twitter.com/javiervelezreye/status/793594508298551296
MADRID · NOV 18-19 · 2016https://twitter.com/maxlynch/status/733669142985908225
MADRID · NOV 18-19 · 2016
https://medium.com/webpack/sustaining-webpack-for-
the-future-part-1-32bea7f9e8a2#.7mbnncr89
Sea...
MADRID · NOV 18-19 · 2016
La experiencia de un JavaScripter
cualquiera...
http://teropa.info/blog/2016/05/19/things-that-e...
MADRID · NOV 18-19 · 2016
Llevo trabajando desde hace mucho tiempo
con lenguajes dinámicos (JavaScript,
Clojure, Ruby) sin...
MADRID · NOV 18-19 · 2016
Mi cerebro ha aprendido a trabajar sin esas
cosas. Sabía que estas funcionalidades son
las venta...
MADRID · NOV 18-19 · 2016
Pero empecé a usarTypeScript en algunos
proyectos y algo ocurrió. Me olvidaba de
queTypeScript e...
MADRID · NOV 18-19 · 2016
La gente dice que TypeScript es como una
pequeña capa encima de JavaScript, pero
hasta que no lo...
MADRID · NOV 18-19 · 2016
He empezado a detectar problemas en
mis proyectos JavaScript donde he
pensado “podríamos haber d...
MADRID · NOV 18-19 · 2016
Cuál es la adopción de
TypeScript?
MADRID · NOV 18-19 · 2016
Es el lenguaje recomendado por Google
para aplicaciones Angular 2
MADRID · NOV 18-19 · 2016
TypeScript
coffeescript
ES6
GoogleTrends
MADRID · NOV 18-19 · 2016
TypeScript es para mi?
estarás pensando...
MADRID · NOV 18-19 · 2016
Depende de
lo torpe que
seas
MADRID · NOV 18-19 · 2016
Te he
convencido…
Y lo sabes
MADRID · NOV 18-19 · 2016
Prueba, y
me cuentas!
Gracias!
por venir
@micael_gallego micael.gallego@urjc.es
https://goo.gl/f...
Nächste SlideShare
Wird geladen in …5
×

TypeScript: Un lenguaje aburrido para programadores torpes y tristes

2.510 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

TypeScript: Un lenguaje aburrido para programadores torpes y tristes

  1. 1. TypeScript Un lenguaje aburrido para programadores torpes y tristes by @micael_gallego MADRID · NOV 18-19 · 2016
  2. 2. MADRID · NOV 18-19 · 2016 Quién soy? @micael_gallego micael.gallego@urjc.es @micaelgallego
  3. 3. MADRID · NOV 18-19 · 2016 Quién soy? developer
  4. 4. MADRID · NOV 18-19 · 2016 Quién soy? developer
  5. 5. MADRID · NOV 18-19 · 2016 Quién soy? developer
  6. 6. MADRID · NOV 18-19 · 2016 Quién soy? developer torpe
  7. 7. MADRID · NOV 18-19 · 2016 Quién soy? + developer torpe
  8. 8. MADRID · NOV 18-19 · 2016 Que he hecho?
  9. 9. MADRID · NOV 18-19 · 2016 Qué he hecho?
  10. 10. MADRID · NOV 18-19 · 2016 Ya me lo dijo Javier Abadía Programar en Java es como...
  11. 11. MADRID · NOV 18-19 · 2016 Ya me lo dijo Javier Abadía Programar en Java es como...
  12. 12. MADRID · NOV 18-19 · 2016 Cómo me preparaba para montar en bici...
  13. 13. MADRID · NOV 18-19 · 2016 Un día todo cambió...
  14. 14. MADRID · NOV 18-19 · 2016 … llegó “front”
  15. 15. MADRID · NOV 18-19 · 2016 … llegó “front”
  16. 16. MADRID · NOV 18-19 · 2016
  17. 17. MADRID · NOV 18-19 · 2016 https://www.destroyallsoftware.com/talks/wat
  18. 18. MADRID · NOV 18-19 · 2016
  19. 19. MADRID · NOV 18-19 · 2016
  20. 20. MADRID · NOV 18-19 · 2016
  21. 21. MADRID · NOV 18-19 · 2016
  22. 22. MADRID · NOV 18-19 · 2016
  23. 23. MADRID · NOV 18-19 · 2016
  24. 24. MADRID · NOV 18-19 · 2016 pero no puedo dejar de pensar en él...
  25. 25. MADRID · NOV 18-19 · 2016 eclipse, te echo de menos...
  26. 26. MADRID · NOV 18-19 · 2016 ...necesito tu ayuda
  27. 27. MADRID · NOV 18-19 · 2016 Avísame si me equivoco… y ayúdame a solucionar mis problemas
  28. 28. MADRID · NOV 18-19 · 2016 Dime qué puedo hacer... ...y escribe tu el código por mi
  29. 29. MADRID · NOV 18-19 · 2016 A veces cambio de nombre... ...y tú te aseguras de que los demás lo saben
  30. 30. MADRID · NOV 18-19 · 2016 Y cuando tengo dudas... ...tú me las resuelves
  31. 31. MADRID · NOV 18-19 · 2016 ...sé que con JavaScript no me puedes ayudar
  32. 32. MADRID · NOV 18-19 · 2016 pero puedo añadir a mi código lo que te haga falta
  33. 33. MADRID · NOV 18-19 · 2016
  34. 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. 35. MADRID · NOV 18-19 · 2016
  36. 36. MADRID · NOV 18-19 · 2016 Vamos a programar y os lo cuento...
  37. 37. MADRID · NOV 18-19 · 2016 Necesitamos un editor moderno Visual Studio Code
  38. 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. 39. MADRID · NOV 18-19 · 2016
  40. 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. 41. MADRID · NOV 18-19 · 2016 el lenguaje
  42. 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. 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. 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. 45. MADRID · NOV 18-19 · 2016 Variables no declaradas ● Si intentas usar una variable no declarada, te avisa ERROR: Cannot find name 'nam'
  46. 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. 47. MADRID · NOV 18-19 · 2016 Te has dado cuenta? Era código JavaScript estándar Empezamos con las extensiones de TypeScript
  48. 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. 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. 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. 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. 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. 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. 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. 55. MADRID · NOV 18-19 · 2016 Arrays ● TS también nos ayuda con los arrays Tipo string Tipo string[] Tipo string
  56. 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. 57. MADRID · NOV 18-19 · 2016 ¿Has visto todo lo que te puede ayudar TypeScript sabiendo el tipo?
  58. 58. MADRID · NOV 18-19 · 2016 Te gustaría que TS te avisara cuando no sabe el tipo de una variable?
  59. 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. 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. 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. 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. 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. 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. 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. 66. MADRID · NOV 18-19 · 2016 y si en mi código JS un parámetro id puede ser number o string?
  67. 67. MADRID · NOV 18-19 · 2016 Tipos Avanzados
  68. 68. MADRID · NOV 18-19 · 2016 TypeScript no te obliga a cambiar tu código JavaScript
  69. 69. MADRID · NOV 18-19 · 2016 Tiene un sistema de tipos adaptado a los idiomas JavaScript
  70. 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. 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. 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. 73. MADRID · NOV 18-19 · 2016 Tipos de Funciones
  74. 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. 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. 76. MADRID · NOV 18-19 · 2016 Tipos de funciones ● Ahora con parámetros
  77. 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. 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. 79. MADRID · NOV 18-19 · 2016 Tipos de Objetos
  80. 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. 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. 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. 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. 84. MADRID · NOV 18-19 · 2016 Tipos de objetos ● Se le puede dar un nombre al tipo de objeto Tipo de objeto
  85. 85. MADRID · NOV 18-19 · 2016 Tipos de objetos ● Se le puede definir propiedades opcionales Opcional
  86. 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. 87. MADRID · NOV 18-19 · 2016 Clases
  88. 88. MADRID · NOV 18-19 · 2016 Clases
  89. 89. MADRID · NOV 18-19 · 2016 Desde ES6, en JavaScript se pueden implementar* clases * Aunque es azúcar sintáctico de los prototipos
  90. 90. MADRID · NOV 18-19 · 2016 Clases en ES6
  91. 91. MADRID · NOV 18-19 · 2016 Herencia de clases en ES6
  92. 92. MADRID · NOV 18-19 · 2016 Creación de objetos en ES6
  93. 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. 94. MADRID · NOV 18-19 · 2016 TypeScript nos puede ayudar a implementar clases y crear objetos (si queremos usarlas)
  95. 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. 96. MADRID · NOV 18-19 · 2016 Clases en TypeScript Declaración de atributos
  97. 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. 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. 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. 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. 101. MADRID · NOV 18-19 · 2016 Tipos de las Librerías Bibliotecas?
  102. 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. 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. 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. 105. MADRID · NOV 18-19 · 2016 Librerías de terceros? ● Algunas incluso están implementadas en TS https://www.npmjs.com/~types
  106. 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. 107. MADRID · NOV 18-19 · 2016 Y mucho más...
  108. 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. 109. MADRID · NOV 18-19 · 2016 Interesante... Y quién ha hecho esto?
  110. 110. MADRID · NOV 18-19 · 2016
  111. 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. 112. MADRID · NOV 18-19 · 2016 Volvemos a la eterna discusión de qué lenguajes son mejores? Tipado estático vs dinámico?
  113. 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. 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. 115. MADRID · NOV 18-19 · 2016 Encuesta totalmente sesgada hacia Javeros torpes como yo ;) https://twitter.com/micael_gallego/status/787916015648768000
  116. 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. 117. MADRID · NOV 18-19 · 2016 ¿TypeScript o JavaScript? Depende del programador y del proyecto
  118. 118. MADRID · NOV 18-19 · 2016 Hay quien considera que TypeScript lo complica todo innecesariamente (y es comprensible)
  119. 119. MADRID · NOV 18-19 · 2016https://twitter.com/pinchito/status/654293829013643265
  120. 120. MADRID · NOV 18-19 · 2016https://twitter.com/CodingCarlos/status/780536033712738305
  121. 121. MADRID · NOV 18-19 · 2016 TypeScript es un nuevo enfoque, tu JavaScript de siempre pero con una red de seguridad
  122. 122. MADRID · NOV 18-19 · 2016 Cada vez hay más JavaScripters convencidos que ven bondades en TypeScript
  123. 123. MADRID · NOV 18-19 · 2016https://twitter.com/javiervelezreye/status/793594508298551296
  124. 124. MADRID · NOV 18-19 · 2016https://twitter.com/maxlynch/status/733669142985908225
  125. 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. 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. 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. 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. 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. 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. 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. 132. MADRID · NOV 18-19 · 2016 Cuál es la adopción de TypeScript?
  133. 133. MADRID · NOV 18-19 · 2016 Es el lenguaje recomendado por Google para aplicaciones Angular 2
  134. 134. MADRID · NOV 18-19 · 2016 TypeScript coffeescript ES6 GoogleTrends
  135. 135. MADRID · NOV 18-19 · 2016 TypeScript es para mi? estarás pensando...
  136. 136. MADRID · NOV 18-19 · 2016 Depende de lo torpe que seas
  137. 137. MADRID · NOV 18-19 · 2016 Te he convencido… Y lo sabes
  138. 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

×