Lo tenemos como que tocándolo con las puntitas, con estos deditos, con estos deditos
Sabed que me he pelado, sobre todo para todas aquellas personas que estaban preocupadas por la anarquía que estaba ocurriendo en mi cabeza
Pues podéis comprobar que he pasado por la peluquería, así que espero que estéis contentos
Además de eso, tenéis que estar felices, porque hoy vamos a aprender TypeScript desde cero
Pero si hay algo que merece la máxima felicidad, en realidad, es que hemos llegado a los 50.000 en YouTube
50.000 en YouTube, ya se nos queda la mitad
Bueno, perdonad, esta es la energía que tengo yo los viernes, pero que somos 50.000, que muchísimas gracias
Que ya somos 50.000 en YouTube, que me llena de orgullo y satisfacción
Bueno, 50.004, es que esto va en tiempo real, aquí actualizándose
50.004, solo nos quedan ya 49.996
Así que si conoces a 49.996 personas, le puedes indicar que no sé si es el mejor canal de YouTube
Pero sí que el que necesita 49.996 personas, así que se lo puedes compartir y recomendar con midu.tuve
Pero antes de empezar con el curso de TypeScript, y ya que hemos celebrado un poquito los 50.000
Que muchas gracias, me podéis ir diciendo por el chat cómo celebramos los 50.000
No sé, yo he pensado, he pensado en hacer un directo en YouTube y hacer un clon de TikTok
Desde cero, en directo, en YouTube, hasta que nos salga
Como si queremos estar... bueno, hasta que nos salga, a ver, no vamos a hacer exactamente la misma aplicación
Pero bueno, hasta que nos salga algo con cara y ojos, y no sé, estar ahí un rato hasta que nos salga
Y ir haciendo, ir hablando, y que vaya pasando la gente
No sé, a ver qué os parece
Me comentáis, a ver qué os parece la idea
Vale, que os leo, os leo
Fran desde Argentina
Colzarius dice que está pasando la plataforma en la que trabajan a TypeScript
Por lo pronto estamos entretenidos
Qué bueno
Así te va a ir bien lo de hoy
Esteban dice grande
Rey Katakamichi, se puede y se debe
Qué grande
¿Cuál es la ventaja de aprender muchos lenguajes de programación?
Me encanta que ya venís con preguntas pero preparadas de casa y además casi filosóficas
¿Cuál es la ventaja de aprender muchos lenguajes de programación?
Pues mira, yo creo que hay una ventaja bastante interesante de aprender muchos lenguajes de programación
Y es que te da la oportunidad de conocer muchos paradigmas distintos
Claro, si conoces muchos lenguajes de programación y siempre son el mismo
Igual, nah
Pero aparte de hacerte más versátil y que puedas tener más oportunidades laborales
Yo creo que la oportunidad de conocer diferentes paradigmas de programación
Como por ejemplo uno funcional
Otro más que sea procedural, aunque no es muy típico
Pero bueno, procedural podría ser uno
Otro orientado a objetos y tal
Esto lo que hace es expandir tu mente
Así que esa sería la gran ventaja
Desde Sabadei tenemos también a gente
Luis Riego, Luis Guidev, Fentic, Zabotec
¿Tú usas TypeScript en el trabajo?
Pues me la cajota
Muy buena pregunta
Ahora mismo no utilizo TypeScript en el trabajo
Y por eso mi experiencia en TypeScript es más bien limitada
Porque como mi día a día no lo utilizo
Pues por eso justamente quería venir hoy aquí
Y aprender TypeScript con todos ustedes
Y lo vamos a hacer con un curso de Microsoft oficial
Desde cero, lo vamos a seguir paso a paso
Además el curso es en castellano
Y así aprendemos todos
Quien se quiera unir conmigo a aprender
Yo lo voy a ir comentando a voz alta
Las cosas que pienso, lo que voy haciendo y tal
Así que si queréis aprovechar y aprender conmigo
Pues mejor que mejor
¿Luego harás un proyecto de Context?
Pues puede ser
¿Se va a grabar la sesión?
Sí, todas las sesiones se graban
Y ya intentaremos subirla en el canal secundario que tenemos
Pelado Nuevo Vida Nueva
Felicidades Lurrego por tu título en el Bootcamp
Muchas gracias a todos los que me felicitáis por los 50.000
Muchísimas, muchísimas gracias
Y bueno, pues nada
Es que veo que no para esto de escribir, ¿vale?
Luego si no ya volveremos a leer un poquito, ¿vale?
Un clon de YouTube y que todos los canales sean mi dudez
¡Ja, ja!
Ostras, no es mala, ¿eh?
Un clon de YouTube
Vale, vale, me lo apunto
Un clon de YouTube
Me gusta, me gusta
Estábamos hablando también, si acabas de entrar
De que hemos llegado a los 50.000 suscriptores en YouTube
Lo tengo aquí en tiempo real
Bueno, 50.007
Se ha unido alguno más
¿Y qué podíamos hacer para los 50.000?
Y estaba pensando en hacer un directo en YouTube
Y hacer un clon de alguna aplicación
Había pensado TikTok
Porque parece bastante interesante
Pero bueno, ahora me estáis diciendo un clon de YouTube
Me lo puedo pensar también
Me lo puedo pensar también
Pero me parece buena idea
Un clon de YouTube con Next.js
Dicen por aquí
Madre mía, ¿cuál es el 50.000?
No sé quién será el 50.000
Pero muchas gracias
Ahora el que sea el 50.000
Muchas gracias a todos
Muchas gracias a todos por las felicidades
Os lo agradezco un montón
Gracias por vuestro apoyo
Hoy vamos a aprender TypeScript, ¿vale?
Hoy vamos a estar haciendo el curso oficial este de Microsoft
Para aprender TypeScript
Bueno, aquí me dice un clon de Amazon, de Spotify
Hola Cami
Hola Marcos, ¿cómo estáis?
Gracias por pasaros
Vamos a empezar con el curso
Vamos a empezar con el curso un poco
Al menos vamos a estar un ratito con el curso este
Este es el curso que quiero hacer, ¿vale?
Compilación de aplicaciones JavaScript con TypeScript
Dice que son 6 horas y cuarto
O sea que hoy a lo mejor pues hacemos lo que nos llegue
Nos dice que de requisitos previos
HTML básico y JavaScript
Saber, bueno, lo que ya sabéis
Si no habéis aprendido en el bootcamp seguro
Y software que tenemos que tener
Git, Visual Studio Code, Node.js y TypeScript
Vale, TypeScript no lo tengo
Pero me imagino que en algún momento me dirá cómo instalarlo
Así que lo instalaré sin problemas
Si aquí saqué de este tweet
Este curso que me pareció tan interesante
De estaros interesados en aprender TypeScript
Yo, yo, yo, yo
Yo estoy interesado, yo estoy interesado
Os lo voy a pasar por si en algún momento lo queréis hacer, ¿vale?
O lo queréis seguir conmigo o lo que sea
Así que os paso el link
Es totalmente gratis
Lo podéis hacer cuando queráis, como queráis
Es de Microsoft, oficial
Quiero pensar que está bien actualizado
¿Vale? O sea que está actualizado a algo reciente
Porque yo sé que toqué TypeScript
Pero hace mucho, mucho tiempo
Y quiero pensar que esto está actualizado
Porque se lo recomienda Microsoft hace poco
El otro día, 3 de abril
Quiero pensar que está actualizado
Así que este es el que vamos a seguir, ¿vale?
Por si lo queréis hacer y tal
Bueno, por si lo queréis entrar y eso
Vale, pues vamos a ello
¿Os parece?
Compilación de aplicaciones de JavaScript con TypeScript
Vamos a darle a continuar
Bueno, a continuar que debe ser empezar, básicamente
Información general
Bueno, introducción a TypeScript
Primero nos van a presentar el lenguaje de TypeScript
¿Por qué se creó?
Eso es interesante
¿Por qué se crean las cosas?
Si vais a aprender alguna vez algo
Por ejemplo, React
Yo cuando hice el curso de YouTube que tenemos de React
Veréis que al principio
Explico por qué necesitas React
Porque yo creo que es muy interesante saber
Por qué necesitas las cosas antes de aprenderlas
Y además así entiendes
Las ventajas que te da
Y lo aprendes de una forma distinta
Así que me parece muy bien esto que ha dicho
Objetivos
Entender por qué TypeScript
Es una mejora respecto a JavaScript
Seleccionar un editor de TypeScript
Instalar TypeScript
Configurar un proyecto de TypeScript
Vale, eso es lo que quiero
Selección de un editor de TypeScript
Vale
Puedes escribir código de TypeScript en cualquier editor
Pero nosotros vamos a usar Visual Studio Code
Gracias Colzarius por suscribirte con Prime
Ya van tres meses
Vaya pedazo de crack
Tres meses
Muchas gracias
Muchas gracias por apoyarme
Sin ti y sin vosotros
Es que nada de esto sería posible
Ni los 50.000 seguidores de YouTube
Ni todo lo que hago en Twitch
Ni nada
Así que gracias por vuestro cariño
Sitio de prueba
Anteriormente
¿Cómo que anteriormente?
Yo he dicho
Anteriormente escribí el código de TypeScript
Siempre en el sitio de prueba
Yo no he hecho nada de eso todavía
Me imagino que la traducción
Es un poco de aquella manera
Este es un lugar en el que puede escribir
Compartir y no sé qué
Bueno, que aquí hay un playground
Y que podríamos hacer
Un poquito de TypeScript
Me imagino, ¿no?
Y ya está
Muy bien
No lo vamos a saltar
Experimentar, experimentar
Entorno de desarrollo
Integrado
Esto sería con Visual Studio Code
Ya tenemos Visual Studio Code instalado
Entiendo que vosotros también
Así que no vamos a perder el tiempo con esto
¿Cómo que me he ido a la página tres?
¿Me he saltado algo?
Ah, vale, sí
Es que me he saltado
Me he saltado todo esto
Perdón
Perdón, perdón
Bueno, a ver
¿Y cómo ha sido eso, no?
Le he dado a continuar
Bueno, siguiente
Me he saltado esta
Esta página, vale
Información general de TypeScript
Esta parece más interesante
JavaScript es uno de los lenguajes de programación más usados del mundo
Y que se ha convertido en el oficial de la web
Me ha encantado eso
Se ha convertido en el oficial de la web
Es verdad, porque no siempre iba a ser el oficial
Lo que pasa es que poco a poco
Desde que lo creó Netscape
Aunque JavaScript se usa para crear aplicaciones multiplataforma
No está concebido para aplicaciones grandes
Que impliquen millones de líneas de código
Bueno, bueno
Carece de algunas características
Claro, como por ejemplo el tipado
Ahí es donde está TypeScript
Que aborda las limitaciones de JavaScript
Sin poner en peligro la propuesta de valor clave de JavaScript
Que es ejecutar el código en cualquier sitio
Ahí está
Así que ¿Qué es TypeScript?
Importante
¿Qué es TypeScript?
TypeScript es un lenguaje de código abierto
Desarrollado por Microsoft
Parece mentira, ¿eh?
Microsoft la de cosas que tiene desarrolladas
Y ahora en el mundo de la web
¿No?
Y que ahora tiene GitHub, NPM
Es brutal
Se trata de un supraconjunto de JavaScript
Esto es súper importante
Porque esto lo que quiere decir es que
Tu código de JavaScript
Debería ser compatible al 100%
Con tu código en TypeScript
¿Sabes?
O sea, deberías ejecutar tu código de JavaScript
En TypeScript sin ningún problema
Sin añadir ni una línea
Debería ser totalmente compatible
Lo que significa que puedes seguir aprovechando
Tus conocimientos actuales sobre JavaScript
Sugerencias de escritura
Claro, la característica principal de TypeScript
Es su sistema de tipos
Esto es importante
Porque en JavaScript
El sistema de tipos es blando
O sea, es un tipado débil
Y es un tipado dinámico
Y con TypeScript
Justamente lo que vamos a tener
Es un tipado estático
Porque vamos a tener que decirle
Cuál es el tipo que tiene
Y hombre, puede ser dinámico
Aún así
Bueno, vamos a ver
¿Ves?
Mediante la comprobación de tipos estáticos
TypeScript
Al principio del desarrollo
Detecta problemas de código
Que JavaScript normalmente no puede detectar
Claro
Es que esto es lo realmente interesante
O sea, esto es una cosa que me gusta mucho
De TypeScript
Porque tú al final
Puedes escribir tu código de TypeScript
Sin necesidad de añadirle tipos
Y debería detectar si tienes algún problema
Cuando intentas cambiar el código
O sea, una variable a otro
Y ya está
A ver, os voy pasando el link
Que por si alguien se lo ha perdido
Vale
¿Ves?
La escritura de tipos
Puede ser opcional
Lo voy a hacer más grande y todo
¿Vale?
Puede ser opcional en TypeScript
Ya que la inferencia de tipos
Esto es lo más bonito de TypeScript
Y esto sí que sería una cosa genial
Que se pudiese activar en JavaScript
Y aquí os dejo
Lo que yo creo que ocurrirá en el futuro
Igual me equivoco, ¿eh?
Pero creo que en algún momento
Tenemos esto, ¿vale?
En JavaScript el useStrict
Que esto lo que te dice al final
Bueno, es así
Que esto al final lo que te dice
Es que tienes que utilizar
La forma estricta de JavaScript
El compilador en formato estricto
Que tiene más
Digamos que tiene como más checks y tal
Pues no me extrañaría
Que en algún momento tengamos algo así
UseTypes o lo que sea
Y que entonces tengas exactamente
Esta inferencia de tipos
Que tiene TypeScript
Pero la tengas en JavaScript
Yo no lo descarto
Yo ahí os dejo la idea
Ya veremos si lo pego
Y si no, ya me diréis
Vale
Pruébalo
Venga, vamos al sitio de prueba
Que dice que copiemos y peguemos este código
Que me imagino que nos va a enseñar
El tema este de la inferencia de tipos
Fíjate que cuando compila
Porque al final TypeScript lo que hace es compilar el código
A JavaScript
Y aquí estaría el código en JavaScript
Y ha añadido justamente arriba el useStrict
Vale
Aquí ya me está diciendo aquí
Se me queja de algo
Que dice que el parámetro x
Tiene un tipo como si fuese any
Bueno, esto más que un error
Sería como un warning
Si no soportas el any
Puede ser que te lo diga
Pero entiendo que la gracia aquí
Sería que si le cambian los tipos en algún momento
Aparece el mismo código
Claro, el código de la izquierda y el de la derecha
Es exactamente el mismo
O sea, no está haciendo ningún tipo de cambio
Y aquí, claro
Si le pasamos 3 y 6
No sé si al final
Si hiciésemos por ejemplo
Z
X más y un string
Bueno, pues yo veo aquí que esto se le ha quedado bien
No
Z y console.log
Pensaba que ahí no le iba a gustar
Pero ya veo que sí
A ver
Más Z
A ver
Pues no
Pensaba que a lo mejor se quejaría
Sabes, con la inferencia de datos y tal
Pero ya veo que no
Selecciona ejecutar
Ah, vale
Que hay que darle a ejecutar
No me digas eso
Que hay que darle a ejecutar
Run
Vale
No, esto es para el log
Vale
Selecciona pañar registros
Y observa que el valor 9
Se ha registrado en la consola
JavaScript ha asignado el tipo number
A los parámetros X y Y
La función ha devuelto el número
Reemplace el 3 por 3
Vale
Vamos a reemplazar
Vamos a quitar esto que había hecho yo aquí
Y vamos a reemplazar el 3
Por 3
Vale
Muy bien
Y ahora le damos a run otra vez
Bueno
Pero esto lo que veo ahora es que ha petado
O sea, ha petado
Que básicamente me está haciendo esto mal
JavaScript ahora asigna el tipo a string
Vale, perfecto
En el panel de TypeScript observa la línea rojas
Esto es lo del ENI que hemos visto antes
Que estaba asignándole
Claro, como no estamos diciendo nada
Pues aquí el parámetro dice que el tipo que tienes
Que puede ser cualquier tipo
Entonces, pues no sabe exactamente qué tipo es
Perfecto
Ahí, voy a cerrar esto
En el panel de las luces rojas
TypeScript ha asignado implícitamente un tipo ENI
La verdad es que, hombre
Me hubiera gustado que fuese un poco más inteligente
Le pongo aquí un 3
Yo esperaría que implícitamente dijese
Que esto sí va a ser un number
Actualice el código de TypeScript
Para especificar un tipo de cada parámetro
Vale
Pues le vamos a decir que la X
Para decirle qué tipo es
Se le ponen dos puntos
Y le vamos a decir que es un number
Y la Y, dos puntos
Le decimos que es otro number
Vale
Y esto lo podríamos ejecutar
Y ahora sí que tenemos aquí el 9
Vale
Así que ahora debe funcionar mejor
Ok
Ahora sí
Si yo le pongo aquí el 3
Entiendo como el string
Veis en el error
Ahora me dice
El argumento del tipo string
No es asignable al parámetro de tipo number
Bueno
Esto está bastante claro
Y de hecho aquí nos lo dice
Esto está muy bien
Vale
Actualizo el código
Y el error
Reemplace el 3 por un número
Vale
Esto ya lo hemos hecho
Justo lo que nos dice
Ya lo hemos hecho
Otras características de código de TypeScript
Que estas son las realmente interesantes
Interfaces
Espacios de nombre
Genéricos
Clases abstractas
Modificadores
Supongo que las veremos todas
De semana tras semana
Decoradores
Sobrecarga de funciones
Tipos de utilidad
Y read only
Para evitar
Volver a asignar una variable
O botar algo
Compatibilidad de TypeScript con JavaScript
TypeScript es un super conjunto estricto
De Xmascript 2015
O sea
Esto es algo a tener en cuenta
O sea
Es de Xmascript 2015
No de cualquier versión de JavaScript
Ni de las últimas
Claro
Si tu JavaScript está utilizando Babel
Que lo tengas en cuenta
Esto significa que todo el código JavaScript
Es también código TypeScript
Por lo que un programa escrito en TypeScript
Puede consumir JavaScript sin problemas
Vale
Los exploradores
Solo entienden JavaScript
Y por eso hay que compilarlo
Si no
Tú no puedes ejecutar
O evaluar TypeScript
En el navegador
No hay ninguna forma de hacer eso
Por desgracia
Si no
Si eso se pudiese hacer
Ya os digo yo
Que TypeScript sería más usado
Que lo que es ahora
Si ya se usa bastante
O sea que imagínate
Ya sabes usar TypeScript
O estás aprendiendo ahora
A ver
Sé usarlo un poco
Pero ahora aquí lo estoy haciendo
Desde cero
Y lo estoy haciendo
Lo estoy haciendo desde cero
Para que lo aprendamos y tal
Compilar o transpilar
Mira
Qué buena pregunta
Compilar o transpilar
A ver
Realmente
Realmente
Es compilar
Ok
O sea es compilar
En el sentido de que
Bueno no es una opinión mía
Sino que si miramos
TypeScript
Vamos a buscar
TypeScript
Vale
Vamos a buscar aquí
TypeScript
Y vamos a buscar
Su propia definición
No sé si pondrá por aquí
¿Ves?
TypeScript Code
Es transformado en JavaScript
Utilizando el compilador
De TypeScript
Vale
Compilador de TypeScript
O sea lo dice
La propia documentación
No es que yo
Diga TypeScript
Compilar o transpilar
Entonces
Si lo entendemos
Como transpilar
Pues entenderlo como transpilar
Si lo entendéis
Como compilar
Como compilar
¿Qué pasa?
Que compilar
Antiguamente
Quería decir más
Pasar el código
Más digamos
De alto nivel
Como puede ser C++
O lo que sea
A lenguaje máquina
Y a lo mejor
La definición se quedó en eso
Pero al final
Compilar
Lo que quiere decir
Es transformar el código
O sea que pueda ser capaz
De adaptar
Un código
Y convertirlo
A otra cosa
Si le queréis decir
Transpilar
Pues transpilar
Que al final
Es lo mismo
Pero ya os digo
Que la definición
Que hace Babel
Babel mismo
Si vais a Babel
También habla de compilador
No de transpilador
¿Vale?
Compilador
Compiler
Es un compilador
Así que yo creo
Que cualquiera de las dos
La podéis utilizar sin problemas
Como veáis
Es mucha gente
Mucha gente
Dice que transpilar
Sería más bien
Cuando es
Es que al final
Debería ser lo mismo
Pero bueno
Cuando es
De un lenguaje
Del mismo lenguaje
O sea
Como lo que hace Babel
¿No?
En lugar de ser
Lenguaje máquina
Bueno
No voy a entrar
En esos debates
Estériles
Estériles
Vale
Selección de un editor
Bueno ya hemos dicho
Que es Visual Studio Code
Si no lo tenéis
Pues instaladlo
Vamos a lo siguiente
Instalación del compilador
Esto sí que es importante
El editor de código
Podría tener compatibilidad
Que como es Visual Studio Code
Puede instalar
TypeScript globalmente
O localmente
En este ejercicio
Instalará TypeScript globalmente
Lo cual a mí
Ya no me gusta
Pero bueno
¿Por qué no me gusta?
Porque realmente
Pues cada proyecto
Es un mundo
Y por qué tengo que tenerlo
De forma global
Pero bueno
Lo vamos a dejar
Vamos a seguir sus pasos
Para instalar de forma global
Ya tenéis que tener
Node
Y tenéis que tener
NPM
Pero no vamos a entrar
En ello
Porque entiendo
Que ya lo tendréis
Así que
Vale
Lo instalamos
De forma global
Así con
NPM install
Menos g
TypeScript
Y escriba tsc
Para confirmar
Que TypeScript
Está instalado
Venga
Pues sí
Está instalado
Vamos a ver
Cuál es la versión
4.2.4
Vamos a la siguiente
Vamos a compilar
Un archivo
TypeScript es un
Supra conjunto
Sí
Cuántas veces me lo va a recordar
Que es un Supra conjunto
Que ya sé
Que es un Supra conjunto
Bueno
Me lo dice
Porque vamos a escribir
Entiendo primero
JavaScript
Esto significa
Todo el código de JavaScript
Es también código TypeScript
Pero
No todo el código TypeScript
Es JavaScript
Y es porque TypeScript
Agrega sintaxis nueva
A JavaScript
Esto es importante
¿Vale?
O sea
Una vez que escribáis TypeScript
Y hagáis algo
Que solo hace TypeScript
Hay que tener cuidado
Porque
Lo
Necesitaréis ya
El transpilador
O compilador
Bien
Aquí dice
Por esta razón
TypeScript requiere un paso
De compilación
Y pone transpilador
Fíjate
O sea
Compilación
Pero habla luego transpilador
Justamente para que
La gente que
Que no se queje
Para transformarlo en JavaScript
Para que la aplicación funcione
¿Vale?
Dice
TypeScript
Utiliza el compilador de TypeScript
O un transpilador
Compatible con TypeScript
Como Babel
SWC
O
Sucrase
Pues ahora también está
Sbuild
Sbuild también
Compila TypeScript
Si
Si
No
Iba a decir
Si no me equivoco
Pero estoy bastante
Bastante seguro
Bastante seguro
Uy mira
Por cierto
Fíjate
Está mi vídeo aquí
He puesto Sbuild
Y lo primero que sale aquí
En mi vídeo
Madre mía
Que bonito
Compilación de un archivo
De TypeScript
Venga
Para ejecutar el compilador
De TypeScript
En el símbolo sistema
Usa el comando TSC
Vale
Ya he visto el TSC
Cuando ejecute TSC
Sin parámetros
Compilará todos los archivos TS
De la carpeta actual
Vale
Y generas un archivo
JavaScript
También puedes compilar
No sé qué
No sé cuánto
Por ejemplo
Para compilar un archivo
TypeScript
O sea
Vamos a empezar aquí
Aprendiendo
TypeScript
Aprendiendo
Que se me ha olvidado esto
TypeScript
Venga
Yo entro aquí
Vamos a ver
Si funciona
CD aprendiendo
Ahora sí
Aquí
Vamos a sacar aquí
Nuestro
First.ts
Y aquí
Vamos a decirle
Que tenemos una función
Suma
Con A
B
Vale
A más B
Mirad
Fíjate que
Es genial
El editor este
Claro
Visual Studio Code
Utiliza TypeScript
Y ya entonces
Tienes los errores
Aquí directamente
Que te los dice
Si yo ahora ejecuto TSC
Vale
Pues ya
No he ejecutado
Absolutamente nada
Pensaba que decía
Que si ejecutabas TSC
Es opcional
Escribir la extensión
Del archivo
Vale
Genera un archivo
Si no hay ningún error
Puede comprar un archivo
Por ejemplo
Para comprar un archivo
Denominado tal
Ah vale
O sea que
Pero decía aquí
Cuando ejecute TSC
Sin parámetros adicionales
Compilará todos los archivos TS
En la carpeta actual
Y generará un archivo JS
Para cada uno
Pero eso es mentira
Porque justamente
Lo que acabo de ejecutar
Y lo que me está diciendo
Es
Oye
Que no me estás indicando nada
O sea que
Nos están engañando ya
Ya este curso
Nos está engañando
He tenido que poner
TSC
Y el nombre del fichero
Y ahora si
Tengo aquí
Mi archivo JS
Que al final
Ahora mismo
Es exactamente el mismo
Pero bueno
Vamos
Vamos para adelante
Las opciones del compilador
Te permiten controlar
Cómo se genera
El código JavaScript
A partir del código de TypeScript
Hay diferentes formas de hacerlo
Encontrarás una lista completa
De opciones
En la documentación
De las interfaces
De línea
Esto básicamente es lo que hemos
Oye pero ves
Esto
Porque a mí no me funciona
Yo cuando he ejecutado TSC
No me ha hecho
Cuando hago TSC
Me aparecen todas las opciones
Como
Como diciéndome
Oye
Necesito algo
Para funcionar
En cambio aquí dicen
Ejecutar el compilador
Entiendo que
Hay que tener el archivo
TSC
TSC
Confi.json
Para que esto funcione
Sin parámetros
Yo creo
Si no hay que hacer este
Vale
Esto sería para una carpeta entera
Esto
Referenciando el proyecto
Con
A partir del TSC
TSC
Config
Para emitir también
Las declaraciones
Esto lo veremos más adelante
Que es este
D.ts
O sea que por ahora
Nos podemos olvidar
Vale
Aquí están todas las opciones
Pero bueno
No las vamos a mirar por ahora
Porque entiendo que el curso
Nos irá llevando una a una
Sin necesidad de preocuparnos
Por ahora
Aquí ya nos dice
Algunas más comunes
No implicit any
No emit on error
Y target
La opción no implicit any
Indica al compilador
Que genere errores
En expresiones y declaraciones
Con un tipo any
O sea
Que si yo por ejemplo
Ahora aquí
En esta que habíamos puesto
Porque yo aquí en el editor
Este dice parameter a
Y este lo que me está diciendo
Es que tiene el tipo any
Si yo ejecuto este TSC
Como lo hemos puesto aquí
TSC first
Y le digo
No implicit any
A ver que dice esto
¿Ves?
Me peta
Me dice
No, no, no
Es que claro
Es parámetro a
Implícitamente
Tiene el tipo any
Porque no me has dicho el tipo
Esto sería una forma
De ser bastante más estricto
Vale
La opción target
Sería para decirle
Cuál es la versión
De ECMAScript
Que vas a soportar
En este ejemplo
Se compila un archivo
Javascript
Compatible con
EnMascript 6
Vale
Pone que más adelante
Vamos a ver más opciones
Configuración de un proyecto
TypeScript
Venga
Configuración de un proyecto
TypeScript
En Visual Studio Code
Bueno
Esto yo ya he abierto esto
Crear un proyecto
Nada
Ya he creado el proyecto
Ya tengo esto
A mí me dice
Pues mira
Justamente me dice
Que cree un archivo aquí
Que se llame
Module 01
Pues eso vamos a hacer
Venga
Voy a quitar el que tenía
Voy a dejar esto vacío
Y así seguimos ya el curso
Module 01
Y presiona entrar
Generación de un archivo
TSConfig
¿Ves?
Esto es lo que me tenía
Que haber dicho antes
Si quería que funcionase
En lo de ejecutar
Puedes usar la opción
Init del compilador
De TypeScript
Para generar un archivo
TSConfig
Con acciones preterminadas
Vale
Me parece bien
Hagamos eso
Vamos a la terminal
Y vamos a hacer
El tsc
Guión guión
Init
Que nos va a crear
El archivo
TSConfig
Punto JSON
De nuestro proyecto
Vamos a ver
Que nos ha dejado por aquí
Ostras
Nos ha dejado un montón de cosas
A ver que tal
Compiler Options
Esto
Esto sería para la
Compilación incremental
El target
Por ahora es 5
Vamos a poner
Es 2015
Porque es 5
Sería más para
Internet Explorer 11
Y tampoco me parece tan
O sea
No vamos a hacer un código
Que sea para eso
Y seguro que va un poquito
Más rápido
¿Vale?
Porque cuando tú compilas
Para lo que serían
Navegadores más antiguos
La compilación
Tiene que hacer más cambios
Así que cuanto más
Peor
Así que vamos a hacer eso
Módulo
Common GS
Esto es el tipo de módulos
Que utiliza
El Common GS
Sería como el de Node
Que sería con los requires
El S2015
O S2020
O Snex
Me imagino que estos
Serían con el import
Y el export
¿Vale?
Por lo demás
Veo que está todo comentado
Vamos a mirar solo
Los que no están comentados
Skip Lip Check
Que supongo que no hace
El chequeo
De los
Los archivos de declaración
Esto lo veremos más adelante
Y force consistent
Oh
Esto es muy bueno
Esto
Esto es una opción muy buena
Esto
Básicamente
Es para tener siempre
Referidos los archivos
De la misma forma
En lugar de hacer
Por ejemplo
Módulo 01
Módulo 01
Claro
Esto
Puede dar problemas
De hecho
En el bootcamp
Tuvimos problemas
Sobre esto
Por si te interesa
Bueno
Lo importante
Es que ya tenemos
Nuestro tscconfig
Vamos a continuar
Con nuestra
Con esto
¿Vale?
Y que estás en
Dale a Smodule
¿No?
S2015 y Common GS
Ya que estás en S2015
Dale a Smodule
Dice Jorge Casar
Claro
Pero hay que diferenciar
Una cosa aquí
¿Vale?
Imagínate
Que el proyecto este
Lo vamos a utilizar
En Node
¿No?
Y pongamos que lo hacemos
En Node 12
Entonces
Una cosa es
El javascript
Al que te lo compila
Del
Async Await
Por ejemplo
Que te lo deje
Con la versión
De S2015
Que sí que sea
Compatible con los navegadores
Y otra cosa es
Como te utiliza
Los módulos
En este caso
Como no voy a controlar
Muy bien
Los ejercicios
Que nos pueden poner
Pues lo voy a dejar así
Luego ya veremos
Bueno
De hecho mira
Aquí decía
De cambiar
Lades 2015
Pues eso
Como no controlo muy bien
Que me voy a poner
Los ejercicios
Por ahora
Lo voy a dejar así
Y ya veremos
Si más adelante
Lo puedo cambiar
Mejor
Porque yo soy súper amante
De los Mascade Modules
Pero por si acaso
No la vamos a liar
Vale
La de destino
La cámbiala por
Es 2015
Eso lo hemos hecho
Actualiza el archivo
Para que el compilador
Guarde todos los archivos
De javascript
En una nueva carpeta
Vale
O sea que
Buscamos la opción
Outdir
Que es como decirle
Donde tiene que salir
Aquí
Outdir
Y dice que lo dejemos
En
Establezca el parámetro
En build
Aquí pone que lo dejemos así
En build
No sé si esto
Funcionará
Voy a probarlo
Tsc
Y a ver si me ha hecho
La carpeta build
Sí
Vale
Pues ahí lo teníamos
Ahí ya lo tenemos
Vale
En el símbolo del sistema
Escriba Tsc
Que es lo que acabo de hacer
Yo que voy un poquito adelantado
Veo el paso
Y ya me lo salto
Compilación de
TypeScript en javascript
Vamos a agregar
Código javascript
Al archivo
TypeScript
Y luego a compilarlo
Copio y pegue
El siguiente código javascript
En el editor
Module
01.ts
Vale
Venga
Lo copiamos así
Esto básicamente
Es justamente
Lo que había hecho antes
Pero bueno
Tengan en cuenta
Que todavía no ha compilado
El código
Vale
No hemos hecho nada todavía
Pero
Ya nos está diciendo
Justamente esto
¿No?
Parameter x
Que tiene implícito
El any
Me resulta curioso
Que ya te lo hice
Como un error
O sea que
Está mal visto
Bueno
Tiene sentido
Que esté mal visto
Obviamente
Pero que me sorprende
Que de primeras
Ya es bastante
Estricto
Bueno
Tiene sentido
Actualice el código
Y lo reemplazamos
Por number
¿Vale?
Hacemos que esto sea
El number
Que esto es básicamente
Lo mismo que hemos hecho antes
Pero bueno
Ahora ya se ha ido el error
Y ahora funciona bien
Venga
Guarda el archivo
Y ahora vamos a compilarlo
Pues lo compilamos
Con tsc
Y a ver como nos ha dejado
Javascript
¿Vale?
Nos lo ha dejado limpio
Y aquí lo tenemos
Sin ningún tipo de error
La gracia de esto
Es que ahora que ya tenemos
Los tipos
Obviamente
Pues ya lo que hemos visto antes
¿No?
Que si pongo three
Pues me dice aquí
Esto
Has puesto
El argumento
Es un string
Y no es asignable
Al parámetro
Que tú has dicho
Que era un number
Vale
Perfecto
Vamos avanzando
Para cargar el archivo
De configuración
Y compilar todos los archivos
Ejecute tsc
Sin ningún nombre de archivos
Esto lo hemos visto antes
Abre el archivo
Módulo 01
Y luego seleccione
El botón
Dividir editor
¿Vale?
Que son idénticos
Con la única diferencia
Bueno
Esto básicamente
Lo que quiere
Es que miremos
Que son parecidos
¿Vale?
Que este es el TypeScript
Y este es el de Javascript
Voy a cerrar esto
Y que veamos
Que son casi idénticos
Excepto los tipos
Vamos
Que lo ha compilado
Vale
Perfecto
Adiciendo un archivo
HTML
Ajá
Escribe el nombre
Del archivo
Módulo 01
Venga
Vamos con el módulo 01
No sé para qué
Es esto el módulo 01
Como si fuese un HTML
Pero vamos a fiarnos
Vale
Voy a abrirlo bien
Quiere que creemos un HTML
Pues creamos un HTML
Vale
Y en el HTML
Dice que carguemos justamente
El módulo 01
Venga
Pues vamos a copiarnos
Todo el body este
Esto lo ponemos por aquí
Test Javascript
Blablabla
Bueno
Esto está siendo
Esto es demasiado básico
¿No?
Pero es para que veas
Que realmente
Funciona y ya está
A ver
Ahora dice que abramos
El módulo 01
HTML
Esta página
Llama al 01
JS
Y está usada
Para testear
Vale
Perfecto
Muy bien
Vamos
Que puedes utilizar
El Javascript
Que estás compilando
Muy bien
Activas herramientas
Desarrollo
Y ya estás listo
Para la codificación
En TypeScript
Muy bien
Para descargar
El área de trabajo
Completa
Aviso a Studio Code
Del repositorio de GitHub
Para ejecutar
La solución
Primero de instalar
El software siguiente
Solución del ejercicio
Esto quiere decir
El ejercicio
Que hemos hecho
Nosotros ahora
Vale
Pues ya está
Si ya lo hemos hecho
¿No?
O sea
No tiene sentido
Que no lo volvamos
A descargar
O es que tiene
Más cosas aquí
No
Bueno
Han cambiado esto
Un poco
Pero ya está
Prueba de conocimientos
Bueno
Empezamos ya
Con un examen
A ver
Me tenéis que ayudar
A esto
Me tenéis que ayudar
¿Lo del error
Es por tu linter?
No
Sí, no
O sea
El error
Que aparece
En esa línea
Es por mi linter
Este error
Que veis aquí
Bueno
Ahora no
No aparece el error
Vamos a hacer
Que aparezca otra vez
El hecho que salga
Aquí en el editor
Esto es por
Es por una extensión
Que tengo
Que se llama
Error Lens
Pero
El que exista este error
Es porque
TypeScript ya está instalado
En Visual Studio Code
Ya está aquí
¿Vale?
Entonces no tienes que hacer nada más
Ya viene instalado y tal
Vale
¿Qué más?
¿Qué más me cuentáis?
Note 12 soporta S-Module
Lo sé Jorge
Note 12
Y de hecho tengo
Note 14 y todo
Pero ya te digo
Que no lo hago por un tema
Si es más que nada
Por si yo que sé
En algún momento me dice
Copia este archivo
Mil cosas
No es porque no se pueda
Es por eso
Más que nada
¿Qué tipo de letra utilizas?
Cascadia Code
Tengo un libro
Tengo un vídeo
En YouTube
Que hablo de tipografías
Por si os interesa
¿Cuál es la relación
Entre TypeScript y JavaScript?
TypeScript es un
Supra conjunto
De JavaScript
Por si no me ha quedado claro
No es exactamente lo mismo
Usar JavaScript
Y no es un subconjunto
Es un supra conjunto
Me encanta
Supra conjunto
¿Por qué es necesario
Compilar o transpilar
Código de TypeScript
En JavaScript
Antes de usarlo?
No hace falta hacerlo
El código de TypeScript
Se conseguirá
JavaScript válido
TypeScript incluye
Características de código
Que no son compatibles
Con los exploradores
Efectivamente
¿Qué hace el comando
MPM install
Menos g TypeScript?
Pues ocupar un montón
De megas
De mi disco duro
Instala MPM
Para que se pueda
No
Instala compilador de TypeScript
Globalmente en el equipo
Eso es lo que hace
Bravo
400 puntos de experiencia
Todavía no he subido
De nivel
Vale
Resumen
Muy bien
Desbloquear logros
Se pueden desbloquear logros
Fíjate
¿Qué tal lo estamos haciendo?
Bueno
No está mal
Bueno
Si los no le digo nada
Valinorja
Muchas gracias
Por suscribirte con Prime
Muchas gracias
Valinorja
Espero que te esté gustando
Este
El cursillo
Que estamos haciendo
De TypeScript
Venga
Declaración de tipos
De variable en TypeScript
Este ya parece un poquito
Más interesante
Que el anterior
JavaScript es un lenguaje
De tipos dinámico
Y esto lo que nos va a hacer
Con TypeScript
Es que deje de ser
De tipos dinámicos
Y que sean estáticos
Que eso es lo que queremos
¿Vale?
Pues vamos a ello
Vamos al inicio
Porque total
Requisitos
Los tenemos todos
Venga
Inicio
Objetivos
Ajá
El sistema
El sistema de tipos
Estáticos
De TypeScript
Te permite describir
La forma de un objeto
Proporcionando una mejor documentación
Y permitiendo que TypeScript
Valide el código
Y que funciona correctamente
Eso la verdad es que
Está muy bien
Sobre todo me gusta mucho
TypeScript para librerías
De terceros
Porque cuando las consumes
Es una delicia
Es lo mejor
La forma en que se forma un tipo
Se asocia a una entidad
De lenguaje
Depende del tipo de entidad
¿Vale?
Ya tengo instalado esto
Así que nos vamos a
Siguiente
Información general
De tipos en TypeScript
¿Vale?
La ventaja de TypeScript
Es que permite agregar
Tipos estáticos al código
Perfecto
Entonces
Declaración de variables
Let y const
Enmascript
Ahora tiene dos palabras claves
Que es let y const
Por si no lo sabéis
Para declarar variables
Ya no hay que utilizar var
Sino que siempre que podáis
Utilizar let y const
A no ser que necesitéis var
Por X motivo
Pero siempre que podáis
Utilizar let y const
Y os olvidáis de las vars
Aquí tenemos ya nuestro ejercicio
Puede asociar tipos
Con variables
Mediante anotaciones
De tipo explícitas
O la inferencia
De tipos implícita
Explícita es que
Se la dices tú
Implícita es que
TypeScript dice
Vale pues creo
Que es este tipo
Aunque se recomienda
Las anotaciones
De tipo explícitas
Son opcionales
En TypeScript
Esto es lo que dice
Claro
Es opcional
Pero claro
Es mucho más probable
Que tú aciertes
Que no a que sea
Implícitamente
Que crea el tipo que es
Aunque entiendo
Que te puede encontrar
Un montón de problemas
Sin que tú hagas nada
Vale
Vamos a meter
Estas declaraciones
En lugar de hacerlo
Aquí en el área de juegos
Esa que no me gusta mucho
Voy a poner aquí
Playground.ts
Vale
Y lo vamos a hacer aquí
Vale
Aquí tendríamos
Explícito
Diciéndole el tipo
Implícito
Porque ya declaras
Al declarar la variable
Y tú
Asociarle el número
Ya sabes que esto
Debe ser un number
TypeScript dice
Vale pues esto será un number
Claro
Sin iniciarla
Entiendo que debe ser
Más problemático
Y hasta que tú
No le asignas algo
Pues no
No debes saber
Qué tipo es
Vale
TypeScript ahora trata
La variable x
Como un número
Ta ta ta
Claro
Dice x
Es de tipo número
Claro
Si yo ahora aquí pongo
Hola
Pues obviamente
Esto me dice un error
Que el tipo de string
No es asignable
El tipo número
Aquí
Me imagino que pasara lo mismo
¿Veis?
Aunque yo aquí
No le he puesto
Que es del tipo número
Si le intento asignar
Un string
Claro me dice
Oye no
Es que
El tipo string
No es asignable
A número
Porque tú le habías asignado
A número
Pero aquí
Claro
Aquí no
No sé
La primera vez
No pasa nada
Y la segunda vez
Tampoco
Porque no ha podido
Inferir desde el principio
Cuál es el tipo
Que tenía
Claro
Esto es el que entiendo
Que puede ser un poco
Problemático
Porque aquí
Sí que
Te va a dar errores
Pero en este
No te lo va a dar
No es capaz
De inferir
Cuál es el tipo
¿Vale?
Ese sería el tema
Ese sería el tema
Eh
Vale
Muchas gracias
Por esos 100 bits
Muchas gracias
De Roller Shark
Te contesto ahora
Cuando termine
Esta página
¿Vale?
Vale
Esto más o menos
Es lo que os he explicado
Que es lo que hemos hecho
¿Veis?
Aquí explica
Lo de que
A la z
Que no tenía
Un valor
Desde el principio
¿Vale?
Que no ha podido
Inferir
Cuál era el tipo
Ha aceptado ambos valores
A ver
Dice que esto funciona
De la misma manera
Que en Javascript
Porque la variable z
Ahora puede aceptar
Cualquier valor
Que se le haya asignado
Tapscript ha inferido
Que z
Z es de tipo any
Claro
Infiere que el tipo
Es any
O sea
Solo infiere
Al principio
No una vez
Que tú le asignas
El valor
Pero dice
Dice
¿Por qué
Debería inferir
Los datos?
Mediante inferencia
De datos
¿O tienes alguna ventaja
De la comprobación
De tipos estáticos?
Claro
Porque tú imagínate
Que tú tienes
Un montón de código
Javascript
De esta forma
¿No?
Tienes un montón de
Así
Un montón de Javascript
Esto ya lo puedes pasar
Por Typescript
Y ver qué problemas
Puedes tener
De hecho es bastante interesante
Que tu Javascript
Sin ningún tipo de cambio
Te pueda llegar a inferir
Problemas que pueda tener
Tu código
Vale
Tipos y subtipos
En Typescript
Vale
¿Los tipos primitivos
Son exactamente los mismos
Que tenemos en Javascript?
No
Tenemos booleano
Número
String
Enumeración
Enumeración
Esto es un tipo primitivo
Que no existe en Javascript
O sea que esto es nuevo
Luego tendríamos
No válido
Que entiendo que esto
También es uno nuevo
O sea nuevo
Respecto a Javascript
No válido
Luego tendríamos
Tipos de objeto
Clase
Interfaz
Matriz
Y literales
La clase
Sí que sería parecida
A lo que sí que tenemos
En Javascript
Y tipo parámetros
Estos serían los tipos
Que tenemos en Typescript
Y luego tendríamos
Null
Y Undefined
Que fea ¿No?
Es esta imagen
Es súper rara esta imagen
Vale
Los tipos primitivos
Boolean
Number
String
Void
Null
Void
Void es el no válido
Null
Y Undefined
Junto con enumeración definida
Para usuarios tipo enum
La enum puede estar muy bien
Void existe únicamente
Para indicar la ausencia
De un valor
Como que no se devuelve
Ningún valor
O sea
Que está bien
Porque esto sería
Undefined
En Javascript
O sea que veremos esto
Cómo funciona
Vale
Y los objetos
Es los que hemos comentado
Perfecto
Así que la siguiente unidad
Es tipos primitivos
En Typescript
Pues ahora lo veremos
Y vamos a ver
Lo que quería
TheRollershark
Hola
¿Cuál crees que es la manera
Más eficaz
De procesar
Una gran cantidad de datos
Sin bloquear el thread principal?
He probado WebWorkers
Para generar un árbol
AVL
Pero tiene ciertas limitaciones
Y no se pueden devolver
Cosas de Destructive
Clone Algorithm
A ver
Es que claro
Te iba a decir WebWorkers
WebWorkers es lo mejor
Estoy pensando
WebWorker
Post Message
Surma
Surma o Jake
Es que a lo mejor
Una cosa que te puede venir bien
Es echarle un vistazo
A Comlink
Voy a enseñarlo
Por aquí
Comlink
Bueno aparte de este artículo
De Surma
Que es genial
Comlink
Es como una pequeña librería
Para utilizar WebWorkers
Y justamente
Google
Lo está utilizando
Para el proyecto este
Que era un juego
Bastante interesante
Y que iba bastante bien
Además
Este
Comlink
Lo que te permite
Es que puedas
Enviar
Todo tipo de datos
Bueno todo tipo de datos
Puedo tener algún tipo
De limitación
Pero no solo es tan
Tan limitado
Como lo que tenía antes
De que tenías que hacer
El Post Message
Y tal
Entonces yo le echaría
Si no le has echado un vistazo
Te recomiendo
Que le eches un vistazo
A este
Porque
Comlink
Ya te digo que Google
Lo está utilizando
En algunos de sus proyectos
De hecho no sé si
Squash
Lo están utilizando
Que es bastante
Podiente
Este
Squash
A la hora de optimizar imágenes
Y va muy bien
Así que
Échale un vistazo
Pero yo creo que
Esa es la mejor forma
¿Sabes?
Si tienes muchos datos
Lo mejor es WebWorkers
O sea
Sin ningún tipo de duda
No sé hasta qué punto
Se puede
¿Ves?
Aquí que es con
Adable listener y tal
Esto
Mira
Aprox
Este es el juego
Prox
Este es el juego
Que tiene WebWorkers
Y que va súper bien
En dispositivos antiguos
Y tal
Porque utilizan WebWorkers
Así que
Échale un vistazo a eso
Al Comlink
¿Ves?
Aquí te lo explica
Por qué
Utilizar un
Comlink
Te lo dejo por el chat
El link
Y nada
A ver si
Te ayuda de alguna forma
Porque ya te digo
Que ellos se encontraron
Justamente con este tipo
De problemas
De no poder enviar
Todo tipo de datos
A ver si
Esto te ayuda
¿Vale?
De Roller Shark
Ay
Qué bien
Qué bien estamos
Todo en Microsoft Learn
Es gratis
Creo
Creo que sí
Creo que sí
Mis viernes no sean iguales
Sin ver al Messi del front
En echar código
Qué grande
El curso es totalmente gratis
Lo paso por aquí
A ver dónde lo tengo
Dónde lo he dejado
¿Vale?
Compleación de aplicaciones
Os dejo otra vez el link
¿Vale?
Y os leo
Os leo
Os leo
Dice
Se declara como Eni
Claro
Eni es el mejor amigo
De todos
Hombre
O el peor enemigo
Es el mejor amigo
Porque se lo come todo
Con patatas
Pero el que se lo coma
Todo con patatas
Justamente puede ser negativo
¿Cómo se llama
Extensión de base
El cuero
Que se muestran los errores?
Se llama
Error Lens
Es la que
La que estoy utilizando
Error Lens
Void existe en JS
Sí está Cadogan
Void existe en JS
Pero no existe
Como tipo
Es diferente
Void
No es un tipo
En JS
Esa es la diferencia
Yo no digo que void
No exista en JS
De hecho
Lo que hace void
O sea
Se utiliza más como
No como tipo
Sino que sería
Una palabra
Que lo que hace
Es siempre devolver
Null o Undefined
O nada
¿Sabes?
O sea
Tú puedes utilizar void
Y poner lo que sea
Y lo que te hace
Es convertirlo
No sé si es en null
O Undefined
Ah no me acuerdo
Lo podemos mirar en un momento
Void 1
Y lo que hace es
Void 1
¿Ves?
Te devuelve Undefined
Void 2
Pues eso
Pero no es un tipo
Es diferente
Por eso digo que no estaba en JavaScript
Recién está empezando el curso
Estoy empezando ahora
O sea que no os preocupéis
Estoy viciado a tus podcasts
Ojalá vuelvas a hacerlos
Muy pronto vamos a tener un par nuevos
Muchas gracias
Lo voy a probar
Otra opción sería con set timeouts
Pero me parece una guarrada
Es una guarrada
Si puedes utilizar web workers
Mejor
¿Debería tiparse todo?
Desde funciones, componentes, react
Variables, acciones, etcétera
Diablita
Buena pregunta
Diablita
Espero que no vengas desde el infierno
A preguntar
Pero lo que sí
Yo creo que
Hay que intentar
Esto es un problema
Que le veo a TypeScript
Y es el hype
En la que se lleva la gente
Hay que tener en cuenta
Yo TypeScript
Es una herramienta muy potente
Pero
¿Qué puede hacer?
Que aunque es verdad
Que desarrollas
Con más garantías
Puede hacer a veces
Que si empiezas a meterlo
En todos los sitios
En todos los sitios
Te vaya costando
Cada vez más
Mantenerlo
Te de muchos problemas
Y tal
Sobre todo en temas de RIA
Que he visto que
He visto en proyectos
De amigos míos
Me los enseñan
Los charlamos y tal
De que cuesta
Entonces la gente
Tira al final
Por el ENI y tal
Yo creo que hay que añadirlo
Donde te vaya a dar
Más valor
¿Sabes?
Donde el coste
Sea menor
Que la ventaja
Que te da
Y no ponerse a
A añadirlo
A saco
Y ya está
No sé cómo puedes tener
Un montón de Kindles
En la caja de atrás
Y no comértelos
Aquí no
Aquí están
Aquí están
Son solo
Modo de emergencia
Void casi no se usa
En TypeScript no lo sé
Me imagino que se usará más
Pero en JavaScript no
La función regresa un número
Pero se puede imponer
Que las funciones devuelvan
Un tipo de dato
Vale
Vale
Pues nada
Vamos a seguir
Vamos a seguir por ahí
Vamos a seguir
Vamos a seguir
Tipos primitivos en TypeScript
Tenemos el tipo booleano
Vale
Perfecto
True o false
Tipos numéricos
Esto ya lo tenemos
Mira
Tenemos vkint
Este es interesante
Vkint
Vkint
Este también existe en JavaScript
No es una cosa que sea solo de TypeScript
Y al final lo que te permite
Son enteros
Que de otra forma
No podría representar
Con el entero normal de JavaScript
Así que
Más o menos
Esto ya lo tenemos
El string por supuesto
Interesante
TypeScript también puede usar
Cadenas de plantillas
O sea
Vale
Que puedes utilizar
Template strings
Y que también es del tipo string
Sin ningún problema
Tipos void
Null y undefined
¿Lo ves?
JavaScript y TypeScript
Tienen dos valores primitivos
Que se usan para indicar
Un valor ausente
O con inicialización anulada
¿Vale?
El inicialización anulada
Es null
Y valor ausente es undefined
Lo digo porque
La han puesto al revés
Estos tipos son más útiles
En el contexto de las funciones
Por lo que se tratarán
Con más detalle
En el módulo posterior
Pero no hablan de void todavía
Bueno
Vamos con el ejercicio
De las enumeraciones
Que aquí ya entra un poco
La chicha
Aquí entra un poco
La chicha
De TypeScript
¿No?
Y este es uno de los tipos
Que a mí me gusta mucho
De TypeScript
Que ojalá tuviese JavaScript
Ojalá
El tipo de enumeración
Una incorporación útil
Al conjunto estándar
De tipos de datos
De JavaScript
Es el tipo de enumeración
O enum
Las enumeraciones
Al final lo que ofrecen
Es una manera sencilla
De trabajar con conjuntos
De constantes relacionadas
Imaginemos por ejemplo
Los días de la semana
Los días de la semana
Sería un enum
Porque son strings
Pero son limitados
¿No?
Monday, Thursday, Wednesday
Tal
Un elemento enum
Es un nombre simbólico
Para un conjunto de valores
Pues los días de la semana
Las enumeraciones
Se tratan como tipos de datos
Y se pueden usar
A fin de crear conjuntos
De constantes
Para su uso con variables
Y propiedades
Genial
Siempre que un procedimiento
Acepte un conjunto
Limitado de variables
Considera la posibilidad
De usar una enumeración
Es que esto es genial
De hecho
En JavaScript
Tú puedes hacer enums
Pero son
Son un poco más
De aquella manera
¿No?
O sea
Yo podría tener un enum
Que aquí pongas Monday
Y luego aquí
Pues le puedes poner cero
Luego Tuesday
¿No?
Y al final
Esto de alguna forma
Es un enum
Porque tú puedes hacer esto
.monday
Y sacar el weekday
Así
De alguna forma
Aquí
En este aspecto
Está funcionando
Como si fuese
Una enumeración
¿No?
Porque aquí tendrías
Enumerados todos los días
Y los podrías utilizar
De esa manera
Pero en TypeScript
Esto es mucho mejor
Porque al final
Aquí yo puedo hacer
Enums.whatever
Y esto no me lo está controlando
No me está controlando
Que weekday
Solo puede utilizar
Uno de los que añada aquí
Entonces eso ya lo tendrías
Que hacer en runtime
Así que vamos a seguir
Con los enums
A ver que se cuenta
Permite reducir los errores
Facilita el cambio
De valores en futuro
Facilita la lectura del código
Garantiza la compatibilidad
Con versiones posteriores
Vamos a crear
Nuestro primer enum
Venga
Crea un elemento enum
Para representar
Un nuestro escenario
Para ello escriba
Lo siguiente
Vale
Esto por ejemplo
Vamos a ponerlo aquí
Vamos a tener un enum
Y le llamamos
ContractStatus
Status
Voy a quitar esto
Claro
Un enum
Es muy interesante también
Para el estado
En el que se puede encontrar
Una cosa
Porque los estados
Que normalmente
Los puedes hacer
Como strings
O como números
O como ideas
O lo que sea
Con los enums
Es súper genial
Porque queda mucho más fácil
De leer
Un contractStatus
Puede ser permanente
Puede ser temporal
O puede ser
Que sea una beca
Vale
Estos son los estados
Que tendría el contractStatus
De esta forma
Ahora podemos declarar
Una variable
Que sería el estado
Que tiene un trabajador
EmployeeStatus
Y esto
Lo que le podemos decir
Es que solo puede ser
Una de estas tres
El permanent
El temp
O el apprentice
O sea que
El contractStatus
Le vamos a decir
Que es del tipo
ContractStatus
Esto es el tipo
De datos enum
Y le vamos a añadir
Uno de los valores
Claro si yo aquí
Pongo dos
Pues ya me va a decir
Uy
Me debería decir
Que esto no funciona
Pero ya veo
Que se lo ha comido
Con patatas
A ver
¿Por qué?
ContractStatus
Lo he puesto bien
¿No?
ContractStatus
Sí
Ah pues
Ah
Claro
Qué interesante
Qué interesante esto
Claro
Es que el dos
Al final
Aunque es un número
Hostia pero yo
Esto no me lo esperaba
Claro esto a lo mejor
Lo que hace
Es que sea uno
De los que ves aquí
Esto puede ser
Bastante curioso
Pensaba
Que claro
Puede ser 0, 1, 2
Puede ser apprentice
Si me pones 5
Bueno igual se lo traga igual
Pero pensaba
Que a lo mejor
Esto fallaría
En cualquier caso
La forma correcta
Sería decir
ContractStatus
Punto
Además fíjate
Lo bien que aparecen aquí
Apprentice
Permant
Y temp
O sea
Ya te sale un auto
Completado para saber
Cuáles son los estados
Que puedes aceptar
Pues vamos a decir
Que está en temporal
Por ahora ¿No?
Y luego bueno
Por si ponemos un console.log
Del employee status
Voy a hacer esto en run.js
Porque run.js
Creo que tiene soporte
Para TypeScript
Vale
Ahí está
Mira
Esto es run.js
Run.js es otro editor
Lo que te permite
Ejecutar al vuelo
JavaScript y TypeScript
Y aquí a la derecha
Pues tienes la consola
He añadido aquí
TypeScript
He puesto el enum
Y entonces aquí decimos
ContractStatus
Le decimos
ContractStatus.tem
Fíjate que esto es 0, 1
¿No?
Esto sería el 0
Esto sería el 1
Y esto sería el 2
Entonces
Cuando hago el console.log
Del employee status
Como le he dicho
Que es el .temp
Fíjate que me pone el 1
Claro
Si yo le pongo aquí
Whatever
No sé
Serán define
Claro
Pero
Si vamos aquí
Ves que aquí
Sí que me falla
Me dice
Oye que la propiedad
Whatever
No existe en el tipo
O sea que esto te ayudaría
El problema de run.js
Es que puedes ejecutar TypeScript
Pero no te hace el check
De TypeScript
Pero bueno
Por eso
Cuando yo ponía aquí el 2
Directamente
Como esto es un enum
Que al final
Lo que está
Como transformando
Es a números
Claro
Cuando digo el 2
En realidad es como si estuviera
Haciendo contractStatus
Apprentice
Pero no es la forma correcta
De utilizar esto
La forma correcta
Sería hacer así
¿No?
Punto.tem
Por ejemplo
Y esto sería un 1
Ahora
Esta sería la forma correcta
Ahí está
Es tan genial
O sea los enums
Me parece
Lo mejor que tiene
Sin ningún tipo de duda
TypeScript
En el sentido de
Que es lo primero que aprendes
Y lo que te da un montón
De potencia
¿Sabes?
A tu código
De hecho
Proposal
JavaScript
Yo creo
Que había una proposal
Esta de hace 3 años
Hacía 3 años
Pero veis
Había una proposal
Para añadir esto
En JavaScript
Y yo creo que
Mira aquí
Días de la semana
Es que este ejemplo
De días de la semana
Es muy muy muy típico
Muy típico
Claro
El tema
Es que
Es muy útil
Es demasiado útil
Yo creo que eventualmente
A ver
Enum
Proposal
A ver si está
Enumeration
No
Proposal for the
Enum keyword
En algún momento
Yo creo que
Lo añadirán
Porque
Es que
Es demasiado útil
Y no tiene sentido
Que esto
No se pueda hacer
En lenguaje
De forma nativa
Sin necesitar
TypeScript
Porque
Es verdad
Que es un tema
De
Sí que es verdad
Que es un tema
De tipos
Pero esto
Imagínate
En JavaScript
Podríamos utilizar
Podríamos utilizarlo
También así
Esto debería ser
Posible
Hacer también
Sin necesidad
De TypeScript
Sensebeu
Muchas gracias
Por suscribirte
Sensebeu
Espero que
Sí que tengas
Sí que tengas
Voz
Y que estés
Mucho mejor
Los haters
Dirían que
En Java
Existe hace años
Sí no
En Java
Existen un montón
De cosas
Claro
Pero bueno
Java no se puede
Ejecutar de forma
Nativa en el navegador
Y JavaScript
Y a ver
Es que
Las comparaciones
Esas son un poco
A ver
JavaScript juega
Con una desventaja
Enorme
Respecto a un montón
De lenguajes
De programación
Porque tiene que ser
Totalmente
Retrocompatible
Con todas las versiones
Anteriores
Y entonces
Su evolución
Puede ser un poco
Más costosa
Que otros lenguajes
Que dices
Ahora compilo
Con la versión A
Otro con la 2
Otro con la 14
O sea es diferente
Por eso
Juega un poco
De desventaja
Venga
Vamos a seguir
Con el tema este
A ver
Que más
Voy a poner
Musiquita
Vale
Ahora dice
Esto ya lo he ejecutado
Dice
De forma predeterminada
Los valores en um
Comienzan con un valor 0
Esto lo hemos visto
¿Vale?
Por lo que
Perman es 0
Temp es 1
Esto justo os he puesto
Aquí el comentario
Para que lo veáis
Esto es 0
Esto es 1
Y esto es 2
Perfecto
Pero
Parece ser que tú
Si quieres
Puedes añadirle
Que empiece
A partir de otro valor
Si quieres que los valores
Empiecen con un valor diferente
Lo tienes que especificar
En la declaración
Realiza esto
O sea que ahora aquí
Yo le puedo decir
Que el perman es 1
Y ahora será 1
2
3
Empezará a partir del 1
Tú le puedes decir
El número por el que empieza
Esto es muy útil
Parece una tontería
Esto
Pero esto puede ser muy útil
Por diferentes razones
Una de ellas
Es que hay veces
Que en las APIs
En las bases de datos
O lo que sea
Por ejemplo
En mi empresa
Tenemos property
Property types
¿Vale?
Property types
Property types
Por property
Entendemos una propiedad
Puede ser una casa
Un garaje
Un lo que sea
¿No?
Entonces el tema
Es que para nosotros
Empezamos a partir
Del número 99
¿Por qué?
No lo sé
No tengo ni idea
Pero la house
Empieza por la 99
El garage
Empieza en la 100
Entonces
Es genial
Porque esto
Nos permitiría
Ya directamente
Pues hacer esto
¿No?
Y ya lo tendríamos
Lo tendríamos así
Ya genial
Así que
Está bien saberlo
Ahora vuelvo a ejecutar
Y bueno
Sí
Veríamos que ahora
Sería 2
O sea
Este código
Si yo ahora
Lo ejecuto aquí en
Ranges
Veremos que esto
Ahora debería ser un 2
¿Vale?
Perfecto
Porque empezamos el 1
Le he dicho temp
Y temp es 2
¿Y qué dice?
Para mostrar el nombre
Asociado a la enumeración
Podemos usar el indexador
Proporcionado
¿Vale?
O sea
Para el nombre asociado
Para el nombre asociado
Puedes hacer
Console.log
Contract
Status
Y le pasamos el employee
Status
O sea
Es el string
Fíjate que es
Cuando estábamos hablando
De esto
Es exactamente lo mismo
Que hemos hecho antes
¿No?
Que hemos hecho
Os he dicho
En javascript
Esto se puede hacer
Porque al final
Nada te impide
Hacer esto
¿Vale?
Y esto es exactamente
Lo mismo
Es la misma estructura
Esto funcionaría
Sin ningún tipo
De problema
Evidentemente
Perdiendo
El tema
De los tipos
No podríamos
Tener el tema
De tipado
Y tal
Pero esto
Podría funcionar
Lo podríamos hacer
Funcionar
Sin ningún problema
Pero
Está escribe
Más
Más interesante
Vale
Muy interesante
Los enums
Vamos a seguir
Va
A ver
Ya sabemos enums
¿Qué metemos ahora?
Any
Y unknown
Venga
Hay ocasiones
En las que vas a necesitar
Trabajar con valores
Que son desconocidos
En el momento de desarrollar
El código
O que son de un rango
Posible reducido
De tipos de valor
En ese caso
Puedes utilizar
Any
Y unknown
Ostras
Tengo curiosidad
Cual es la diferencia
Entre any y unknown
Así como usar la sección
De tipos
Y las restricciones
De tipos
Para mantener el control
Vale
Esto es
El any
Es cualquier tipo
Es un tipo
Que puede representar
Cualquier valor de javascript
Sin ninguna restricción
Es útil
Si esperas un valor
De una biblioteca de terceros
Entrada de usuario
Me imagino que APIs
Que no controles
Ya que el tipo
Any
Permite
Volver a asignar
Distintos tipos de valores
Claro
Tú empiezas
Si tienes el any
Que empieza con un string
Luego puede ser un número
Luego lo que sea
Tal y como se ha mencionado antes
El uso del tipo any
Permite migrar gradualmente
El código de javascript
Claro
Porque de esta forma
Podríamos hacer que al principio
Casi todo
Pudiese ser
Que sea
Claro
Any
En javascript
Y a partir de ahí
Tú
Ir añadiendo
Donde tú veas
El any
Decirá
No
Esto es un número
Entonces lo pones
Es una forma muy fácil
De hacer una migración gradual
Pasarlo todo a any
Y luego ya te buscarás la vida
Cuando se compila este ejemplo
No se produce un error
Porque está el any
Y con el any
Pues primero es un número
Luego es un boleano
Luego es un string
Todo ok
Ok
Ok
El tipo any
Opta por no recibir
La comprobación de tipos
Y le obliga
Y no le obliga
A realizar ninguna comprobación
Vale
O sea que no hace comprobaciones
El uso del tipo any
Permite llamar a lo siguiente
Bueno
Como lo hemos visto
El primero un número
Boleano
Luego un string
Las instrucciones siguientes
Generan errores
O comportamientos inesperados
En tiempo de ejecución
Importante
En tiempo de ejecución
Esto también es súper importante
Que no lo ha comentado el curso
Pero tiene que quedar
Esto muy
Muy claro
Las comprobaciones de tipos
Que hace TypeScript
Son solo en tiempo de compilación
De modo estático
O sea
En tiempo de ejecución
Ves que pone aquí
Comportamientos inesperados
En tiempo de ejecución
En tiempo de ejecución
No hace ningún tipo de check
Sobre los tipos
Vale
No te avisa
Y te dice
Oye hay un error
De este tipo
No
Ya ha pasado demasiado tarde
Ya no
No hace ningún tipo de
De chequeo
En ese sentido
Vale
Súper importante
Porque hay gente
Que cree que hace
Chequeo de tipos en runtime
Y no lo hace
Tiene sentido que no lo haga
Recuerde que toda la comodidad
De any
Se produce a costa
De perder seguridad
Vale
Genial
Me he quedado más tranquilo
Tipo unknown
Aunque es flexible
El tipo any
Puede producir errores inesperados
Para solucionar esto
TypeScript ha presentado
El tipo unknown
Unknown
Es similar al tipo any
En que cualquier valor
Se puede asignar
Al tipo unknown
Pero
No se puede acceder
A las propiedades
De un tipo unknown
Tampoco se puede llamar
Ni construir
Vale
Esta
Ahora entiendo la diferencia
Entonces
Vamos a
Vamos a verlo en código
Vamos a verlo en código aquí
Tenemos el random value
Que es del tipo unknown
Como podemos ver aquí
Yo lo puedo ir cambiando
De un número
A un booleano
A un string
Yo puedo hacer todo esto
Sin ningún problema
Pero
Entiendo
Que si intentas ir a
Random value
Punto name
Vale
Aquí tenemos
Que no se puede acceder
A una propiedad
De un random value
Aunque
Aunque tú hicieses esto
Aunque hicieses esto
Vale
¿Ves?
Aunque tú tengas asignado
A esta variable
Un objeto
Con una propiedad
Name
Fíjate que dice
El objeto
Que tú tienes aquí
Random value
Es unknown
Y por lo tanto
No puedes
No te deja acceder
Esto te petaría
Esto mismo
Pasaría con un método
Get name
Por ejemplo
Cualquier propiedad
O método
Al que intentes acceder
De random value
De random value
Te va a dar un error
Con el unknown
Si le ponemos any
Sí que va a funcionar
Pero si le ponemos unknown
No
Esa es la diferencia
Esa es la diferencia
Ah
Y tampoco se puede
O sea
En sí mismo
Tampoco se puede ejecutar
Claro
¿Por qué hacen esto?
Ahora voy entendiendo más
¿Por qué hacen esto?
Esto lo hacen
Porque justamente
Te está dando
Una cierta protección
En tiempo de ejecución
¿No?
Recuerda lo que acabo
De decir
Que estos chequeos
No los hacen
En tiempo de ejecución
Por lo tanto
TypeScript
Si tú le pones aquí un any
Pues esto se lo come
Con patatas
Y ya está
Pero lo que estás haciendo
Aquí con unknown
Es que estás como
Protegiéndote
De
Oye
Ya que no lo tienes claro
De qué tipo es
No pasa nada
Si tú vas haciendo esto
Y lo asignas
Le asignas un valor
No pasa nada
Pero
Como no tienes claro
Qué tipo es
No te voy a dejar
Que hagas esto
Ni que lo ejecutes
Ni que accedas
A una propiedad
Ni nada
Me imagino que tampoco
Podrías acceder a un
¿Ves?
No se puede acceder
A una posición
Porque este tipo de cosas
Pueden petar
Esto peta
O sea
Esto si no existe
Si random value
Es un boleano
Esto
Peta
Si random value
Es
Por ejemplo
Un boleano
Esto
Peta
Esto lo mismo
Peta
Y esto pues peta
¿Vale?
Entonces por eso lo hacen
Pero claro
En cambio esto
Este random value
Si es un string
Y tú haces
Random value
Más dos
Esto no peta
No queda bien
Pero no peta
Es diferente
Por eso
Ahí es donde está
La utilidad
No sé si ha quedado claro
Pero a mí me ha quedado
Bastante cristalino
La nota
Diferencia principal
Entre any
Y unknown
Es que no se puede interactuar
Con una variable
Del tipo unknown
Y si lo hace
Se genera un error
Del compilador
En cambio any
Puedes hacer todo lo que te dé la gana
Venga
Aserción de tipos
¿Qué es esto de la aserción de tipos?
Esto es que si necesitas tratar
Con una variable
Con un tipo de datos
Diferente
Puedes usar una aserción de tipos
Que
Esto lo que dice
A TypeScript
Es que has realizado
Cualquier comprobación especial
Que necesitas hacer
Antes de llamar a la instrucción
O sea
Lo que le estás diciendo
Básicamente
Al compilador
O transpilador
De TypeScript
Es
No te preocupes
Que yo sé lo que hago
Básicamente es esto
¿No?
Indica al compilador
Confía en mí
Sé lo que estoy haciendo
Vale
Perfecto
Una aserción de tipos
Es como una conversión de tipos
En otros lenguajes
Pero no realiza
Ninguna comprobación especial
Claro
¿Por qué?
¿Por qué es esto?
Cuando tenemos este random value
Esto de aquí
Lo que le vamos a decir es
Vale
No lo sé
En este punto
Cuando lo creo
No lo sé
Pero
Voy a editar esto
Lo que puedes hacer es
Random value
Como string
To uppercase
Y entonces ahora sí que funciona
Porque le estás diciendo
No, no
Confía
Que ahora yo sé
En este punto
Que el random value
Es un string
Y entonces
¿Qué hace TypeScript?
Y dice
Ah, vale
Si esto es un string
Entonces sí puedes llamar
Al to uppercase
Es como
Que antes de poder ejecutar
Porque si no
No te deja
O sea
Si tú haces esto
Esto no te deja
¿Ves?
Que sale aquí en rojo
Object type
Unknown
Entonces para que te deje
Tienes que decirle
Vale, random value
Trátalo como si fuese un string
Y entonces te dejo
Acceder al tu uppercase
¿Vale?
Así que eso sería
Básicamente la aserción
De tipos
Ah, mira
Hay dos tipos de hacerlo
Una con el as
Que es el que acabo de ver
Y otra sería así
O sea
Una sería así
Y la otra sería
Quitando esto
Y poniéndolo aquí
Me gusta un poco más
La otra
La otra, ¿no?
Bueno, aquí le falta un punto y coma
Que si no, no
Estas dos líneas son iguales
Es como para
Forzar
El tipo
Que tiene
En la variable
En este caso
¿Vale?
As es la sintaxis preferida
Sí, también la mía
También la mía
En el ejemplo siguiente
Se realiza la comprobación
Necesaria para determinar
Random value
Es un elemento string
Antes de usar
La aserción de tipos
Hmm
Vale
Vale
Vale
Vale
Entonces
Aparte de esto
Esto sería como para indicarle
Sin hacer
En tiempo de ejecución
La comprobación
Decirle
Vale, random value
Es un string
¿Vale?
Ah, pues te dejo
Ejecutar el tuerpercase
Pues hay otra forma más
De hacer esto
Y es decir
Utilizar el typeof
Si, claro
Si tú le dices
Si random value
Es del tipo string
Entonces
Voy a hacer
La ejecución
Por ejemplo
Tu lowercase
Y esto te deja
Pero fíjate
Que si esto lo pongo fuera
Igual me peta
¿Vale?
¿Ves?
¿Por qué?
Porque TypeScript
Está detectando
Que estás haciendo
Un chequeo
Del tipo de datos
De random value
Antes de ejecutar
El método
Tu local lowercase
O sea
Es como un control
¿No?
Si aquí
Dices
Aquí no sabes
Cuál es el tipo
Pues te va a decir
Que es un error
Entonces
En estas dos líneas anteriores
Le habíamos como forzado
A decirle
No, no
Yo sé que es un string
¿Vale?
Pues en este caso
Es un poco más allá
Porque este código
Sí que se va a ejecutar
En tiempo de ejecución
¿Vale?
Esto sí que se va a ejecutar
En tiempo de ejecución
De hecho
Si yo compilo esto
Lo voy a compilar
Lo voy a compilar
¿Vale?
Lo compilo
Y si vamos al
JavaScript Playground
¿Veis?
Que se ha quedado aquí
Este if
If
Typeof
Random value
No sé qué
O sea
Este código
Sí que se queda ahí
Pero este código
Que habíamos hecho antes
Si lo compilo
Fíjate
Que no hace ninguna comprobación
Ni nada
O sea
Es
Digamos que
Esto es
Para que el compilador
No te dé problemas
Y esto es para que
El código
Cuando lo ejecuta
El cliente
Tenga un mejor control
Y entonces
Cuando TypeScript
Detecta de
Ah vale
Genial
En este caso
Ya tienes
Ya tienes una comprobación
Vale
Pues entonces
Sí que lo puedes utilizar
Porque lo estás comprobando
En el código
Me parece genial
Me parece genial
Tienes que usar
Punto y coma
No
No tengo que usar
Punto y coma
Bueno
En este caso
Sí tengo que usar
Punto y coma
¿Por qué?
Porque tengo que usar
En este
Aquí punto y coma
Este es un
Es un ejemplo
Muy interesante
Aquí
Hay que utilizar
Punto y coma
Fíjate
Que dice
Esta expresión
No se puede llamar
Aquí hay que utilizar
Punto y coma
Porque
Como
Aquí tienes
Un paréntesis
Bueno aquí no
Como aquí empieza
Por paréntesis
Cuando no pones
Un punto y coma
JavaScript lo lee así
Se cree que
Es todo una línea
Entonces
Este es uno de los casos
En los que hay que poner
Punto y coma
Este es uno de los
Casos donde hay que poner
Punto y coma
Normalmente
Esto en el linter
Lo que pasa es que
No tenemos linter
Si tuviera un linter
Esto no lo hubiera detectado
Y hubiera puesto
Hasta el punto y coma
Solo
Normalmente se pone
Incluso aquí
¿Por qué?
Porque hay veces
Cuando no trabajas
Con puntos y comas
¿Ves?
Yo puedo ir quitando
Puntos y comas y tal
Aquí lo necesito también
Porque si no
Me fallaría el otro
Cuando no trabajas
Con puntos y comas
Y te sabes esta regla
Que esto te lo hace
Estándal
Automáticamente
O sea tú guardas
El fichero
No se queja
Sino que te pone
El punto y coma
Y ya está
Pues eso
Pero bueno
Por ahora lo vamos a poner
Al final
Para que quede más claro
Y no liaros
Porque al final
Lo importante es
Entender lo que está
Haciendo esto
A ver
¿Qué me comentáis?
Es que TypeScript
Son solo en los ID
Es que TypeScript
Solo en los ID
Ah vale
Me quedó más claro
Solo sirve en los ID
¿En los ID?
Ah no me he quedado
Es que solo en los ID
¿Qué significa eso?
No he entendido
Samugarrón
¿Qué quiere decir?
Hidratación
Me hidrato
Solo en Visual Studio
¿Qué hago con los 50.000 seguidores?
Hemos llegado a los 50.000 seguidores
No sé si lo he dicho
Pero hemos llegado a los 50.000 seguidores
No
Ya somos 50.000
¡Oh my god!
¡Oh my god!
¿Cómo esto sigue así?
Pues ya somos 50.000
2019 en YouTube
Muchas gracias a todos
¿Qué hacemos para celebrarlo?
¿Qué hacemos?
Hacemos
He pensado eso
En un clon de TikTok
En directo
En YouTube
Hasta donde lleguemos
He pensado
Dice TikTok
Con NextDS
Y TypeScript
O sea
Con TypeScript
Me costaría
Crear una startup
Para los 50.000
Me cago en la hecha
Qué difícil eso
¿Qué más podemos hacer?
Alguien había dicho
Un Amazon
Un YouTube
Me parecen buenas ideas
Montar todos los vídeos
De Twitch
Ya ves
A ver
En el canal secundario
Tengo
Una startup
Open source
Bueno a ver
Quiero
Quiero seguir
Con mi
Con mi proyecto
MeneaDev
Que lo seguiremos
En Twitch
Por supuesto
Una red social
Con tus seguidores
Bueno ahí tenemos Discord
Quiera que se apunte a Discord
Que ya somos 2500
En la comunidad de Discord
Así que nada
Apuntaos
Que ahí estaremos
Bueno si tenéis ideas
Las vais dejando por ahí
¿Vale?
Uy ¿Qué ha pasado aquí?
Hay un hueco aquí
Ha habido un hueco
Vale
Venga vamos a seguir
Ya sé que quizás
Ya lo dijiste
Pero ¿Qué te haría elegir
TypeScript
En un proyecto
En vez de
JavaScript?
Buena pregunta
Muy buena pregunta
Nuri
Muy buena pregunta
A ver
A ver
¿Qué es lo que me haría?
Por ejemplo
Si fuese una biblioteca
Que tuviese que consumir gente
¿Sabes?
Una biblioteca
Que tuviese que hacer
Seguramente intentaría
Añadirle TypeScript
Porque
Eso te hace
Tener una documentación
Muy potente
Otro sitio
Donde pondría
TypeScript
Justamente donde
Estuviera teniendo
Muchos problemas
Con los tipos
Otro sitio
Donde lo añadiría
Es
Donde tenga objetos
Que me hablen
Del negocio
Muy claramente
Por ejemplo
En un sitio
Donde estás
Constantemente hablando
De objetos
De tu dominio
Pues eso
Contract status
Ostras
Pues un contract status
Tener un enum
Es una maravilla
Cosas así
Donde puedas plasmar
Tu negocio
En la documentación
De los tipos
De TypeScript
Hombre pues es genial
Porque así
Todo el mundo
Habla el mismo idioma
Al final
Cuando alguien
Imagínate que tenemos
Un Facebook
Estamos haciendo un Facebook
Pues cuando alguien
Habla de un post
¿Vale?
Un post
Que sería el mensaje
Que alguien hace
Y que puede tener comentarios
Y puede tener likes
Y todo esto
Pues imagínate
Tener el tipo post
Y que ya tengas ahí
Todos los atributos
Que puede tener un post
Y cómo se dice likes
O cómo lo llamamos
Likes
Fabs
No sé qué
Bueno pues likes
Claro
Tenerlo todo documentado
Y que todo el mundo
Se tenga que referir
A lo mismo
Con el mismo contrato
Ahí también
Seguramente lo haría
Yo creo que ahí
Es donde seguramente
Lo metería
Pero tendría cuidado
También de no meterlo
En
No sé
Meterlo por meter
Ahí sin ningún tipo
De control
Porque al final
Puede ser
Un poco
Problemático
En herramientas de Node
Seguramente
Seguramente seguro
Que lo metería
Todos los vídeos live
De Twitch
Serán montados
En Midulife
En Midulife
Te entran en Twitch
Directamente
Ah en Midulife
Te refieres en Youtube
En Youtube
Tengo el Midulife
Es mi canal secundario
Que ya somos 1210
Bueno voy subiendo algunos
Y sí que voy a intentar
Subir el resto
Voy a intentar
A ver si este fin de semana
Me da tiempo
React Native
Lo veremos pronto
Algo de Machine Learning
Con JavaScript
Vale
Me lo apunto
Conseguirte un match
En Tinder
Amigo mío
Eso ya es cosa tuya
JSDoc
Te puedes olvidar
De TypeScript
JSDoc
Me gusta
También
Lo que pasa
Es que JSDoc
No es tan
Tan tan potente
Como TypeScript
Todavía tiene
Algunas limitaciones
Lo sé porque
Yo utilizo
Bastante JSDoc
Y si es verdad
Que es compatible
Gran parte
Con TypeScript
Por ejemplo
Para tipos así
Muy básicos
Y tal
Pero con clases
Y tal
Se queda
Se queda corto
Pero no me desagrada
Utilizar JSDoc
De hecho
Yo soy un amante
De intentar
Mantener JavaScript
Porque justamente
Es lo que va a durar
En los tiempos
O sea
Por eso digo
Que tengáis cuidado
De meter TypeScript
Porque al final
Si todo vuestro código
Está en TypeScript
Está en un lenguaje
Que no es ningún estándar
Y bueno
Tiene subventajas
Pero eso es una desventaja
Sobre todo porque
De repente
Vuestro código
Está
En un lenguaje
Reversionado
Que eso es lo que realmente
Es bastante peligroso
Vale
En cambio
En JavaScript
¿Cuáles son los casos
Donde usarías el punto y coma?
No lo usaría ninguno
No uso punto y coma
En JavaScript
No lo uso nunca
He visto que muchos
Usan Flow
¿Qué opino de Flow?
Opino que no lo aprendáis
No vale
No vale la pena
Flow
Para el que no lo conozca
Es la
Era
Yo creo que era
Si no está deprecado
Si no está deprecado
Lo estará pronto
Es de Facebook
Flow es como
Un TypeScript
Pero de
Vale no está deprecado
Vale
Todavía no
Flow es el
TypeScript
De Facebook
Pero
Hay algunos proyectos
Clave
De la propia Facebook
Que han dejado
De utilizar Flow
Entre ellos
Creo que
React.js
React.js
Si no me equivoco
Ha dejado de utilizar Flow
Así que
Y ha pasado
De utilizar
TypeScript
No sé
No le veo
Un futuro
O igual están
Intentando tener
Los dos
O lo que sea
Pero ya os digo
Que no le veo
Tanto movimiento
Como le veo
A TypeScript
Así que
Yo me enfocaría
En TypeScript
Totalmente
Vale
Vamos a
Seguir
Vamos a seguir
Vale
Vamos a seguir
Con tipos
Any unknown
Aserción de tipos
Esto lo hemos visto
Esto del TypeOf
Lo hemos visto
Para que sirve
Restricciones de tipos
Mira
Estos son los TypeOf
Que deberíamos hacer
Justamente
Para evitar
El tema
De hacer
Esta aserción
De tipos
Cuando haces un
If TypeOf
Y le dices
Este TypeOf
Que esto es de
JavaScript
El TypeOf
De este
Cuando el tipo
De esta variable
Es string
Entonces ejecuta esto
Esto lo puedes hacer
Con los strings
Con los números
Los booleanos
Undefined
Function
Y Array
Aunque con Array
Veis que no es
Con un TypeOf
Sino que es
Utilizando Array
Is Array
Importante
O sea
Aquí por ejemplo
Podríamos hacer
If Array
Is Array
Random Value
Entonces
Random Value
Te debería dejar
Acceder a la posición 2
Si esto lo ponemos aquí
No me deja
Vale
¿Ves?
Solo cuando una vez
Has hecho la comprobación
De que es un Array
Me parece muy bien
Que hayan hecho
Esta comprobación
Del Array
Porque
Esto no es con
TypeOf
Pero bueno
Siguiente unidad
Vamos
Tipos de unión
E intersección
En TypeScript
Lleva 1 hora y 18
Tenéis en el comando
¿Qué haces?
O Uptime
Uptime
Y te lo dice
Tipos de unión
E intersección
En TypeScript
TypeScript proporciona
Opciones más avanzadas
Para declarar tipos
Eso me gusta
Claro
Porque hay veces
Que una variable
Puede ser de un tipo
O de otro
Así que
¿Cómo se hace eso?
Esto puede ser útil
Cuando te has controlado
Un valor
La entrada de un usuario
Una API
Biblioteca
El tipo any
Claro
Está bien
Porque acepta
Diferentes tipos
Pero hay veces
Que quieres limitar
No quieres el any
Que son todos
O el unknown
Que dices
No lo sé
A veces puede ser
Que sepas
Que puede ser
Uno u otro
Así que
¿Para qué sería
El tipo unión?
Bueno
Pues justamente
Para esto
El tipo unión
Se utiliza
Con la barra vertical
Y lo que te permite
Es indicar
Más de un tipo
Que puede tener
Una variable
Por ejemplo
Vamos a quitar
Los random values
Que habíamos hecho aquí
Vamos a poner
Un multi type
Y vamos a decir
Que esto es el 20
¿No?
Pues aquí lo que le podemos decir
Es que esto es
Un number
O un string
Le podemos decir
Vale
Esto es un number
O un string
Así que el multi type
Ahora si le asigno
20
20
De esta forma
No se queja
En cambio
Si le ponemos aquí
Type
Le ponemos que esto es un number
Con el 20
Y luego el type
Es
20
Aquí sé que se quejaría
¿Vale?
Esto sería
El tipo de unión
Que puede ser
Más de una
Claro
Si le dices
Que es number
O bolean
Puedes decir
Que sea un number
Un bolean
Pero no puedes decirle
Que es un string
Porque tú le estás acotando
Esto mismo
Lo puedes hacer también
Otra vez
Entiendo con los type of
Con las restricciones de tipos
Puedes trabajar fácilmente
Con una variable de tipo unión
Pero claro
Como puede
Como esto puede ser
Amigo
Amigo
Como multi type
Puede ser number
O puede ser string
¿Qué pasa si yo hago
Multi type
Punto
To
Upper case
Claro
Porque si es number
Puede ser number
O string
No siempre podrá acceder
A los métodos
Del string
De hecho
Si quito esto
¿Qué pasa?
Claro
Detecta que lo último
Que he puesto
Es un string
Y entonces
Si que me permite
Pero si le quito
El string
Me dice
Ah no
Amigo
Es que tu upper case
No existe en el tipo
Number
Porque sabe
Porque sabe que ahora
La última vez
Es number
Claro
Eso puede estar bien
En este tipo de variables
Pero entiendo
Que como puedo ver aquí
Ves que tenemos una función
No sé qué
Y aquí hace un montón
De type of
Claro
Vamos a hacerlo
Con una función
Function
At
Y que tenga la x
Y la y
Y la x
Vamos a decir
Que es un número
Pero que la y
Puede ser un number
O un string
Entonces
Si haces
X más y
Ya me dice
Que el operador más
No puede ser aplicado
A los tipos
Número
Y string
Y número
O sea
Esto es raro
¿No?
Porque justamente
El operador más
Funcionaría
Sin ningún problema
Con números
Y strings
Pero
Claro
Aquí
TypeScript
Esta magia
No le está gustando
Está como diciendo
Ostras
Pero es que aquí
Me vas a liar
Me vas a liar
Claro
Entonces por ello
Bueno entiendo que además
Si pongo aquí
Que esto puede ser también
Un string
Ya se va a volver
Más loco todavía
El operador más
No puede ser aplicado
A los tipos
De string number
Y string number
¿Vale?
Esto es que el parámetro
X
Es un número
O un string
Y el y
Es un número
O un string
Entonces
Esto es lo mismo
De antes
Si el type of
De num
De x
Es number
Y
El type of
Type
Of
Y
Es number
Entonces
X
Y
Esto sí que funciona
Porque aquí
Se está asegurando
Que esta línea de código
Solo funciona
Cuando es de tipo
Number
La x
Y la y
Pero claro
Es un poco raro
A ver
Un poco raro
Lo que te está haciendo
Es que seas un poco más
Cuidadoso
A la hora de trabajar
Con este tipo
De datos
O sea
Si le dices que es string
Normalmente
Podrías hacer esto
Y esto funciona bien
Fíjate que el código
Es el mismo
Que teníamos antes
Solo que ahora
La comprobación
Sabe ahora con seguridad
Que aquí va a devolver
Un número
Y aquí va a devolver
Un string
En su ejemplo
Tiene este
El concat
Que el concat
Al final hace exactamente
Lo mismo
Y hombre
Queda más legible
De que sabes exactamente
Que es un string
En lugar de ver el más
Que visualmente
Puede ser un poco
Más chocante
Pero te tienes que asegurar
Una vez que tienes
Estos tipos
Bueno multitipos
Es como que tienes que ir
Haciendo comprobaciones
Si es un número
Puedes hacer esto
Si es un string
Puedes hacer esto
Y eso es básicamente
Lo que hace
Claro
Si al final
Lo que puedes hacer es
Si tienes estos tipos
Haces esto
Si haces esto
Y tal
Y si llegas hasta aquí
Pues puedes mandar un error
You
Voy a poner una barra
You are mixing types
LOL
Add
Add
1
3
Add
1
2
Add
1
2
Claro
Entonces vamos a ver
Que este devolverá 4
Este debería devolver 1
2
Y este
Es el error
Vamos a comprobarlo
Mmm
Claro
Fíjate
Esto es interesante
Fíjate que no me da un error
Como tal
De
Oye
Los tipos que pones
Están mal
Si yo aquí le pongo un true
Entonces sí que va a decir
Oye
El argumento que me estás pasando
No es asignable al parámetro
Pero claro
Esto
Esto es correcto
Esto es un poco lo que decía antes
Que tengas
Tener en cuenta
Que claro
Mientras tú le pases los tipos correctos
Esto funciona bien
Pero luego
En tiempo de ejecución
Tienes que controlar tú los errores
No
No te va a hacer
TypeScript magia
Ni nada
Entonces vamos a ejecutar esto
A run.js
Por aquí
Y a ver qué pasa
Vale
Ves
Me sale el error
No me salen los otros
Porque no he puesto un console.log
Pero si hago esto
En un console.log
Deberíamos ver
Deberíamos ver el resto
A ver
Pues no
No estoy viendo
No sé si es que el error
Me está rompiendo
Sí
Vale
Es por eso
Pero sí
Mira
A ver
Cuatro
One, two
Y cuando ejecuto el otro
Es claro
Porque el error
Sale en otro
En otro
En otro proceso
Sabes
Tenemos el stdout
Y tenemos el stderror
Son como dos salidas
Y entonces no las mezclas
Cuando veas un error
Pues solo te sale la del error
Vale
Pues ya sabemos aquí esto
Tipos de unión
Intersección
Vamos con la intersección
A ver
Que más
Decid por aquí
A ver
Que decís
Nombre a las variables
Y las funciones
A ver
Quien ha canjeado eso
Alguien ha canjeado
Lo de las variables
Y las funciones
Pero creo que no habéis puesto
Fuu
Vale
Ahora lo uso
Vale
A ver
Que me comentáis
Por aquí
Se pueden crear
Tipos de interfaz
Lo veremos más adelante
Type of
Alguien pregunta
Si esto funciona
Si
El hacer
Type of x
Si es igual
Al type of y
Entonces
A ver
Esto funcionar
Funciona
Lo que no funciona
Es que tú esto
Al ser
Al no ser
Estático
Vale
Esto es dinámico
Y por lo tanto
Tienes el mismo problema
Si tú dices
Si el tipo de x
Es igual que el tipo de y
Pero sabes que el tipo de x
Puede ser number o string
Pues ves
Aquí tienes el mismo problema
Te dice
Oye
El operador más
No puede ser aplicado
A string o number
Porque como no está diciendo
Exactamente cuál es
Lo que sí que puedes hacer
Es guardar
Por ejemplo
En una variable
El type of x
En lugar de hacerlo dos veces
Type of x
Hay que tener en cuenta
Que el type of
Al final
Esto lo que te devuelve
Es un string
Type of y
Type of y
Vale
Entonces
Lo que podemos hacer aquí
Es type of x
Esto se puede guardar
Una variable
Es number
Y type of y
Es number
Entonces alguien me preguntaba
Eh
Perdón
Esto
Hostia
Ahora
Así
Type of y
Y alguien me preguntaba
Hostia
Ah mira
Fíjate
Ni siquiera
Eh
Ni siquiera
Ni siquiera
Ni siquiera
Claro
Porque
Porque
Porque no funciona
Esto es súper interesante
Porque esto
Estamos
Estamos mezclando
Código
Estático
O sea
Comprobaciones
Estáticas
Que es lo que hace
Type script
Type script
No ejecuta
Nuestro código
No lo ejecuta
Estamos mezclando
Una comprobación
Dinámica
Porque al guardarlo
Una constante
Esto no funciona
Porque
Type script
No es capaz
De saber
Que tiene
El const
Type of x
O sea
No lo sabe
Claro
Aquí
Si lo ponemos así
Si que
Si que es capaz
Porque de forma
Estática
Es capaz
De leer el código
Es capaz
De decir
Ah vale
O sea
Aquí tienes un type of x
Vale
Lo que está mirando
Es estáticamente el código
No ejecutándolo
Para ver lo que tiene
Así que hay que hacerlo así
Luego alguien me preguntaba
¿Por qué los tres iguales?
¿No?
¿Por qué estás utilizando
Los tres iguales?
Alguien me ha dicho
Que ponga
Fu
Vamos a poner el fu
Que han pagado
Por la
Por la variable
Vamos a poner el fu
Vale
Entonces
¿Por qué los tres iguales?
A ver
Los tres iguales
Los tendréis que tener
Más que interiorizados
Cuando trabajéis con javascript
Y por supuesto
Con typescript
Porque los dos iguales
Las comprobaciones que hace
Son bastante más complejas
En javascript
O sea
Esto
Por ejemplo
Esto puede darte
¿Ves?
De esta condición
Siempre de volver a false
Porque los tipos
String y número
Vale
En el caso de typescript
A lo mejor esto
Pues va genial
Y lo tiene
Que yo no tenía ni idea
A ver
Pues si
Que bueno
Que bueno
No sabía que en typescript
Tenía justamente esto
O sea que podías utilizar
Los dos iguales
En lugar de los tres
Pues me parece genial
La verdad
Supongo que lo
Lo comentaré
En algún momento
Pero yo estoy acostumbrado
A utilizar los tres
Además me gusta
Como quedan visualmente
Así que
Siempre utilizo los tres
Pero en javascript
Si que tiene una diferencia
Bastante importante
¿Vale?
No se si en el caso
De typescript
Lo miraremos más adelante
A ver si hay algún problema
Vale
¿Se puede escribir
And en lugar de
Arroba arroba?
Pues no lo sé
Si se puede
A ver si es que tiene algo
No
No se puede
No sé
Digo a ver si typescript
Tiene algo
Es una pena
Es una pena porque
Coffee script
Creo que sí que se podía
Y quedaba bastante bien
No
A ver
Ta ta
Teníamos
Ta ta
A ver si salía
Mira
Aquí se podía hacer así
And
Pero queda muy muy verboso
Muy verboso
Vale
Pues vamos a por más
Venga
Vamos a por más
Tipo de intersección
A ver que esto
Mira
Pero ostras
Aquí ya son interfaces
Esto es súper raro
Ostras
Nos van a enseñar
Intersecciones
Pero si todavía
No hemos visto interfaces
Bueno a ver
No pasa nada
Pero es súper raro
Bueno
Teníamos
El tipo de unión
Que puede ser
Uno
U
Otro
Es una O
Si puede ser
De un tipo
O de otro
Y luego tendríamos
El tipo
De intersección
Que se supone
Que el tipo
De intersección
Está
Está relacionado
Con el tipo
De unión
Pero se usan
De manera diferente
Porque el tipo
De intersección
Combina dos o más tipos
Para crear uno
Que tenga todas las propiedades
Claro
El tipo de intersección
Solo tiene
Bueno
Solo no
Pero suele tener
Más sentido
Cuando utiliza
Justamente interfaces
Una interfaz
Que lo veremos
Más adelante
Es más para
Identificar
Cómo es un objeto
¿No?
¿Qué interfaz tiene?
Puede ser
Otro tipo de objeto
No el objeto
Normal de javascript
Pero por ahora
Piensa eso
¿No?
Tienes un objeto
Que tiene unas propiedades
Y tú le puedes decir
Vale
Este objeto
Con la propiedad
Employee
Pues tiene el tipo
Number
Con la propiedad
Age
Tiene el tipo
Number
Y con esto
Ya tienes un objeto
Que tendrías
Un contrato
De ese objeto
Vamos a hacerlo
Vamos a tenerlo así
Y así lo vamos a revisar
Vamos a quitar
Todo lo que tenemos por aquí
Tenemos la interfaz
De employee
Pues podríamos crear
Ahora en employee
Employee
Que sea del tipo
Employee
Employee
Y entonces aquí
Tendríamos que crear
Ya
Uy he puesto un igual
Estos dos puntos
Y aquí
Lo que tendríamos que tener
La propiedad
Employee
ID
Que esto debería ser
Un número
Y deberíamos tener
El age
Fíjate que tiene
Autocompletado
Por algo
Y aquí
Le ponemos el 18
Si yo ahora
En lugar del employee
Pues esto le pongo
Que es un string
Hola
Pues esto
Ya no le gusta
¿Vale?
Porque ves
Nos dice
No, este employee
ID yo espero
Que sea un number
Esto sería una interfaz
Me extraña un poco
¿No?
Como es el orden
De esto
Debería ser el orden
Primero
Decirme lo que es una interfaz
No se me lo he vuelto a saltar
¿O qué?
Creo que no
Pero bueno
Entonces
¿Qué pasa con esto?
Que imagínate
Que en lugar de un employee
Yo tengo
Un
Una persona
¿No?
Y esta persona
No solo es un employee
Sino que también es manager
Claro
Y yo quiero que
El employee
Le diga que tiene
El número de employee
Que tengo la edad
Que es 18
Y el stock plan
Le decimos que es
True
¿Qué pasa?
Que esta persona
Si es employee
Pero esta persona
Es employee
Y manager
Claro
Si solo le digo
Que es employee
El problema es que
El stock plan
No lo puedo añadir
Porque me dice
Oye
Es que el tipo
Que estás utilizando
No le puedes asignar
Justamente
Que tenga un stock plan
Esto no
En esta interfaz
No lo has puesto
Para eso
Se utiliza
Esta
Esta
Esta forma
Que es la de
Intersección
¿Vale?
La intersección
Al final lo que te dice
Es como un
Ant
En la que tiene que tener
Las dos cosas
Se tiene que cumplir
Tanto
Que sea employee
Como que sea manager
Así que lo que podríamos
Hacer aquí
Es que sea employee
Y sea manager
Y ahora esto funcionaría
Una forma más allá
De reutilizar
Esta intersección
Porque puede ser
Que sea muy
Muy típica
No solo que la utilicemos
Aquí una vez y ya está
Sino que puede ser muy típica
Lo que podemos hacer
Es crear un type
Al crear un type
Le decimos
Vale
Tenemos un tipo
Que le vamos a llamar
Employee manager
Y este tipo
Es este de aquí
Es la intersección
De employee
Y manager
Y ahora este tipo
Lo podemos reutilizar
Tantas veces como queramos
Y ya tendríamos aquí
Nuestra persona
Y podríamos tener otro aquí
Y este employee
Más
Esta sea la persona B
Que sea 4, 5, 6
Y aquí el 24
Si le quitas el stock plan
¿Ves?
Pues se queja
Porque dice
Ostras, no
Porque esta persona B
Me dice
Es que es employee manager
Y le falta justamente
Aquí nos dice
Está requerido
El stock plan
Te falta
Vale
Pues nada
Le ponemos el stock plan
Le decimos que false
Para eso sería la intersección
Básicamente
Para tener
Un tipo
Que cumpla con
Dos o más tipos
A la vez
Que tenga todos sus
De forma conjunta
El tipo que estás creando
Tiene que tener
Todo
En ese mismo
Ese sería
¿Vale?
Me extraña
De nuevo
Que lo enseñen ahora
Pero bueno
Al final
Es una forma
De tener un contrato
De cómo debe ser
Tu objeto
Porque de esta forma
Los objetos
Que vas a crear
Siempre tendrán
Que estar así
Con employee ID
Y tal
Si tú intentas
Crearte cualquier otra cosa
Aquí
Por ejemplo
Pepito
Pues siempre
Se va a quejar
Y va a decir
Es que no
Esto no funciona
¿Vale?
Perfecto
Muy bien
Pues ahora que ya
Tenemos el tipo
Intersección
Hemos visto
Tipo unión
Tipo literales
Un literal
Es un subtipo
Más concreto
De un tipo colectivo
Esto significa
Hello world
Es un elemento string
Pero un elemento string
No es hello world
Dentro del sistema de tipos
Fíjate
Hay tres conjuntos
De tipos literales
Disponibles en TypeScript
String
Number
Y boolean
Mediante el uso
De tipos literales
Puedes especificar
Un valor exacto
Que debe tener una cadena
Un número
O un valor booleano
¿Vale?
Entonces
¿Qué es la restricción
Lateral?
Literal
Cuando se declara
Una variable
Se indica al compilador
Que existe la posibilidad
De que esta variable
Cambie su contenido
Pero al usar const
Para declarar una variable
Informará
TypeScript
Que este objeto
Nunca va a cambiar
Al declarar con tipos const
La escribes en el valor
Por ejemplo
Hola mundo
Venga
Vamos a ver ejemplos
Definición de tipos literales
Vale
Esto básicamente
¿Qué es lo que quiere decir
Todo esto?
Porque la verdad
Que como lo explica
Es un poco raro
Lo que quiere decir
Es que tú puedes crear
Un tipo
Que sea por ejemplo
Post answer
¿No?
Y al tener el tipo este
Lo que puedes hacer
Con tanto los strings
Como los números
Y creo que he leído
Boleanos también
Aunque es un poco raro
String number
Y bolean
Vale
Pues al final
Lo que puedes hacer
Es decirle
Vale
Pues answer
Esto puede ser yes
Esto puede ser no
Y esto puede ser maybe
Y esto puede ser
Follow me to death
Por ejemplo
¿No?
Entonces lo que estamos
Haciendo aquí
Es restringir
El
El
String
Que puedes utilizar aquí
¿No?
O sea
No puedes utilizar
Todos los strings
Sino que tiene que ser
Uno de estos cuatro
Hay una restricción aquí
Es algo parecido
A los enums
Pero no exactamente
Lo mismo
¿Vale?
Pero esto sería
Una restricción
De qué strings
Son los que puedes utilizar
Así que ahora
Ya puedes crear aquí
Tu resultado
Y decir que el resultado
Tiene que ser de uno de estos
Y si yo ahora aquí pongo
Pepito
Pues
¿Ves?
Se me queja
Dice
Oye
Pepito no puede ser asignado
Al tipo answer
Porque tiene que ser un string
Pero sí
Pero tiene que ser yes
No, maybe o tal
De hecho si pongo aquí dos
Pues igual ¿No?
Me va a decir que no
No se puede utilizar
Ahí es donde está el tema
Claro
Lo bueno es que hasta que
Tú hagas esto
Tú siempre podrás ponerle aquí yes
Podrás ponerle el no
Le podrás poner el maybe
Pero no le podrás poner
El follow pp
Porque el follow pp
No está
Eso sería una restricción
Estas serían las restricciones
Literales
Esto sería lo mismo
Con los números
Mira
Este ejemplo
Es muy muy muy bueno
Este ejemplo
Es con un dado
El dado puede ser
El 1
El 2
El 3
El 4
El 5
El 6
Pero no puede ser
Ninguno de esos
Si te sale un 7
O sea
Solo puede ser
Dile 1 al 6
Si te sale un 7
Pues ya no tiene sentido
El tema de boleano
Si que me
Me choca
Va a ver
Me choca
El tema es que el boleano
Solo puede ser true o false
O sea
No tiene mucha otra cosa
Si tú dices ya
Que es de un tipo boleano
Pues ya será así
No entiendo muy bien
Para qué harías
Una restricción de ese estilo
Pero bueno
También se puede
Claro
Me parece interesante
Vale
Tipos de colección
En TypeScript
Venga
Pues paso
Y os leo
¿Cómo estáis?
F por los lenguajes
Que no me permiten
Ya que es
Si quieres añadir métodos
Puedes crear una interfaz nueva
Y extender de la que necesites
Lo mismo
Hay boleanos
Boleanos cuánticos
Que son true y false
A la vez
Eso sería genial
Qué grande
Bueno
Veo que estáis ahí
Charlando
Y genial
Zagiel
Comentaba
Que además lo ha destacado
Zagiel
Venga
Vamos a ver tu
Preguntita
Zagiel
Preguntaba si esto se podía
¿Vale?
Esto no se
Esto no se puede
¿Vale?
No se podría
No se podría
Porque esto es el
Aunque
A ver
Type
A ver
Es que has puesto unos tipos aquí
Esto es Type of X
Yo creo que esto no se podría
Porque al final
Aunque es verdad
Que tienes estos
Pues me lo has puesto difícil
¿Eh?
Zagiel
Me lo has puesto
Que es que has
De alguna forma
Has evitado las letras buenas
O sea
Tú has puesto en el teclado esto
Y has dicho
Voy a ir
Estoy evitando las letras buenas
Ya te digo que yo creo que esto
Tiene un poco el mismo problema
Que hemos visto antes
Porque al final
De alguna forma
Eh
Le estamos dando algo de dinamismo
A esto
¿No?
Bueno mira
Aquí parece ser que
Vamos a ver si
X más Y
Bueno pues parece que sí
¿Eh?
Parece que sí
Porque en este caso
Sí que nos estamos asegurando
Que tiene el tipo X
Sí que es un Steam
O sea que funciona
Sí que funciona
No sé hasta qué punto
Esto tiene
Mucha historia
¿Vale?
Pero
Pero funcionar funciona
O parece que funciona
No sé si ponemos aquí
Sí sí
Parece que funcionar funciona
Pues mira ahí tienes tu respuesta
Que funciona
¿Vale?
Eh
¿Zagiel?
Bueno me alegro
Que te hayas reído
Pero es que claro
Es que macho
Me lo has dejado todo
Con las mayúsculas mal
Con todo mal
Ay si
Igual te escuchamos
A Pepe y a Pepito
Siempre nos discriminamos
Pues mira
Parece que funciona
Ahí lo de
Ahí está
El tema
Vale
Vamos a quitar este
Playground
Vamos a volver
Vamos a dejarlo limpito
¿Cómo estáis?
¿Cómo os encontráis?
¿Os está gustando?
¿Os gusta el ritmo?
¿Voy muy rápido?
¿Voy muy lento?
Comentadme
¿Cómo va eso?
¿Cómo va eso?
Rápido
Lento
Más caña
Me encanta
Samu Garrón
Le encanta
Lo digo porque
Si os gusta este formato
Igual me animo
A hacer muchas cosas más así
¿Veremos algo de pruebas unitarias
En TypeScript?
Seguro
Pero no tiene mucha historia
¿No?
Jean Carlos
Una prueba unitaria en TypeScript
Al final no debería ser
Diferente
A como las hacemos
Pero bueno
Podremos hacer
Lo miraremos
Seguiremos con el curso de TypeScript
Y en algún momento
Aún mejor
Mandan ejercicios y tal
Pues lo haremos
Impecable toda la explicación
Bueno Nuri
En este caso
Aunque te agradezco un montón el comentario
Tengo que decir
Que yo
En realidad lo voy leyendo
Pero
Pero te agradezco un montón
El comentario
¿Eh?
¿Tienes el link del curso?
De este curso
Creo
Si alguien se lo puede pasar
Que ahora
Es que creo que no tengo el
Bueno
Sí
Sí que lo tengo aquí
Lo paso en el chat
One more time
¿Vale?
Es totalmente gratis
Es de Microsoft
Está bien
Pero bueno
Hay cosas que a mí
Al menos me chirrían
Que ya las comento
Un poco para que lo vayáis viendo
Usando interfaces
¿Puedo colocar propiedades privadas?
Sí que puedes
Sí que puedes
Y lo
Supongo que lo veremos
Nada como repasar temas
Con gente que sabe
Gracias hombre
¿Cuántos proyectos profesionales
En TypeScript
Has hecho?
¿Dos?
Muy pocos
No tengo mucha experiencia
Con TypeScript
Por eso también
Quiero hacer el curso
¿Vas a combinar TypeScript
Con React?
Hoy no
Pero seguro que
Más adelante seguro
¿Algo de comportamiento
De usuarios
Con Segment Analytics?
Ostras pues
Mira
Eso es interesante
¿Verdad?
¿Qué es?
Me gustaría hacerlo
Más adelante
¿Se puede heredar
Interfaz?
Se puede
Y es parte de la gracia
De hacer esto
Las interfaces
No tienen
Propiedades privadas
Vaya
Pumuki
Cósmico
Nos ha fastidiado
El tema
Pensaba que
Si cabía
Si cabía
O sea
Propiedad privada
Claro
Al final
Entiendo que
Lo que tienes que hacer
Es implementar
Una interfaz
¿No?
Y la interfaz
Entonces le dices
A la clase
Le dirías
Lo que es privada
Y tal
Tiene sentido
Pero si pensaba
Que se podría
Ser ningún problema
Pero bueno
Pues ya sabemos
Que no
Gracias
Pumuki
Son las clases
La playlist
De TypeScript
En Youtube
Todavía no
Este es el primer vídeo
Este es el primer vídeo
Así que todavía no hay
Vale
Pues venga
Vamos a seguir
Que hay historia
Vamos a ver
Si terminamos
Las 10 unidades
¿Vale?
Tipos de colección
En TypeScript
Los tipos de objetos
Son todos los tipos
De clase
De interfaz
De matriz
Y literales
Todo lo que no sea
Un tipo primitivo
Los tipos primitivos
Que hemos visto antes
String
Bolean
Number
Blah
Veamos los tipos
De matriz
Y de tupla
Tupla
Me parece
Súper interesante
Pero es verdad
Que ahí hay una historia
Que luego os comentaré
Venga
Vamos con matrices
Bueno matrices
O arrays
Como me queráis llamar
En este caso
Entiendo que por matrices
Se puede entender más
Pero arrays
¿Vale?
TypeScript
Al igual que JavaScript
Permite trabajar con matrices
Las matrices
Se pueden escribir
De dos maneras
Esto
Se usa el tipo de elementos
Seguido de corchetes
O sea
Aquí le estaríamos diciendo
La variable
LetList
El tipo es
Un array
De numbers
¿Vale?
La verdad es que
No me gusta mucho
La forma
¿No?
Se lee como al revés
Es un poco rara
Es number
Y luego array
Me hubiera gustado más
De otra forma
Pero bueno
Aquí veo otra forma
Pero me ha gustado una tercera
Que ahora os explicaré
Igual
Y aquí tendríamos el array
Ya está
En el segundo caso
Se usa un tipo
Array genérico
Con la sintaxis
Array
Y dentro el type
No sé
A ver
Pumuki
Cósmico
A ver cuál es el que
¿Cuál te gusta más?
Pumuki
Ahora que te veo
Que eres un crack
De TypeScript
Para que sepamos tu opinión
Tú que sí que la has utilizado
A ver
¿Por qué?
¿Por qué os digo esto?
Esta sería una forma
¿Vale?
De indicar un array de números
Y luego tendríamos
Esta otra forma
¿No?
List B
Pero la verdad
Es que a mí
Si pudiera elegir
La que me gusta más
Sería algo así
Pero claro
¿Qué pasa con esto?
Que esto en realidad
Lo que quiere decir
Es que es un array
De un elemento
Que tiene un número
Por eso se queja
Entonces no sé
Si se podría hacer algo así
Eso ya sería genial
Pero entiendo que no
Arrest element type
Must be an array type
Bueno
Estos son mis ensoñaciones
Nos vamos a tener que dedicar
A aprendernos esta
Hombre
Esta
Creo que se lee
Un poquito mejor
En el sentido de que
Dejar para el final
Lo que debería estar
Del principio
Bueno
Iremos viendo
Iremos viendo
Vamos a leer
A ver
¿Os gusta más la primera?
La primera forma
Es la más usada
Repite la pregunta
Vaya
Te la has perdido
Pero ha habido gente ahí
Que sí que ha estado
Sí que ha estado
Atenta
Entiendo que la primera
Es la más usada
Pero la de abajo
Yo creo que la he visto
En más lenguajes
¿No?
Más allá de TypeScript
O sea
Igual
Es más conocida
Allá afuera
Entiendo
No sé
Bueno
Las iremos cambiando
Me imagino
Claro
Las tuplas
Tener una matriz
De los mismos tipos
De valor
Es útil
Claro
Esto es cuando tienes
Un array
De no sabes
Cuántos números
Y todos son del mismo tipo
Pero a veces
Tienes una matriz
Que contiene valores
De tipo mixto
Por ejemplo
Pues un hook
De React
El useState
Pues tienes
El primero
Que es un valor
Y el segundo
Que seguro
Es un método
Así que
TypeScript
Proporciona el tipo
De tupla
Para declarar
Una tupla
Se usa la sintaxis
La que estaba utilizando
Justamente antes
O sea
Tú puedes tener aquí
Una personita
Y le decimos
Que la persona
Tiene primero
Un string
Y luego
Tiene un número
Y esto
Puede ser
Que tenga
Midudev
Y luego
Tenga su edad
Que es 18
La edad de
Midudev
Es 18
Esto sería
Y si le ponemos aquí
Que tiene otro string
Pues esto
Ya peta
Porque no estamos
Como la tupla
No está funcionando
Correctamente
Perfecto
Aquí tendríamos
Este ejercicio
A ver
Si intentas agregar
Aquí otro elemento
Pues también te petará
Porque la tupla
Está mal
Y lo mismo
Si la ponemos aquí
O sea
Eso lo hemos visto
Se genera un error
Porque los elementos
De la tupla
Son fijos
Prueba cambiar
El orden
De los elementos
De la raíz
Por lo mismo
Claro
Si pongo aquí
El number
Como el primero
Pues también me petará
Porque Midudev
Es un string
¿Ves?
Estos tipos de string
No se asignan a la tipo
Número y tal
Bueno
Ya hemos dominado
Las tuplas
Ya está
Tuplas
Check
Eh no
Pues parece ser
Que ha funcionado bien
¿No?
Cuando he puesto
La edad
La edad
Como 18
Pues ha funcionado
Perfectamente
O sea que
Creo que será verdad
Venga
Vamos con la siguiente
Uso de tipos
En TypeScript
En este laboratorio
Escribirá el código
De JavaScript
En cada uno
De los ejercicios
Siguientes
En TypeScript
Tipando fuertemente
Fuertemente
Con fuerza
Cada una
De las variables
Modificación
Del código
De JavaScript
Existente
Para que tenga
Variables
Fuertemente
Tipadas
A ver
No sé
Si clonármelo
Directamente
Ostras
Ostras
Madre
Venga
Vamos a clonarlo
Va
Vamos a clonarlo
Clonamos
El ejercicio
Vamos a
EmsLearn
TypeScript
Module
Module
Pues esto
Pues esto empieza mal
Ah
Code
Esto está mal
Esto está mal
Está mal
CD
A ver
Me está engañando esto
Ah vale
Vale
No está mal
Soy yo que
Me lo podía haber copiado
Directamente
Y ya está
Vale
M02
Start
Que es donde va a estar
Nuestro código de inicio
Vale
Ya veo aquí un montón de problemas
De hecho
Esto es tener mala baba
Vale
Esto es tener mala baba
Vamos a ver
Este first name
Está mal escrito
Esto es con camel case
O sea
Empieza mal la cosa
Vale
Lo demás
Más o menos
Random numbers
Está usada
Antes de que
Antes de ser asignada
Ciertamente
Vale
Ejercicio 1
Modifica el código
Para añadir tipos
A la declaración
A variables
El código
Resultante
De javascript
Debería
Ser igual
Que el ejemplo
Original
Que has hecho
No sé
Qué decir
Ejemplo original
Que he hecho
Pero first name
Es un string
Esto es un string
El full name
Es otro string
El age
Es un number
Y el
UK citizen
Es un
Es un
Brexit
No es un bolean
Hasta aquí
Bien
¿No?
Vale
My name
Es no sé qué
No sé cuánto
Bueno
Pues hasta aquí
Ya está
Ya está
Fantástico
Creo que eso
Está bien
Ejercicio 2
Puedes usar tipos
Para asegurarte
Cómo termina
La operación
Ejecuta este código
Como está
Y entonces modifica
Para que tenga
Variables tipadas
Fuertemente
Entonces
Arregla cualquier error
Que tengas
Hasta que el resultado
Sea 12
Vale
Vamos a recuperar esto
Lo voy a poner aquí
A ver qué pasa con esto
Vale
¿Qué está pasando aquí?
Que la x
Es 5
Esto es 7
Y esto me da
5, 7
Pero claro
A ver
Esto es un poco trampa
¿No?
Porque dice
Ejecuta este código
Y entonces modifícalo
Bueno
Pero es que
A ver
Vale
Primero
Deberíamos poner
Que esto es un number
¿No?
Entonces ya me quejaría
Y me diría
Oye
No
Es que aquí tienes un string
¿Qué haces?
No
Perdona
Es que
Soy tonto
Entonces
En lugar de escribir el 5
Como un string
Lo escribo como un número
Y el a
Pues nada
También sería un number
¿No?
Y ya está
Este sería ejercicio
Vale
¿Cómo lo llevo?
Bien
¿No?
La edad de mi 2F es 18
Y no ha fallado el compilador
Parecía más grande
El string es equivalente a 1
Si fuese boleano
¿Cómo?
El string es
Ahí me he perdido
Samugarrón
Ahí me he perdido
No sé qué comentas con eso
Ejercicio 3
En el código siguiente
Implementa un enum
Vale
A ver si me acuerdo
Cual es enum
Enum
Venga
Enum
Llamado season
Venga
¿Qué contiene?
Fall
Ahí esto era así
Así
Fall
Winter
Spring
Summer
Rewinter
Is coming
Vale
Tenemos season
Y entonces
Actualiza la función
De forma que
Lo que le pasas
Season
Esto tiene que ser
El tipo season
Vale
Ajá
Month in season
Ahora el problema es
Ahora
Actualiza la función
De forma que le pasas
Un season
Referenciando en el ítem
El enum
Por ejemplo
Season.fall
En lugar del literal
Claro
En lugar de utilizar
El literal así
Ahora lo que tenemos que decir
Esto es
Cuando me pasas
Season.fall
Tal
Cuando me pasas
Season.
Claro
Es que esto es mucho mejor
Esto es genial
O sea
Esto es mucho mejor
A la hora de
Trabajar con esto
De hecho
A ver
Season no sé qué
Vamos a probar una cosa con esto
Vale
Y esto igual
Season.fall
Vale
Y esto
Lo deberíamos poder ejecutar
Y deberíamos ver el código
September to November
Vale
Perfecto
Una cosa que estaba pensando
Es
¿Se puede
Se puede crear
Un diccionario
Que sea
Months
Por ejemplo
Y yo aquí utilizo
El
Utilizo
Season.fall
Y aquí le digo
Que season.fall
Es esto
Esto ya es curiosidad mía
Season.winter
Es esto
Me imagino que sí
Que se puede
Sin ningún problema
¿No?
Y entonces
Season.
Y aquí está
El fall
Vale
Entonces aquí
Hacer un return
De months
Que le pasas
El season
Punto
Bueno
Le pasas el season
Y ya está
¿Sí?
Queda bastante mejor
Pues está genial
¿No?
Está genial
Está bien
El poder utilizar
Un enum aquí
Directamente
Está
Está bastante bien
Porque de esta forma
Tienes aquí ya
Todos los
Diccionarios
Y aquí le pones esto
Y tal
Me gusta más este código
Que tienen ahí
Pero bueno
Este es ejercicio 3
Para los que me preguntan
Sobre este
Esto es
Run.js
Y se sirve
Para ejecutar
Javascript
Y typescript
Y te pone la consola
Y tal
Es genial
Es genial
Declaración de un tipo
De matriz
¿Vale?
Busca ejercicio 4
Declare la matriz
Como el tipo
Que va a coincidir
Con el tipo
De elementos
De la matriz
Vale
Vamos a nuestro código
Random numbers
A ver
Random numbers
Random numbers
Vamos a poner
Que esto es un numbers
Y es un array
Can't find numbers
¿Vale?
Hay numbers
Yo también
Number
El next number
Entiendo esto
Es un solo number
¿Vale?
Y aquí pone
Que random numbers
Además
Claro
Antes de ser inicializado
Es que esto
Debería ser
Un array vacío
¿No?
Al principio
Y esto
Next number
Esto es un número
Le hacemos el push
Vale
Vamos a ver
Si esto funciona
Perfecto
Muy bien
Muy bien
Hemos terminado
Nuestros ejercicios
Así que
Vamos al
Siguiente
Que es
Comprobación de conocimientos
Vamos a ver
Comprobación de conocimientos
Espero no fallar
Madre mía
Que miedo
Nervios
Nervios
Agüita
¿Qué acabo de hacer?
¿Qué ha pasado?
¿Qué he hecho?
Sí
Ram
Venezuela
Estoy aprendiendo
TypeScript
Y lo estoy haciendo aquí
En sociedad
En comunidad
¿Qué he hecho?
Vi parcero
Y Hakon dice
Que también prefiero evitar
Los switch
Usando diccionarios
Ahí está
¿De qué categoría
De subtipo de any
Son ejemplos
Los tipos
Bolean
Number
String
Y en un
Son tipos
Primitivos
Sin copiar
No he copiado
De hecho nada
No hay chuleta
No hay chuleta
¿Cuál de los siguientes tipos
Es un ejemplo
De tipo
Objeto?
El array
El array
¿No?
Yo creo que sí
Hostia
O parámetros de tipo
Bueno yo creo que es el array
Bueno ahora veremos
¿Qué más?
¿Cuál es la diferencia principal
Entre los tipos
Any
Y unknown?
¿Cuál es la diferencia?
Puedes asignar cualquier valor
A un known
Pero el tipo any
Tiene algunas restricciones
Mentira
Puede acceder a las propiedades
De un tipo unknown
Pero un tipo any
Mentira
Puedes acceder a las propiedades
De un tipo any
Pero no de un tipo unknown
Eso
¿Cuál es el nombre
De la característica
Que indica el compilador
Sé lo que estoy haciendo?
Me encanta esa
Sé lo que estoy haciendo
Aserción de tipos
Ahí está
¿Qué es una tupla?
Una matriz
Con un número infinito
De elementos
Del mismo tipo
Mentira
Una matriz
Con un número específico
De elementos
Del mismo tipo
Mentira
Una matriz
Con un número específico
De elementos
De uno o más tipos
Venga
¡Bravo!
Ya tenemos 400 puntos
De experiencia más
No sé para qué sirven
Estos puntos de experiencia
No sé si voy a poder
Evolucionar
Como Pikachu
Pero bueno
Ya está bien
Ahora que ha revisado
El módulo
Ahora soy capaz
De explicar las ventajas
De declarar variables
Tipadas en TypeScript
Espero haberlas explicado bien
Declarar variables
Mediante tipos primitivos
Declarar variables
Mediante tipos de objetos
Bla bla bla
Y aquí un montón de recursos
Desbloquear el logro
Dame mi logro
Dámelo
Implementación de interfaces
Muy bien
Qué bonito
Continuar
Os paso
Paso el link
Os paso el link
¿Por dónde vamos ya?
Vamos ya
Para el
Vamos por la mitad
Casi creo
¿No?
Hemos hecho
Introducción
Declaración de tipos de variables
Este lo hemos terminado
Implementación de interfaces
Es el que nos queda ahora
Vale
Implementación de interfaces
Bueno
Esto lo dejaremos ya
Para la semana que viene
¿Os ha gustado el formato?
¿Qué?
¿Os ha gustado?
¿Os ha gustado así?
¿Cómo estáis?
A ver
La semana que viene
Seguiremos
Me imagino con este
Para continuar con
Con TypeScript
Porque bueno
Lo quiero aprender
Lo voy a necesitar
En mi trabajo
Y
Hacía
Hacía como
Cinco
Cuatro
Cuatro o cinco años
Que utilicé TypeScript
O sea
Hace un montón de tiempo
Y claro
Ha cambiado bastante
Entonces
Ya casi no me acuerdo de mucho
Y
Lo tengo que refrescar
Y
Y sé que han salido
Como dos o tres mayos
O sea que
Que cuanto antes
Pues mejor
Así que vamos ahora
Con unas preguntas
Andrés
¿Qué PC recomiendas
Para programar
Que no sea tan costosa?
Define tan costosa
¿Cuánto es tan costosa?
¿Nos explica
Lo que hiciste
Con los diccionarios?
No lo entendí
Claro que sí
Mi parcero
Te lo explico
Muy chulo el formato
Gracias Alberto
Muy bueno el formato
Voy a ver si me pongo
A hacer el curso
Gracias Ariel
Te explico lo del diccionario
A ver
No sé dónde lo he hecho
Pero en algún sitio
Que lo he hecho
Te lo explico
Voy a tirar para atrás
Vale
A ver
Esto
En realidad
No sé cómo se llama
Esto
Esto tiene un nombre
¿Vale?
Yo lo llamo diccionario
Pero esto tiene un nombre
Al final
Voy a copiarme esto aquí
Esto que he hecho aquí
Imagina que tú tienes un switch
¿No?
Tienes un switch case
Un switch
Y en el switch
Tú lo que le dices
Cuando tengo season
En el caso de que tenga season fall
Entonces tengo month in season
Tal
¿Vale?
Entonces si te fijas aquí
Esto de alguna forma
Lo que estás haciendo es que
Cuando tienes esta key
Entonces tienes este valor
¿Vale?
O sea ya ves aquí la referencia
Key
Value
Key
Value
¿Vale?
O sea ya estás viendo aquí
Que hay un patrón
¿No?
Que cuando tienes esto
Entonces lo otro
Entonces ya estás viendo
Que hay este patrón
Que puedes extraer
De forma que
Tú creas un diccionario
Diccionario
Le llamamos diccionario
¿Vale?
Aunque tiene más sentido
Season
Month
Season
Month
De forma que
La key
Que es lo que tendríamos aquí
Aquí le puedes poner la key
Que sea
Puedes poner pepito
Y pepito
Pues que esto sea 2
¿Vale?
Pero en nuestro caso
No queremos que sea pepito
Queremos que
Sea cuando tiene el valor
Season fall
Que season fall
Ya sabemos
Por lo que hemos visto en el curso
Que esto es 0
Esto es 1
Esto es 2
Y esto es 3
Una cosa que podríamos hacer es
Cuando es 0
Entonces
Tenemos este valor de aquí
¿Vale?
Cuando es 1
Tenemos este valor de aquí
Esto del 0
Y el 1 y tal
No me lo estoy inventando
Sino que sabemos
Que cuando haces un enum
Empieza por el 0
Y va aumentando
0, 1, 2, 3
¿No?
Y aquí lo haces
Pero claro
Esto hace
Que sea difícil de leer
¿Por qué?
Porque yo ahora
Cuando veo aquí
Visualmente el 0
El 1, el 2
Pues no me entero
Digo
Ostras
El 0, 1, el 2
¿Esto qué es?
Esto es
Números
¿A qué se refiere esto?
Entonces
En los objetos
Tú puedes utilizar
Como key
Una variable
En este caso
Vamos a utilizar
Las variables de los enums
Vamos a utilizar
El season
Punto
Fall
Y esto
Este season fall
Si ponemos aquí
Un console.log
Season
Punto fall
Esto nos va a devolver 0
Por lo tanto
Esto
Y esto
September
To November
Estas dos líneas
Hacen lo mismo
Hacen lo mismo
Solo que de una forma
La primera mucho mejor
¿Por qué?
Porque si el día de mañana
El season fall
Hacemos que empiecen
Por 25
Este código
Funciona correctamente
Y el otro
Este cohes con números
No funcionaría
Así que
Lo mejor
Sería utilizar
Las keys
Que además
Visualmente
Te ayuda a entender
Mucho mejor
El código
¿Vale?
De esta forma
Te puedes
Te puedes
Eliminar
El
El switch
Porque el switch
Si te fijas
Al final
Es como
Un if else
If else
En lo que
Lo único que
Importa es el key
Y luego
El value
Entonces
Si
Dependiendo de que el season
Sea season fall
Te da este valor
Al final
Lo que puedes hacer
Es tener
Este diccionario
De aquí
Y extraer
Justamente
En el months
In season
Este
Decirle
Es que ni siquiera
Necesitas
Lo mejor de esto
Es que ni siquiera
Necesitas la variable
Pero bueno
Al final
Lo que puedes hacer
Es extraer
Months
In season
Es del tipo
String
Y esto me lo encuentras
En este diccionario
Season month
Accediendo
A la season
Que me pases
Esta season
Que me pasas
Que es del tipo season
Que será una de estos
La fall
Winter
Spring y tal
Vienes al diccionario
Y devuelve
Este string
Y esto
Pues ya lo puedes devolver
Y quedarte
Muy a gusto
Lo devuelves
Y te quitas
Todo este código
Que es horrible
Y ya está
Esto tiene
Mil millones de ventajas
O sea
No solo queda
Mucho más claro
El código
No solo además
Extraes
Esta funcionalidad
De forma que esto
Lo puedes exportar
Y lo puedes reutilizar
Más adelante
En lugar de estar
Dentro de la función
Normalmente
Los switch case
No son tan reutilizables
Ni fáciles de comprender
Y además
Están dentro de la función
De la ejecución
De la función
Esto lo que te permite
Es extraerlo
Mucho más fácil
Y además de esto
Bueno es que esto
Lo podríamos simplificar
Porque esto
Puede ser directamente
Esto al final
Esto ya es un reto
Es que ni siquiera
O sea
Esto ni siquiera
Ya necesita hacerlo así
Y con esto
Ya lo tendrías
Y bueno
Podríamos seguir
Podríamos seguir
Haciendo lo más cortito
Y así
Y ya estaría
Bueno ahora
¿Qué le ha pasado esto?
No me ha gustado
Bueno no sé por qué
No me ha gustado
Pero
Ah vale
Por los tipos
Claro
Por los tipos
Porque los tipos así
No me están entendiendo bien
Pero bueno
Que ya pillan la idea
Que se podría simplificar
Esta sería un poco la idea
Esta sería un poco la idea
A ver
¿Qué me decís en el chat?
Obtie
Eso
Computed property names
Siempre se me olvida
Estaca
Gracias por el nombre
Ese es el nombre
Correcto
Tablas de hash
También puede ser el nombre
Pepito va a acabar pidiendo
El copyright
Que venga a buscarlo
También existen
Los new map
En mascript 6
Es verdad
Lo de los map
Se podría utilizar
Un map aquí
Pero
El tema de los map
En este caso
Yo no le encuentro
Tanto valor
¿Vale?
¿Por qué no le encuentro valor?
Uno
Porque normalmente
No está soportado
No está soportado
Por todos los navegadores
De la misma forma
Que si lo están los objetos
Dos
Porque a mí me resulta
Incluso mejor visualmente
Esto que en un map
Porque el map
Al final lo que tendrías
Que hacer sería algo así
¿No?
New map
De hecho a mí
Si me preguntas
Me gusta más el objeto
Pero bueno
Sería algo así
¿No?
Haces un set
De esto
Otra cosa
Otra cosa es
Que el map
Tiene otras ventajas
Que aquí no estaríamos utilizando
Si vas a utilizar
Las ventajas
Que tiene el map
Entonces sí
Me refiero en este ejemplo
En concreto
Pero sí
Con el map
Tendría que ser así
No me gusta
Tanto con el map
Porque al final
No es
Aunque sí que es una estructura
La tienes que construir
Llamando a métodos
Y tal
No me
No sé
El objeto me parece
Mucho más elegante
En este tipo
De construcción
Pero es verdad
Que el map
Al final
Tiene otro
Tipo de
De ventajas
Que te puede
Porque es un objeto
Que es totalmente
Interable
Súper fácil
No sé
O sea
Tiene sus ventajas
Pero
Puedes mirar
Si existe una aquí
O sea
La forma de buscar
Es mucho más fácil
También
Pero tampoco
Me parece
Tener una gran ventaja
En este ejemplo
¿Vale?
Enum Season
Es un array
Enum Season
Es
Creo que es un objeto
No tengo claro
Que sea
No sé si lo transforma
Este en un array
O un objeto
A ver
A lo mejor
Es que al final
Sabes que pasa
Que los arrays
Y los objetos
Son lo mismo
Lo que pasa
Es que un array
Un array
Al final
Es un objeto
Así
Es esto
Es exactamente
Lo mismo
Entonces
No
Desconozco si es exactamente
Un array
O un objeto
Pero al final
Será
Cualquiera de los dos
Que debe ser muy parecido
¿Por qué pones los
Claro
¿Por qué pongo esto?
¿Por qué pongo esto?
¿No?
Alguien me dice
¿Por qué pones estos corchetes?
A ver
Estos corchetes son necesarios
Porque si tú
Le pones
Season
Season
Punto
Fall
Esto
Esto es
Incorrecto
Sintácticamente
¿Vale?
¿Ves?
Te dice
Mira no esperaba este token
No puedes poner un token
Esto no se puede poner así
En un token
¿Vale?
Este es que no existe
Esta forma de escribir
Además
Si tú pones
Por ejemplo
Si ponemos aquí
Season
Entonces ya tendríamos un problema
Imagínate que
Pudiésemos ponerlo
Claro
Season
En realidad es lo mismo
Que poner el string Season
Entonces la forma correcta
De poder
Utilizar
Una variable
Como propiedad
De un objeto
Es poniéndole los corchetes
Que si lo piensas fríamente
Es lo mismo
Que cuando lo accedes
¿No?
Que pones los corchetes
Con la propiedad
Season
Punto
Fall
Así que tiene sentido
Que sean corchetes
Si no
No entiende
Que lo que quieres
Hacer es evaluar
Una variable
Por eso tienes que utilizar
Los corchetes
¿Vale?
Eso me preguntó
Chris con Rue
Qué buena
Esa forma de hacerlo
Para usar valores dinámicos
Porque se usa el enum
Se puede usar funciones
Flecha
Se puede
O sea que puedes usar
Adicionales para cambiar
El switch en los reduces
De Redux
Totalmente
De hecho
Esto que hemos hecho aquí
Este Season
Month
Esto también
Puede ser incluso interesante
Para tener funciones
Tú esto
Haces que sean funciones
Claro
Es que ya os digo
Que esto
Tiene un montón de utilidades
Puedes hacer que esto
Sean funciones
Imagínate que aquí
Le pones prefix
Y entonces aquí
Ejecutas el prefix
Algo así
Y entonces ya
Pues tienes el prefix
Que lo puedes utilizar
Con un valor por defecto
O sea
Va mucho más allá
Este pedazo de patrón
Es súper interesante
Este patrón
Y creo que es uno
Que hay que dominar un montón
Con los enums
Al final
Se tipean menos teclas
Los objetos
No serían iterables
Creo
En comparación con los arrays
Los enums
Al final
Se tipean menos teclas
Claro
Lo interesante
De los enums
Es que puedes acceder
Así directamente
Es súper fácil
Con los objetos
Es un poco más
Hostia
No sé qué ha pasado ahí
Pero
Eso es el enum
Vale
Pues mira
Es una
Es una variable
Es una función
Que se auto ejecuta
Que al final
Por lo que veo
Es un objeto
O sea
Es un objeto
Tal cual
¿Conoces
OvermineJS?
No lo conozco
OvermineJS
No sé qué es
Lo he abierto por aquí
OvermineJS
Dice que es
Bueno
No dice lo que es
Es Frictionless
State Management
Ahora que lo veo
Me suena
Ahora que lo veo
Me empieza a sonar
Un poco más
Vale
Separar la lógica
Me parece bien
Acciones
Esto de separar la lógica
Me parece muy bien
Bueno
Al final
Es una forma
De tratar el estado
Bueno
Me parece
Interesante
No lo
No lo conocía
Al final
State Management
Hay tantos
Y tantos
Ah mira
Tiene DevTools
Esto parece
Bastante bien
Esto
Esto parece
Como GraphQL
No sé
Se me parece
Pues no lo conocía
Gracias por compartir
Igual le he hecho un vistazo
En algún momento
En tu ejemplo
Dice Nuri
Season
Sería un type
Custom
A ver
En mi ejemplo
¿Cuál sería?
Bueno
A ver
Es que ahora
Este Season 11
Aquí
Lo he duplicado
He puesto un montón
De cosas
Sería
¿Cuál sería custom?
Porque aquí no veo
Que haya ningún custom
¿No?
Season month
Estamos accediendo aquí
Bueno aquí
Claro
No le he puesto un tipo
Claro
No le he puesto un tipo
El tipo
El tipo que entiendo
Que debería
No hemos visto
Que tipos
Cómo se hacen
Supongo lo vemos
En la siguiente clase
Pero lo que deberíamos
Hacer aquí
Es que fuese
Un objeto
Que esto fuese
Un string
Y esto
Que fuese
Un string
Creo que esto
Como deberían ir
Los tiros
¿No?
O sea
Lo que nos gustaría
A ver
Voy a quitar esto
Es algo así
Que lo podríamos hacer
De otra forma
O sea
Que esto sería
El Season
Ah bueno
Esto no es un string
Es un number
Perdón
Esto sea un nombre
Season ID
O como la queráis llamar
Y sería algo así
¿No?
O sea
Un objeto
Que tiene
Pero sí
O sea
Todavía no hemos puesto
Aquí ningún tipo
De ningún
Tenemos que hacerle
Una interfaz
O lo que sea
Exacto
Tidescript también
Admite
Desestructuración
Which months
Season tal
Bueno
En este caso
Este caso
Lo que hace
Esto en realidad
Lo que hace
Es devolver
Un string
¿No?
Esto ya
Which months
Esto ya lo que hace
Es devolver un string
Que creo que se pone aquí
Si no me equivoco
Esto ya sería un string
Y ya está
¿Se puede iterar
Un en un
Me imagino
Que sí
Que no debería
Haber ningún problema
A ver
Seguro que sí
Seguro que sí
Porque al final
A ver
Se puede hacer
Seguro con un
For off
Hagámoslo en un momento
A ver
For let
Season
In
Season
Bueno
Seasons
No sé si esto
Notará algún problema
Pero
Console.log
Season
Ahí lo tienes
Bueno
Lo que pasa es que nos da
0
1
2
3
Season
In
Season
Pues mira
Nos está hidrando
De más
Nos está dando
Aquí
Demasiadas cosas
No nos está dando
Lo que realmente queremos
Vamos a ver
Pero a ver
Se tiene que poder
Seguro
Season
Season
Fall
Winter
Ostras
Es que tiene aquí las dos cosas
Qué curioso
Claro
Tiene por un lado
Esto es muy interesante
Claro
Necesita como
El diccionario
Hacia los dos lados
Esto está muy bien
Bueno
Lo que podrías hacer
Por ejemplo
Para iterar
Lo fácil
A ver
Esto es una cosa
Que se me ocurre a mí
Pero una cosa
Que puedes hacer
Es que
Si es none
El number
Del Season
Entonces hace
El Console Log
No creo que sea
La mejor forma
Pero vaya
Así seguro
Que lo puedes iterar
Si no es un número
Pues lo haces
Y ya está
Ya lo tendrías
Ay
Perdón
Que no estáis viendo
Perdón
Perdón
Perdón
Perdón
Bueno
Básicamente
Lo que he hecho
Entonces
Eres muy guapo
Pero no vemos el código
Hostia
Es verdad
Tengo que hacer
Alguna cosa
Para que cuando
Sabéis que si os suscribís
Con Prime
Suena la campanita
Vale
Pues así
Lo podéis hacer
Ahora sí
Ahora sí
Perdón
Vale
Lo que estaba haciendo
Es un for
Let Season
In Season
Y entonces
El problema
Que estaba viendo aquí
De lo que estaba comentando
Cuando estabais ahí
Es esto
Que están todos los
El 0
El 1
El 2
El 3
Porque tiene el diccionario
Hacia los dos lados
Si hacemos un Console Log
Del Season
Vemos que tiene el diccionario
1
Con los números
0
1
2
3
Y te dice
La key
Del enum
Y luego
La key
Del enum
Con el valor
Que tiene
O sea
Tiene el diccionario
Hacia los dos lados
Que tiene todo el sentido
Del mundo
Entonces
Nada
La forma rupestre
Que se me ha ocurrido
De que podríamos hacer esto
Porque con un object keys
Al final va a pasar
Un poco lo mismo
Sería hacer esto
Si
Es nan
El
Se intenta transformar
En nan
O sea
Si
Cuando transformas
En número
El season
Es nan
Pues nada
Entonces
Lo enseñas
Y ya está
No me parece
Que sea la mejor
Pero
Pero bueno
Puede ser una
Una de ellas
Ya me extraña
La verdad es que me extraña
Que
No sé
Entiendo que a lo mejor
Que un object keys
Si que lo hace
Que no lo he probado
Lo he ido a saco
Pero a lo mejor
¿Ves?
No
Un object keys
También salen
Claro
Tiene sentido
Tiene sentido
Porque claro
Y el object values
Al final
Sería lo mismo
Si haces object values
Pues sería al revés
Vaya
¿Ves?
For winter
No sé quién
No sé cuánto
Igual esta podría ser una
Porque entiendo que
Solo son los números
Podría ser
Pero no sé si está pensado mucho
Para iterarlo
De esta forma
O sea
Yo creo que los enum
No están pensados
Para que sean iterables
Sino que en realidad
Están pensados
Para que sean como
Enumeramientos
Enumeramientos
Para enumerar
Cosas del palo
Como los días
De la semana
No es tanto
Como que los vayas
A iterar
Sino que es más
Que los vas a utilizar
Directamente
¿No?
De cuando quieres
Referirte a un día
Y cosas así
No
Object entries
Lo mismo
Sería más o menos
El mismo problema
Object entries
Pues que vamos a tener
Cero
Está repetido
Básicamente
A ver
Otra cosa que se puede hacer
Es
Recuperar de la mitad
Para la ante
Cosas así
Pero bueno
No creo que sea la forma
Bueno amigos
Y amigas
Muchas gracias
Por estar aquí
Espero que
Que os lo hayáis pasado
Tan bien como yo
Nos vemos este domingo
Con el Full Staff Bootcamp
Que a ver que tal
Vamos a hacer Redux
Así que espero
Que estéis por aquí
Que lo paséis bien
Que vamos a seguir aprendiendo
Y no paramos
No paramos de aprender
Aquí cada día
Una cosa loca
Una cosa loca
Así que nada
Espero que estéis muy bien
Que hayáis aprendido como yo
Sobre todo con temas
De TypeScript
Y que ya sabéis
Que si os gusta mucho
El canal
Pues que por aquí estamos
De vez en cuando
Que no olvidéis pasaros
Y poneros ahí
A suscribir
Campanita
Y lo que sea
Y por aquí
Estaremos
¿Vale?
Así que te mando
Un brazo
Un brazo también
Un brazo
Toma un brazo
Un abrazo
Un abrazo enorme
Y que pases un muy buen
Fin de semana
Que lo disfruten mucho
Y gracias por los 50.000
Suscriptores en Youtube
Os lo agradezco un montón
De corazón
Sed buenos
Chao
Chao
Zibo
Brunia
Xenza
Ospinos
Santiu
Y Obi
Xenza
Otra vez
Zagiel
Pumuki
Cósmico
Que uno de sus grandes
Dice que una de las mejores cosas
Que le ha pasado en la vida
No
Su gran logro de este año
Ha sido corregirme
Samu Garrón
Nuri
127
Hay 196
Nuri también por ahí
Andrés Tacruz
Cami
Cami Maya
Cami
¿Cómo estás?
Santiago Este
Freak Freak
Soy Franz
Gekon
Andrea
Yomar
21
Manucho
Y con esto
Nos vamos
A cenar
Un ratucho
Hasta luego
Chao
Chao
Chao
Chao
Chao
Chao
Chao
Chao
Chao
Chao
Chao
Chao
Chao
Chao
Chao
Chao
Chao
Chao