Muy buenas tardes, ¿qué tal? Bienvenido, bienvenida, espero y deseo que te encuentres muy bien.
Estamos a mitad de semana, al menos del lunes al viernes, el miércoles está en la mitad, en la mitad.
Y hoy vamos a hacer un curso de TypeScript desde cero porque me lo habéis pedido por activa y por pasiva,
sobre todo ahora que estamos utilizando cada vez más en el resto de cursos como el de RIA que tenemos,
por si no lo sabes, tenemos un curso de RIA buenísimo que hemos hecho de forma práctica y tal,
que tengo pendiente de subir algunos vídeos, que ya lo sé, que os encanta recordármelo,
pero todo este curso, mira, curso de RIA 10 desde cero con proyectos, muchos de ellos los hemos hecho con TypeScript, ¿veis?
RIA más TypeScript, más ChatGPT, hemos hecho muchos de ellos con TypeScript y había gente que me decía
esto está muy bien, pero estaría bien también que hagas un curso de TypeScript.
Haz un curso de TypeScript para que no me pierda también el curso de RIA.
Entonces, hoy vamos a hacer un curso solo de TypeScript, enfocado a TypeScript, sintaxis, fundamentos,
un poco de historia, por qué aprenderlo, interfaces, tipos, por qué utilizar uno u otro,
todo eso lo vamos a ver, ¿vale?
Y lo vamos a hacer, pues, moviendo las manitas, que es justamente lo más interesante siempre
cuando queremos aprender algo.
Mi idea es llegar incluso a explicaros los utility types, o sea, genéricos, clases, interfaces,
tipos, uniones, intersecciones, de todo.
Vamos a ver, dos horas, así que tienen que estar todos atentos y atentas, ¿vale?
Todo prometo que vamos a intentar ir más allá, ¿vale?
Del tipo de concurso, de lo típico y tal.
Vamos a ver lo típico porque es importante, sobre todo para la gente que está empezando, ¿vale?
Pero vamos a ir avanzando.
No tengas miedo, ¿vale?
No tengas miedo, si hay algo que te pierdes un poco, seguro que te puedes reenganchar un poquito más adelante.
Voy a intentar hacer más de un ejemplo para que volváis a entender lo mismo, ¿vale?
Entonces, no os preocupéis si os perdéis porque no tiene sentido.
¿Qué es TypeScript y por qué es importante?
A ver, TypeScript, para el que no lo sepa, es simplemente, así de claro, JavaScript con una sintaxis para tipos.
¿Qué quiere decir esto?
¿Qué quiere decir esto?
Pues que TypeScript no deja de ser un superset de JavaScript.
Si tú tienes código de JavaScript, debería, debería funcionar en TypeScript.
Fíjate, así de fácil te lo voy a comentar.
Imagínate, esto sería, esto sería, por ejemplo, vamos a ponerlo de color, es que no se puede poner amarillo.
Imagínate que es este, ¿vale?
Esto sería JavaScript.
JavaScript.
Pues, ¿qué es lo que es TypeScript?
TypeScript es una cosa que está por aquí, que está por acá y que por suerte, pues está por debajo.
Esto sería TypeScript, ¿vale?
Incluye todo lo que tiene JavaScript, pero aquí tenemos TypeScript, que lo que hace es añadirle tipos, tipos estáticos a JavaScript.
Esto sería, esto sería TypeScript, ¿vale?
Un lenguaje de programación que lo que hace es utilizar de base JavaScript, lo incorpora, es totalmente compatible con JavaScript
y lo que hace es añadir tipos estáticos.
Esto es súper importante porque no es un lenguaje de programación separado o que no tenga que ver, sino que todo, cualquier código JavaScript que tú tengas, que sea válido, que tenga sentido,
debería funcionar también en TypeScript, a no ser que haya un tema de compatibilidad por número de versiones, una feature muy nueva o cosas así.
Lo importante de TypeScript es que no funciona en tiempo de ejecución.
¿Qué quiere decir?
Que lo que vamos a llevar, por ejemplo, al navegador es JavaScript plano.
Todo lo que hacemos con TypeScript es JavaScript.
Fijaos, aquí lo tenemos.
Vamos a abrir aquí el playground, aquí tengo un playground y aquí podéis escribir cualquier código de JavaScript, ¿no?
Por ejemplo, podemos poner aquí name, voy a hacer esto más grande y voy a cerrar, voy a cerrar esto, ¿vale?
Para que lo tengamos mejor, vamos a quitar, voy a quitar cositas, ¿vale?
De aquí, para que lo veamos mejor, voy a quitar este nav, vamos a quitar el customize, este que tampoco nos añade nada,
vamos a quitar este footer y así lo veréis más grande, ¿vale?
Bueno, ahora se me ha puesto eso ahí, ¿vale?
Pues aquí tenemos esto, ¿no?
Fijaos, a la izquierda lo que tenemos es TypeScript y a la derecha lo que tenemos, bueno, vamos a poner nombre, por ejemplo, no sé por qué, vale, nombre.
Aquí tenemos a la izquierda esto es TypeScript y a la derecha es JavaScript.
Esto sería el JavaScript que ha compilado.
O sea, que lo que llega justamente, lo que llega justamente siempre al navegador va a ser JavaScript, ¿ok?
No llega directamente nunca al TypeScript, el TypeScript se compila y se convierte a JavaScript.
¿Por qué deberíamos aprenderlo?
Primero, por popularidad.
La verdad es que hay un montón de popularidad de mucha gente está utilizando TypeScript.
En las últimas encuestas, y aquí lo podemos ver, en las últimas encuestas que tenemos del State of JavaScript,
que es una de las encuestas más importantes de la comunidad de desarrollo de programación web,
podemos ver que ya hay más gente que está desarrollando 100% TypeScript que no 100% JavaScript.
O sea, en la balanza, en la balanza, lo que estamos viendo es que se está moviendo hacia la derecha.
O sea, cada vez hay más gente que está escribiendo TypeScript.
¿Y sabes lo que quiere decir esto también?
Que si hay más gente escribiendo TypeScript, también hay más trabajo escribiendo TypeScript.
Y si este no es motivo suficiente, porque luego te puedo intentar convencer de las ventajas que tiene,
pero esto es el resultado ya.
El resultado evidente de que gracias a sus ventajas que tienen de experiencia de desarrollo,
cada vez más gente lo está utilizando.
Y por lo tanto, cada vez hay más necesidad de programadores que sepan utilizar TypeScript,
más proyectos que utilizan TypeScript,
y por lo tanto, más necesidad de que tú aprendas TypeScript.
Eso es lo que tenemos, ¿vale?
Lo segundo, obviamente, es que, aparte de que es muy sencillo de aprender,
al menos el hacer las primeras cosas,
es muy interesante las ventajas que te da.
¿Y cuáles son las ventajas que te dan?
Bueno, pues las ventajas que te dan son justamente
la razón por la que Microsoft, allá por 2012, lo creó.
Microsoft, por si no lo sabías, TypeScript es de Microsoft,
en 2012 creó TypeScript.
En realidad ya llevaba dos años trabajando en ello,
pero cuando lo publicó y lo liberó fue en 2012.
Y la razón fue clara.
JavaScript estaba empezando a ganar cada vez más protagonismo
en nuestro desarrollo del día a día, en nuestras aplicaciones web,
pero el problema es que para aplicaciones muy grandes,
JavaScript no era lo suficientemente o fiable,
o que le faltaban ciertas cosas de sintaxis,
y especialmente los tipos.
Le faltaba un grado de seguridad que hiciese que la mantenibilidad,
legibilidad y el poder trabajar en códigos base
que estuvieran hechos con JavaScript fuese mucho más seguro.
Y por eso Microsoft en 2012 publicó TypeScript.
Tiene la gran ventaja y también puede ser la gran desventaja,
y es que JavaScript es un lenguaje de programación,
JavaScript es un lenguaje de programación contipado, débil y dinámico.
¿Qué quiere decir esto?
¿Qué quiere decir esto?
Que sea débil, lo que quiere decir es que fijaos que nosotros,
si tenemos aquí una A y le pongo hola, ¿vale?
Hola.
Luego le podemos poner aquí un 2, punto.
O sea, estamos viendo aquí su naturaleza débil y dinámica.
Dinámica porque podemos cambiar los tipos de una variable.
Aquí empieza siendo un string,
aquí luego pasa a ser un number.
Y esto lo podemos ver muy claro porque hacemos un type of A
y aquí tenemos el number.
Así que ya podemos ver aquí la naturaleza dinámica de los tipos.
Y luego débil, porque además también no tenemos que poner aquí
ni siquiera si es un string, si es un número.
Directamente lo que está haciendo JavaScript en tiempo de evaluación,
es decir, ah, pues esto debe ser un string.
Así que el tipo es string.
Y luego aquí es un 2, vale, pues entonces es un number.
Esto lo cambia totalmente TypeScript.
Y lo que nos da TypeScript es justamente tener tipos fuertes
y además estáticos.
Lo que vamos a tener es que nuestras variables,
nuestras funciones y todo van a tener un tipo ya sea inferido,
o sea, que diga TypeScript, vale, yo sé que esto,
yo ya sé que esto es un string o lo que sea, ok, perfecto,
pero no me lo vas a poder cambiar porque si yo ya sé que esto es un string,
tú ahora no me pongas aquí un número.
Y lo podéis ver muy claramente en el Playground.
Si aquí os vais a la página oficial de TypeScript y aquí le dais a este botoncito,
veréis que tenéis dos opciones.
Una, utilizarla en la computadora y otra en el navegador.
Y es que, amigos, los requerimientos para seguir este curso son muy pocos.
Un navegador y Visual Studio Code.
Con eso vas a poder seguir este curso sin ningún tipo de problema, ¿vale?
Así que nos vamos aquí al Playground y aquí vamos a poder ver este mismo ejemplo
que habíamos hecho aquí, ¿vale?
Lo vamos a llevar a TypeScript y vamos a ver qué pasa.
Bueno, lo que puedes ver es que aunque parece, parece que funciona,
porque aquí tenemos este código,
fíjate que aquí a la izquierda nos está señalando esa A como que le pasa algo raro, ¿verdad?
Pues es que esta A, si te pones encima, tienes el error de TypeScript.
Y nos está diciendo que un tipo número no puede ser asignable a un tipo string.
Y eso es porque una vez que se ha dado cuenta TypeScript que esta variable tenía aquí justamente
la cadena de texto hola, significa que ya no le puedes volver a poner otro tipo de dato.
No podrías cambiárselo y ponerle aquí un número, ni un boleano, ni nada.
Ya no lo acepta, ¿vale?
Así que ya tenemos aquí que el tipado es fuerte.
Ya lo hemos tipado fuertemente y por lo tanto no tenemos la posibilidad
de cambiarle los tipos ni siquiera a cada una de las variables.
Otra cosa es que nosotros le indiquemos,
oye, que sepas que esta variable puede ser de más de un tipo.
Eso lo veremos más adelante.
Pero ahora mismo ya hemos visto que TypeScript nos evita o nos avisa
de que esto sería un error, ¿vale?
Que no podemos reasignar una variable y cambiarle el tipo como si nada.
Cosa que en JavaScript sí que se pueda.
Así que ya ves ahí una diferencia bastante importante entre TypeScript y JavaScript.
Ahora, ¿por qué usarlo?
Es evidente, ¿no?
Esto sería la típica, pero ¿por qué la gente realmente lo usa?
O sea, ¿no es lo suficientemente elástico JavaScript para hacer estas cosas y ya está?
La realidad es que una de las razones más exactas por las que se utiliza
es también por los cambios de tipos de datos que suele hacer JavaScript y cómo los trata.
Ya no solo porque sea un tipado débil y dinámico.
Por ejemplo, imagínate una función tan sencilla como suma y le pasamos a y b, ¿no?
Y aquí hacemos return a más b.
Fíjate que aquí TypeScript ya se queja de a y b.
Si esto lo ponemos en JavaScript no va a haber ningún problema.
Tú viendo seguramente esto no sabrías decirme qué es lo que va a ocurrir aquí.
¿Por qué?
Seguramente dices, ah, sí, me va a sumar dos números.
Pero tú eso no lo sabes hasta que no lo uses.
Hasta que tú no le pases aquí los dos números.
Y lo peor es que podrías pasarle, por ejemplo, esto, ¿no?
O sea, podrías pasarle un hola y tres.
Y fíjate lo que pasa.
Hola tres.
Y lo que te está devolviendo es una cadena de texto porque ya no hace una suma.
Hace una concatenación de dos cadenas de texto.
Y lo mismo, igual podríamos ponerle dos strings.
Y lo que tú creías que hacía esto, que era sumar dos operandos,
en realidad no es lo que está haciendo.
Así que, sobre todo por un tema de elegibilidad,
vas a ver que las anotaciones de tipos nos van a ayudar un montón.
Porque no es lo mismo ver esto así,
sin saber cuáles son los tipos de datos que tenemos aquí,
a indicar que aquí lo que tiene que aceptar son dos números.
Que, por lo tanto, esto no debería funcionar.
Y que vamos a poder saber qué es exactamente lo que está haciendo esta función.
Las anotaciones de tipos, que es una cosa que hace mucho tiempo
parecía que a lo mejor llegaba a JavaScript,
y ahora, en pleno 2023, se está proponiendo para añadir,
es cómo funcionan los tipos de TypeScript.
Es cómo le indicamos cómo son las variables, las funciones, los parámetros.
Básicamente, le indicamos los tipos que esperamos.
Una cosa que es muy importante, y que lo vamos a ver,
es el tema de cuánta documentación te vas a ahorrar.
Porque muchas veces en JavaScript, para indicar esto,
obviamente, necesitaría muchas veces utilizar o js.doc,
y decir, oye, el parámetro a es del tipo number, en este caso,
y esto es el operador que suma.
No hace falta esto, pero al menos sí que necesitaríamos lo otro, ¿no?
Tenemos que hacer esto.
Al menos para documentar, de alguna forma.
Lo bueno que tiene TypeScript con las anotaciones de tipos,
es que se está autodocumentando el código automáticamente.
Así que esto sería, básicamente, un poco y rápidamente,
por qué es interesante aprender TypeScript,
por cómo añade los tipos, y por qué usar TypeScript,
aparte del tema de que diferencia, ¿no?
El tipo dinámico y débil de JavaScript,
con el fuerte y estático que tendríamos en TypeScript.
Súper importante, y esto es muy básico,
y esto no lo explican mucho.
Y te lo tengo que explicar, porque si no,
no vas a entender muchas de las cosas que vas a ver hoy.
Pero es muy importante que entiendas esto.
TypeScript no funciona en tiempo de ejecución.
Mira, te voy a explicar una cosa.
Cuando nosotros estamos aquí y tenemos, por ejemplo,
vamos a hacer aquí una raya, ¿vale?
Y vamos a poner aquí compilación, compilación,
y vamos a tener aquí otra que es ejecución.
Y esta es la diferencia crucial y súper importante
que tenemos que tener respecto a cómo funciona
JavaScript y TypeScript, ¿vale?
Ejecución, compilación.
¿Dónde funciona TypeScript?
TypeScript funciona aquí.
Aquí es donde funciona TypeScript.
¿Dónde funciona JavaScript?
Funciona aquí.
¿Qué es lo que hacemos en este paso?
Lo que estamos haciendo es transformar
nuestro código TypeScript a JavaScript.
Porque el navegador no entiende,
no entiende nada de TypeScript.
¿Y por qué te explico esto?
Porque todos los tipos que vamos a hacer hoy,
todo lo que vamos a hacer sobre tipos,
todo no funciona en el navegador.
Y por lo tanto,
no vamos a poder chequear esos tipos
y no te va a ahorrar código.
Una de las grandes mentiras que se comentan
muchas veces, hay mucha gente que te dice
TypeScript te ahorra código.
Eso es mentira.
TypeScript no ahorra código.
De hecho, escribe más código.
Lo que añade es seguridad,
es robustez, es tranquilidad.
Eso es lo que añade.
Jamás os creáis a alguien que os diga
que se escribe menos código con TypeScript.
Porque es mentira.
O porque no ha entendido exactamente
cómo funciona TypeScript.
Lo cierto es que se escribe más código,
pero eso lo que hace es que sea
un código más robusto, ¿vale?
Entonces, para que veáis claramente esto,
fijaos en una cosa.
Cuando vosotros estáis en el Playground
y le decimos que tenemos este nombre
que es string, que es un string que es Miguel,
podemos poner nuestra primera anotación de tipos, ¿no?
Nuestras anotaciones de tipos las hacemos así.
Una vez que creamos aquí una constante,
ponemos dos puntos y le decimos cuál es el tipo.
String.
Fíjate que tú al poner este string,
aquí desaparece.
El cómo funciona en JavaScript este string
es como si fuese un comentario
que no funciona absolutamente para nada.
Y al compilarlo, lo único que hace
es añadir esta línea de useString,
que lo único que hace es utilizar
una versión un poquito más estricta
de JavaScript para ejecutar su código.
Pero esto es una cosa que es totalmente
nativa de JavaScript
y que la puedes utilizar hoy en día
con JavaScript sin necesidad de TypeScript.
Esto es una cosa que se hizo
para quitar muchos de los problemas
que tenía en JavaScript
y lo puedes ver en cualquier código JavaScript.
Así que este string que tienes aquí,
como ves, desaparece.
Todo lo que tiene que ver con tipos
desaparece.
¿Vale?
Súper importante.
Chequear tipos, validar tipos y todo esto
en tiempo de ejecución.
Cuando se esté ejecutando nuestro programa,
desaparece.
Así que no cuentes con ello,
como por ejemplo,
si vas a querer poner validación de tipos
con TypeScript de la respuesta de una API,
eso desaparece en tiempo de ejecución.
O, por ejemplo, validar el input de un usuario.
Eso, en TypeScript,
cuando va al usuario,
eso desaparece.
¿Vale?
Súper importante que lo tengáis en cuenta
porque es que si no,
esto os puede volar un poquito la cabeza.
Una de las mejores herramientas
que tenéis para utilizar TypeScript
es Visual Studio Code.
Visual Studio Code es un editor de código,
también de Microsoft,
que es de sobra popular,
que si no lo tienes,
te lo recomiendo mucho,
y que además ha sido desarrollado con TypeScript.
O sea, sus bases están hechas con TypeScript.
De hecho, curiosidad,
el propio TypeScript está desarrollado con TypeScript.
Y esto es algo muy común,
que un lenguaje de programación
se pueda programar con el propio lenguaje de programación.
Es un poco raro,
pero TypeScript está desarrollado con TypeScript.
Y Visual Studio Code
también está desarrollado con TypeScript.
Si no os creéis el tema
de que TypeScript está hecho con TypeScript,
podéis ir al GitHub de TypeScript, ¿vale?
Y buscarlo.
Podéis buscarlo.
Podéis ver aquí, lenguajes, TypeScript 99.8.
Y este es el repositorio de TypeScript.
O sea, TypeScript está escrito consigo mismo.
Es bastante, es muy típico, es muy habitual.
Bueno, dicho esto,
esto sí que es una curiosidad muy chula.
Dicho esto,
os recomiendo mucho que os instaléis Visual Studio Code.
Yo ya lo tengo instalado
y es el que voy a utilizar para enseñarles los ejemplos.
Y te voy a explicar
por qué te recomiendo tanto
que utilices Visual Studio Code.
Mira, al abrir un editor de Visual Studio Code,
todo el código que vas a utilizar aquí,
una vez que tú escribas,
¿vale?
Vamos a hacer esto más grande.
Igual no tan grande.
Vamos a poner que esto es TypeScript, ¿vale?
Y una vez que lo tienes,
fíjate que ya empieza a quejarse
de que const, name, no sé qué.
Este error es bastante interesante
porque fijaos que dice
no se puede redeclarar el bloques code variable name.
Name es un nombre protegido
que está en el window,
o sea, window.name existe.
Por lo tanto, name en el bloque,
o sea, en la raíz de tu fichero,
no lo podrías hacer.
Pero vamos a poner, por ejemplo,
persona para que se deje de quejar.
Bueno, pues ya tendríamos esto.
Y fíjate cómo es la integración
que si tú te pones encima
de persona,
ya nos está diciendo el tipo,
aunque aquí dice que es Miguel
y ya está.
Y ya tendríamos aquí
todos los errores
que os comentaba de TypeScript, ¿vale?
Si tú pones let persona
y le intentas poner el 2,
pues ya veis que dice
estos son errores de TypeScript
que son nativos.
Bueno, ¿veis este error?
Que pone TS2322.
Type number,
esto es el error de TypeScript,
o sea, que Visual Studio Code
ya tiene TypeScript instalado,
no tenéis que hacer nada más
y ya lo tenéis ahí.
También, por supuesto,
también funciona con objetos
y en los objetos de JavaScript,
los objetos son como para
describir un objeto del mundo real,
fíjate, pues name,
podemos poner PP
y el age de 30,
lo interesante que ya empieza
a darnos TypeScript,
aunque fíjate que todavía
no ha escrito un tipo, ¿eh?
Es que con la inferencia de datos,
¿vale?
Cuando tú le das al punto,
ya es capaz de decirte
las propiedades que tiene.
No sé por qué ahora no me salen,
pero si nos ponemos encima,
ves, ya detecta
cómo es ese objeto
y te dice que tiene
el nombre y la edad.
Si tú intentas acceder
a cualquier otra cosa,
ves, te dice que esta propiedad
no existe.
O sea, aquí ya estás viendo
que sin escribir ni una línea
de TypeScript,
simplemente JavaScript,
pero utilizando el compilador
de TypeScript,
ya tenemos un montón de errores.
Y a esto se le llama inferencia.
Inferir lo que quiere decir
es que TypeScript
es capaz de observar
cómo es el objeto
y decirte, pues,
su forma.
Y te dice, ah, vale,
pues esta es su forma.
Es un objeto que tiene
la key name,
que es del tipo string,
y el age,
que es del tipo number.
Y además,
si intentas acceder
a una propiedad que no existe,
te lo voy a decir.
Y ya nos está dando
un autocomplete
totalmente gratis.
Fíjate,
bueno,
ahora no sé por qué,
porque hace un momento
me estaba saliendo
y ahora otra vez
no me sale.
Persona, punto,
bueno,
no sé por qué no sale,
pero ves que si pongo A
sí que me aparece aquí el age
y si pongo aquí name,
pues también me aparece
y aquí no se me queja,
¿vale?
Los tipos básicos
que tienes en TypeScript
son los todos
los que necesitas,
obviamente.
Por ejemplo,
¿cuáles son los tipos básicos
que teníamos en JavaScript?
Pues tenemos strings,
number,
null,
undefined,
bolean,
todos esos los tienes,
¿vale?
No funciona el control space,
no funciona.
O sea,
ya lo he intentado,
ya sé que funciona
con control space,
pero es que no lo hace.
Mira,
control space,
no sé por qué no lo pilla,
pero a veces sí que sale,
no sé por qué no lo hace.
En fin,
no sé si es que está
el atajo
está hecho mal
o lo que sea.
¿Podría mencionar
las extensiones recomendadas
en Visual Studio Code?
Mira,
solo os recomiendo
una extensión
en Visual Studio Code,
no necesitáis nada más.
De TypeScript
hay una extensión
que mejoran los errores
que os dice,
que esa es la que os recomendaría,
que es TypeScript Error,
a ver si encuentro,
error,
este,
Pretty TypeScript Errors,
es la única extensión
que os recomiendo
y es totalmente opcional,
¿vale?
Es esta que os recomiendo.
Esta está muy chula
porque lo que os va a decir
es el error
os lo va a dejar
bastante más bonito
y lo vais a ir viendo
constantemente
en mi código,
¿vale?
Iréis viendo en mi código
cómo va apareciendo
esto más bonito
y esta es la extensión
que utilizo.
Pero por lo demás
ya está, ¿eh?
Ya está.
Si ponéis persona
y yo qué sé,
pongo aquí esto,
vais a ver
que si nos ponemos encima,
aparece aquí
como la forma,
la de arriba sería
la forma oficial
y la de abajo
sería la forma bonita,
¿ok?
Bueno,
pues lo que os decía,
los tipos básicos,
tenéis un number
que sería así,
podéis poner también
los números
con el dos puntos number
si queréis poner
la anotación vosotros.
Una cosa que ya os digo
es siempre que podáis
en TypeScript
hay que intentar
evitar
escribir
tipos.
En TypeScript
tenéis que intentar
escribir
los menos tipos
posibles.
Así que todo lo que puede
hacer automáticamente
TypeScript por vosotros,
pues dejáis que lo haga.
¿Qué más tenéis?
Pues obviamente
ya hemos visto
los strings,
tenemos también
los nulls,
¿vale?
Esto sería del tipo null,
lo tenemos aquí.
También tendríamos
el tipo undefined,
esto lo hace automáticamente,
también lo podéis poner
manualmente,
también tenemos
symbol,
vkint
y todo esto.
Ya veis cómo funciona
la inferencia de datos.
La inferencia de datos
es muy interesante
porque fijaos
que si tenemos
let a hola,
o sea,
tenemos aquí
una cadena de texto,
¿no?
Texto,
hola.
Si hacéis texto
punto,
ya automáticamente
al detectar
este autocomplete
mágico del editor
de Visual Studio Code,
viene gracias,
en realidad,
a TypeScript.
Ya sabe TypeScript
que esto es un string
y por lo tanto
te ofrece
todos los métodos
que puedes utilizar
con la cadena de texto.
Por eso también
es muy interesante
utilizar TypeScript
porque te mejora
la experiencia de desarrollo,
¿vale?
Ahora bien,
hay un tema
con TypeScript,
¿no?
Y es el hecho
de qué pasa
cuando no sabe
inferir un tipo,
¿no?
Cuando no sabe decir,
ah,
esto es un string,
esto es un number,
es no sé qué.
Bueno,
obviamente va a tener
un problema,
¿no?
En este caso,
si tú pones let a,
es incapaz
de saber
en este punto
cuál es el tipo
que tiene esto,
cuál es.
Si no,
no me está asignando nada.
Así que ahora
en este punto
no vas a ver
qué es lo que es,
¿no?
Y ahora
ves que le va a poner
un any,
el tipo any.
¿Qué quiere decir
el any?
El any,
mucha gente
lo entiende
como cualquiera,
que es la traducción
literal,
¿no?
Cualquier tipo
de dato.
Por lo tanto,
como esta variable
todavía no sabemos
qué es lo que tiene,
pues podemos entender
que podrá ser
un string,
un number,
lo que sea.
Pero otra cosa
bastante importante
que tenemos que entender
es que cuando utilizamos
el any,
en realidad
lo que le estamos diciendo
es algo todavía
más grave.
Y es que el any,
fíjate,
que cuando hago el punto
ya no me aparece
aunque le he asignado
una cadena de texto,
fíjate
que no me está haciendo
el autocomplete,
no me está diciendo
realmente
que sea tu uppercase,
no me está diciendo
que pueda realmente
utilizar
esos métodos
porque no lo sabe TypeScript.
Lo que le estamos diciendo
con el any
es mucho más
que cualquier tipo de dato.
Lo que le estamos diciendo
es que ignore
el tipado
de TypeScript.
Básicamente le estamos diciendo
oye,
ignora
el any value
si tú le pones
un tipo any,
ignóralo.
O sea,
ignora que esto puede hacer
un string,
un number
o lo que sea.
Ignóralo.
Aunque yo le ponga
un string,
no lo trates jamás
como un string.
Y aquí lo podéis ver
claramente
porque hemos perdido
el autocomplete
y no podemos,
no se nos va a quejar
de si existe,
¿ves?
No sabes si esa propiedad existe
pero no nos está dando el error.
Así que es súper importante
que entendáis
que el any
va mucho más allá,
mucho más allá
de realmente decir
que estamos hablando
de cualquier tipo.
Lo que estamos diciendo
es que ignore
el tipo,
¿vale?
Es que ignore
el tipo
y por lo tanto
ya veis los problemas
que vamos a tener,
¿no?
Otra cosa
y algo diferente
es uno que se llama
unknown.
Que el unknown
lo que le queremos decir
es que no sabemos
cuál es el tipo.
Entonces,
cuando decimos
que es unknown,
lo que estamos diciendo
no me sé cuál es el tipo
y fíjate que entonces
dice, bueno,
pues ten en cuenta
que any value
es del tipo unknown
y por lo tanto
no te puedes empezar aquí
a utilizar propiedades
que no sabemos
si existen.
Así que ten cuidado
con esto
porque si no
te puede petar,
¿vale?
Entonces,
ya hemos visto
un poco el any
que obviamente
el any
vamos a ver
que lo tienes que ir evitando
porque si no
lo que estamos haciendo
es como evitar
los tipados de datos
de TypeScript
ya sea variables,
funciones y tal.
El any digamos
que es una forma
de escapar
o de saltarte
el type checking
de TypeScript
y siempre,
siempre tienes que evitarlo.
De hecho,
hay una opción
que puedes activar
para evitar los any
aunque eso puede ser
bastante problemático
porque luego entonces
tienes que estar ahí
a full
de ir cambiándolos
y tal.
Pero así
te aseguras
de que todo funciona
correctamente,
¿vale?
¿Alguna cosa más?
Cuando creamos una variable
y le asignamos el valor
y estoy trabajando
con TypeScript
¿no es necesario
decir el tipo de variable?
No.
En ese caso,
no.
Por ejemplo,
claro,
luego vamos a ver
que con tipos
más complicados
sí,
por ejemplo,
un objeto.
Imagínate que tú tienes
aquí un objeto
que es así,
Miguel
y es age
y tenemos aquí 30.
En este caso,
sí que podemos hacer
persona.name
y esto va a acceder.
Pero imagínate
que esto es un tipo de dato.
Pues TypeScript
no es capaz
de saber
que este objeto
se refiere
a un tipo de dato.
Lo veremos más adelante
cómo lo tenemos
que hacer correctamente.
Pero para los tipos básicos
como por ejemplo algo así
no hace falta tiparlo.
¿Vale?
¿Midu puedes explicar
qué es inferir?
Bueno,
lo he comentado antes.
Inferir es que
sin necesidad de nosotros
decirle el tipo
¿vale?
Ves que aquí
le estamos diciendo el tipo
sin necesidad
de nosotros decirle el tipo
lo que está pasando aquí
es que ya
JavaScript
y TypeScript
es capaz de decirnos
que persona
es un string
porque le estamos asignando
un string
y está infiriendo su tipo.
Ya está.
¿Vale?
Obviamente
una de las cosas
más importantes
de JavaScript
y cualquier lenguaje
de programación
son las funciones.
Imagínate una función
que tengamos
vamos a poner
function
que sea saludar
¿no?
Y tenemos aquí el name.
Mira, de hecho
vamos a poner
vamos a hacer una cosa.
Vamos a hacer una cosa.
Vamos a hacer una cosa.
Voy a ir dejando
voy a ir dejando aquí
todos los ejemplos
que tengo
es que tengo por aquí
ejemplos escritos
de las cosas
que os quiero ir comentando
y voy a ir añadiendo
¿no?
Inferencia
inferencia
¿vale?
Y aquí podemos ver
por ejemplo
como A y B
infieren
que son number
sin decirle nada
¿vale?
¿vale?
C también
será number
si os fijáis
esto está muy chulo
porque la inferencia
también llega así
¿no?
Si tenemos A
que es un número
y B
que es un número
tenemos que C
por lo tanto
si haces A
que es un número
más B
que es un número
C
también es un número
y esto también
lo está infiriendo
está bastante chulo
el tema de la inferencia
¿no?
Luego también tenemos
que una vez
esto
lo que hemos enseñado
de los streams
¿no?
Una vez que tenemos aquí
pues una cadena
de texto
cuando tú tienes
la cadena de texto
pues ya te detecta
que funcionan
correctamente
que funcionan
correctamente
estos métodos
¿ves?
Ha detectado
que este método
sí que existe
en la cadena de texto
pero no puedes
ni utilizar esto
esto está mal
lo detecta
que está mal
y también detectaría
que está mal
si intentamos
por ejemplo
hacer un
si intentamos
acceder
a una propiedad
que no existe
¿no?
Propiedad inexistente
esto también petaría
lo del eni
ya lo hemos visto aquí
¿no?
que sería
encontrar
pues ponerle eni
aunque esto ahora
vamos a ver lo del eni
mejor
lo vamos a ver
con las funciones
de hecho
vamos a poner aquí
functions
y vamos con las funciones
las funciones
a ver
el tema de las funciones
las funciones
se escriben exactamente
igual que en javascript
tendríamos aquí
una propiedad name
console.log
vamos a poner hola
y ponemos el name
¿vale?
hasta aquí
todo bien
pero fíjate que ya tenemos
un problema
porque
la inferencia
de TypeScript
tiene
un límite
y el límite está
en que no hace magia
y esto es un error
también muy común
en que mucha gente
se cree que
va a funcionar
como si nada
fijaos que tengo aquí
una función
que parece que no hay
ningún error
pero si me pongo aquí encima
me dice
oye
que este parámetro
name
tiene implícitamente
el tipo
any
es mejor que le pongas
un tipo
que le pongas un tipo
porque si no name
yo no sé lo que es
y por lo tanto
como no sé lo que es
pues fijaos
que no puedo utilizar
tu uppercase
o sea no sé
no tengo autocomplete
ni tengo nada
así que le tenemos que ayudar
en este caso
a que sepa
lo que es
aquí podemos ver
el caso de uso
del any
en este caso
le estamos diciendo
que puede ser cualquier cosa
pero nosotros no queremos
que sea cualquier cosa
así que le vamos a decir
que el name
es un string
¿vale?
esto va a evitar
ciertos problemas
por ejemplo
si pones saludar Pepe
no habrá problemas
pero si pones saludar 2
pues ya nos va diciendo
oye
el argumento del tipo number
no es asignable
al parámetro string
fíjate la diferencia
que si no le ponemos nada
se va a tragar cualquier cosa
por defecto
las funciones
no tienen inferencia
si no tienen contexto
que lo verás después
luego te enseño un ejemplo
en el que sí que funciona
la inferencia
para los parámetros
de las funciones
pero en este caso
no tiene ningún contexto
y no sabe lo que es el name
le tenemos que ayudar
nosotros
¿vale?
para decirle
también
una cosa muy típica
con las funciones
en este caso
sería el hecho
de utilizar
objetos
¿no?
hay veces que queremos
utilizar objetos
como funciones
tenemos
nombre
y también pues
edad
imagínate tenemos
el nombre y la edad
y ahora
por lo mismo
queremos
hola
tienes
años
¿vale?
y tenemos
pues un objeto
aquí tenemos el mismo problema
tenemos un objeto
que el name puede ser cualquier cosa
el age cualquier cosa
y de hecho
si intentamos saludar
y aquí le paso un 2
y al age le paso el pepe
¿no?
pues esto se lo come
con patatas fritas
y esto pues se queda gustísimo
una cosa muy importante
es que en este caso
el editor
está configurado
de una forma
en la que
se está comiendo
el eni
¿ves?
el eni nos está quejando
pero seguramente
si copiamos esta función
en el playground
que teníamos aquí
¿vale?
vamos a editar
descomentar esto
vas a ver
que a lo mejor aquí
sí que
ah mira aquí
ah porque le he puesto el string
¿vale?
¿ves?
que aquí sí que lo pega
como un error
ves que aquí pone name
y te dice errores
y aquí para meter
name implicitly
has any type
¿vale?
fíjate en dos cosas
una
en este caso
sí que es un error
y dos
aún aunque sea esto
un error
aunque yo ponga aquí
tu lowercase
fijaos
yo voy a hacer esto
mal
porque obviamente
no podría hacer esto
esto debería petar
pero fíjate que
typescript
sería capaz
de compilarlo
o sea
me podría devolver
el javascript
esto es súper importante
por lo que decía antes
no te fíes
de que en tiempo
de ejecución
de tu código
te valide los tipos
porque no lo hace
los ignora
y aquí lo puedes ver
pese a que este código
está mal
que el name
es un any
o sea que puede ser cualquier cosa
que le pasamos un dos
que no tiene sentido
que transformamos el dos
en tu lowercase
que esto
no existe
typescript es capaz
de compilarte
y devolverte el código
y fíjate
tenemos el error
de que te dice
oye
name implicitly
has any type
esto es porque
hay una configuración
typescript tiene un montón
de configuraciones
tiene 10.000 millones
de configuraciones
y una de ellas
es el hecho de evitar
o no
los any
implícitos
así que si lo que quieres
es evitarlos
pues esta configuración
la tendrías que activar
ya os digo que siempre
siempre siempre
siempre que podáis
tenéis que evitarlos
ok
siempre que podáis
hay que evitarlos
muy bien
pues venga
vamos
vamos a seguir
teníamos el ejemplo
del objeto
que le pasa exactamente
lo mismo
el tema de
los
los any
ojo con esto
porque aquí
una cosa que mucha gente
diría es
venga pues añade
añadele
las anotaciones
de tipo
di que el name
es un string
y que este
es un number
vale
y ya está
vale
cuál es el problema
el problema
es que aquí
estamos encontrando
una coli
ay perdón
perdón
que no lo he enseñado
perdón
perdón
perdón
vale
estamos aquí
con el objeto
perdón
estamos aquí
con el objeto
vale
imaginad
que alguien me dice
bueno
estos son any
venga ponle la anotación
de tipos ya
que esto está mal
y alguien podría decir
bueno pues venga
le voy a hacer esto
esto está mal
vale
esto está mal
porque está entrando
en colisión
con la sintaxis
de javascript
porque la sintaxis
de javascript
te permite
renombrar
la propiedad
de un objeto
y esto lo que estaría
pasando es que name
lo está transformando
al nombre string
y age
al nombre number
mucho cuidado con esto
para poder tipar
correctamente esto
y a veces esto es una cosa
que puede ser un poco
lo que deberíamos
se podría hacer de dos formas
una
este objeto
es lo que queremos tipar
y por lo tanto
dos puntos
name
string
age
string
vale
esto sería una forma
y fíjate que ahora sí
se nos está quejando
lo que estamos diciendo es
el tipo de este objeto
dos puntos
y le ponemos la anotación
de tipos
el name es un string
el age es un string
esto sería una forma
de hacerlo
y ahora sí los tipos
ya nos está avisando
de hecho ahora le ponemos
aquí bien este
ahí
este en lugar de string
es un number
vale
y este también se está quejando
le ponemos el 2
y ahora sí que está bien
vale
otra forma que podríamos hacer esto
persona
dos puntos
quitamos esto
y lo que le vamos a decir es
vale
lo que le va a recibir aquí
como parámetros
persona
y persona
la anotación de tipos
es que
tiene un name string
y un number
lo malo
es que esto te obliga
a sacar entonces
name
y age
de persona
vale
pero lo podrías hacer así también
ok
así que
lo mismo
lo mismo
podríamos hacer con las anotaciones
de retorno
esto sería como
los
los de tipos
y ahora
también
no solo los parámetros
los podemos indicar el tipo
también lo que devuelve
podríamos tener aquí
const
a
una
podríamos tener una función
mira vamos a poner aquí
function
saludar
vamos a poner lo mismo
vamos a poner
vamos a usar lo mismo
así como lo habíamos hecho antes
vale
console.log tal
imagínate que quiero
devolver la edad
que quiero devolver la edad
por suerte
por fortuna
typescript
sí que tiene inferencia
del tipo
que retorna
fíjate que si te pones encima
de saludar
nos va a decir
saludar
acepta
el name y el age
que tiene esto
y estos dos puntos
después de la función
te dice que devuelve un number
porque age
es un number
pero fíjate
si imagínate que tú
tienes aquí name
que le dices que es un string
y en otro
bueno
que no puede ser
username
vale
y username
vamos a asignarle
el saludar
del pepe
no sé qué
qué es lo que está pasando aquí
lo que pasa aquí
es que
este saludar
que está devolviendo
el número
ya no lo podemos
asignar al username
porque hemos dicho
que era un string
porque ya sabe
que saludar
devuelve la función
un number
pero fíjate
que no lo hemos dicho
absolutamente nada
de lo que devuelve
o deja de devolver
sino que automáticamente
typescript
ha detectado
que es un number
para nosotros decirle
qué es lo que devuelve
tendríamos que poner aquí
dos puntos
y decirle el tipo de dato
si queremos que sea correcto
con lo que hemos escrito
tendría que ser un number
pero si ponemos un string
fíjate que se va a quejar
y te va a decir
oye
que me has dicho
que era un number
o sea
me has dicho que era un string
y estás devolviendo un number
qué está pasando con esto
un ejemplo
todavía más bestia
de esto
para que veas
hasta qué punto
puedes tipar
es el tema de
utilizar funciones
como parámetros
si ya sabes
javascript
sabrás
que puedes utilizar
una función
como parámetro
vamos a utilizar
un arrow function
para que te vayan sonando
con arrow function
también
imagínate
que tenemos aquí
una función
y le pasamos
una función
como parámetro
y la función
devuelve la ejecución
de esta función
¿vale?
esto
lo que tenemos que hacer
es
say hi
function
y pasarle
la función
que queremos ejecutar
que teníamos el nombre
y esto
hace console.log
de
hola
voy a enseñarte
un poquito
para seguir esto
para que no te asustes
porque
si no
te vuelves loco
pero esto
amigos
amigas
esto es muy básico
esto es javascript
no es nada de
typescript
no es nada especial
es súper importante
que entiendas
que en javascript
las funciones
se le llaman
de primera clase
o son
first class citizen
lo que quiere decir
es que las funciones
en javascript
se pueden guardar
como variables
se pueden pasar
como parámetros
y esto es simplemente
un callback
un callback
de toda la vida
una función
que se ejecuta
dentro de otra función
¿vale?
entonces
tenemos aquí
una row function
que lo que recibe
como parámetro
es una función
y esta función
mira voy a quitarle
el return por ahora
para que lo veáis más claro
y esta función
se ejecuta dentro
pasándole el parámetro
miguel
ahora
cuando queramos ejecutar
el say hi
from function
lo ejecutamos aquí
y le pasamos
como parámetro
como argumento
o como parámetro
bueno
le pasamos
directamente
la función
y esta función
es la que le llegará aquí
¿vale?
esta función
que veis aquí
voy a hacer
un croquis
en un momento
esta función
esta función
es esta que llega aquí
¿vale?
esta función
es la que llega aquí
y este name
es el que recibirá
aquí
¿vale?
ahí lo tenéis más claro
entonces
dicho esto
hasta ahora esto
que bueno
pues más o menos
parece que funciona
esto está plagado
de enis
y de problemas
porque si lo miramos
por aquí
vais a ver
que tenemos aquí
fn
que si es eni
y este name aquí
que tiene eni
este lo podemos cambiar rápido
ponemos un string
y esto
fácil
pero esta función
también tendríamos que tiparla
un error muy común
es tipar las funciones
con function
¿vale?
utilizar function
o sea tú podrías decir aquí
esto es una function
pum
ya está
y no hay errores
esto funcionar
funciona
¿vale?
pero no está correcto
¿vale?
no está correcto decir
aquí lo que espero
es una función
¿por qué no es correcto?
porque fíjate que ahora
podríamos volver a llamar
say-function
y pasarle por ejemplo aquí
yo que sé
más random
o podemos pasarle una función
que lo que hace
pues es directamente
yo que sé
hacer otra cosa
otra cosa diferente
a lo que realmente
estábamos esperando
que hiciese
function es una forma
muy general
de referirte
a que recibe una función
es el any
de las funciones
y también por eso
lo tenemos que evitar
lo correcto
debería ser
pues
decirle exactamente
cuál es la función
que necesitamos
y en este caso
le podríamos decir
mira
vamos a hacer una cosa
para que lo veamos
más fácil
esta función
que le he pasado por aquí
la voy a sacar
y vamos a crear aquí
un say-high
y la vamos a sacar
a una constante
y ahora este
say-high-from-function
se lo pasamos
como parámetro
entonces
hasta aquí
parece que no hay errores
todo funciona bien
porque habíamos puesto
este function
y tal
vamos a quitar el function
ahora nos dice
function
es del tipo any
vale
¿cómo lo podemos arreglar?
pues tenemos que decirle
cuál es el tipo
de esta función
para tipar las funciones
se puede hacer exactamente igual
que como estamos haciendo
con números
con strings
o con lo que sea
así que ponemos
dos puntos
y le decimos
la función que yo espero
es una función
que tiene un parámetro
que se llama name
y que recibe un string
y que lo que devuelve
en este caso
podríamos decir
que devuelve void
porque no devuelve nada
en este caso
si devolviese el string
podríamos poner string
pero fíjate que
si le pongo string
se me queja
porque me dice
oye
es que el say-high
que es esta función
que tienes aquí
no está
no está
como pasando
la validación
de este tipo
porque me has dicho
que esto devuelve un string
y esto no devuelve nada
por lo tanto
o devuelves aquí un string
para que pase
¿ves?
el name es un string
o me tienes que cambiar
este tipo de aquí
y le he puesto
void
¿y qué es esto de void?
¿por qué void?
porque void
es cuando una función
no devuelve nada
no tiene un return
se le pasa
se le dice
que devuelve void
no devuelve nada
no tiene ningún return
y es bastante importante
muchas veces
indicarle el void
para saber que una función
no tiene un return
y esto puede ser muy útil
porque hay veces
que hay funciones
por ejemplo esta
que no requiere
devolver útil
o sea devolver nada
ni un undefined
ni siquiera el valor undefined
sino que simplemente
ignoramos
lo que devuelva
igual puede devolver
el 3
pero aunque devuelva el 3
fíjate
que sí que funciona
¿por qué?
porque lo que estamos diciendo
es que no nos importa
que no tiene
por qué devolver
absolutamente nada
a esta función
así que
le vamos a poner void
pero si queréis ponerle string
ahora mismo
para verlo más claro
y devolvéis el string
pues ya lo tendrías
pero esto es un ejemplo
para que veas
como de potente es
a la hora
a la hora
de pasarle
una función
también como parámetro
las funciones
no devuelven undefined
siempre de forma implícita
efectivamente
efectivamente
si le pones
eso es una cosa
que han arreglado ahora
en la última versión
que
si no le pasas nada
esto debería devolver
undefined
y de hecho esto
si pones aquí
return
o haces un return
directamente
debería funcionar
ahora no se puede funcionar
void
ves es que me pone
como que es void
porque
no sé por qué
pero se supone
que en la 5.1
habían arreglado esto
que ahora podías poner
porque si ponemos esto
debería funcionar
pero
ahora habían arreglado
se supone
en la 5.1
hacer esto
que esto debería funcionar
pero bueno
que si no devuelve nada
el tipo de devolver
es este
debería marcar error
si le pones void
igual le pones un return
no porque void
es un tipo de dato
que lo que indica
es que no te importa
lo que devuelve
o sea que no tiene por qué
devolver nada
y que si devuelve algo
tampoco te importa
así que sería un poquito eso
o sea es
va un poquito más allá
hay que tenerlo en cuenta
de que es como decir
no me importa lo que devuelva
vale
bueno esto era un ejemplo
ya os digo
que si hay veces que os perdéis
no os preocupéis
vale
si te pierdes por esto
no te preocupes
porque ahora
lo que vamos a hacer
es básicamente
pues volver a otro tema
que es un poquito más básico
e iremos un poquito para atrás
luego para adelante
para atrás y para adelante
así que no tengas miedo
si por lo que sea
en algún momento te pierdes
porque esto a lo mejor
dices
ostras todavía no sé
como pasar por parámetros
en javascript
vale pues no te preocupes
por ejemplo
lo de tipar arrow functions
pues tipar arrow functions
antes habíamos hecho
el ejemplo de la función
para tipar arrow functions
es exactamente lo mismo
¿no?
que habíamos visto
con la function
solo que
fíjate
que
el return type
el tipo que retorna
se pondría
dos puntos
number
pero ya os digo
que esto
siempre que podáis
evitarlo
porque esto lo puedo inferir
sin ningún tipo de problema
otra cosa
que podríais hacer
esta sería una forma
de tiparlo
y luego tendrías otra
bueno esta sería una
y de la otra
sería por ejemplo
restar
dos puntos
y así
¿vale?
return
serían dos formas diferentes
¿vale?
puedes tiparlas así
donde haces
const sumar
tipas los parámetros
aquí
dos puntos
y el tipo que retorna
o podrías hacer esto
const
restar
dos puntos
y le indicas
cuál es el tipo
de la función
y luego haces la función
utiliza la que tú prefieras
yo personalmente
me gusta más
la de arriba
porque
queda
todo como
en un solo sitio
¿no?
y aquí como que tenemos
dos partes
una el tipo
y otra la función
y como que me cuesta
un poquito más de leerlo
pero cualquiera de las dos
es válida
a la hora de
tipar
las arrow function
¿vale?
muy bien
nos faltaría una
un tipo
que puede devolver
una función
que sería
el never
¿vale?
¿qué pasa con el never?
imagínate que tienes una función
que lo único que hace
es devolver errores
y que si tiene un mensaje
¿ves?
pues hace un throw del error
¿qué pasa?
que esto obviamente
nunca va a devolver nada
jamás va a devolver nada
y por lo tanto
lo que le puedes decir
es que esto
nunca va a devolver nada
y por eso
le ponemos el never
pero
tampoco pasa nada
si
es uno
un poquito más avanzado
pero sobre todo
se utiliza para funciones
que sabes que nunca
van a devolver nada
para que no tengan
ningún tipo de problema
al intentar guardarte
una variable y tal
pero bueno
no es tan importante
te lo dejo por ahí
por si lo quieres saber
el never
y ya está
muy bien
ahora bien
os he dicho
antes
que las funciones
no tenían inferencia
¿cierto?
os he dicho que
os he dicho que
si tú haces función
sumar
a y b
esto
por defecto
no va a saber
que esto es un number
y esto es un number
no lo sabe
¿vale?
entonces
never y void
no son lo mismo
porque never
es que sabes
que nunca
nunca va a devolver
un valor
o sea que
nunca va a tener
un return
nunca va a hacer nada
y void
sería una forma
de indicar
que realmente
la función
puede devolver
un valor
pero es que
no te importa
realmente
que devuelva un valor
o no
y esto
lo que te permite
es que diferentes
funciones
te sirvan
o sea
a ver
vamos a ver
function
imagínate
log message
y le pasamos el message
con el text
y le vamos a poner void
¿vale?
imagínate que ponemos esto
pero si tú devuelves
si tú devuelves esto
no pasa nada
o sea
en este caso sí
porque necesitamos
al pasárselo por parámetro
esto es que no devuelve nada
¿vale?
o sea no devuelve nada
ya está
pero el never
es que sabes que nunca
nunca va a llegar
a devolver nada
nunca va a ejecutar
el return implícito
que hay aquí
¿sabes?
nunca va a llegar aquí
para que lo tengamos en cuenta
¿vale?
nunca va a llegar aquí
porque en un momento
antes
¿vale?
antes
vas a tener aquí
un throw
y por lo tanto
nunca va a llegar
a este punto
en el que te da igual
te da igual esto
esto sea
te da igual
esto sea el void
no devuelve
no devuelve nada
¿vale?
pero es que no va a llegar
nunca a un return implícito
¿vale?
porque el throw
no tiene un return
ni
o sea no es que no te importa
es que no llega al return
¿vale?
sería como un paso antes
y por lo tanto
es un never
no sé
¿se entiende?
nunca llega aquí
al return implícito
sé que se puede
puede costar
de entender
la diferencia
pero yo creo
que es muy claro
sobre el tema de
que si es un never
es porque haces un throw
y no dejas que termine
la ejecución de la función
¿no?
o sea
se ve muy claro
porque en el
en el never
sabes que nunca va a terminar
de ejecutarse la función
ya está
esa es la diferencia
con el void
el void va a llegar al final
va a llegar hasta el final
solo que no devuelve nada
a la función
o sea se va a terminar
de ejecutar
ya está
o sea es como que
el never
nunca va a terminar
piensa como si nunca
fuese a terminar
si os he enseñado ya
casos reales
os he enseñado ya
casos reales
el throw message
este
este error
esto es súper real
estos son casos reales
el throw error
que si tienes un mensaje
por ejemplo
si el message
si tienes message tal
esto es un error
esto es real
esto es súper típico
esto es súper típico
y lo tienes para cualquier handler
que vayas a hacer
que vayas a hacer
que tengas un error
y que vayas a hacer throws
y vayas a hacer lo que tú quieras
interrumpir la ejecución
o hacer un process exit
por ejemplo
de salir de la función
si hay algún error
pues eso sería para el never
ya está
¿vale?
muy bien
os he dicho antes
que no había
inferencia de tipos
con las funciones
¿vale?
vale
pues el tema
imaginad que tenemos
un array
que vamos a ponerle
yo que sé
speedy
que tenemos hulk
que tenemos los avengers
y tal
¿vale?
os he dicho antes
que no había inferencia
de tipos con las funciones
y que teníamos que ponerle
para evitar el any
pero resulta
que a veces sí
porque depende
del contexto
en el que creas
una función
y eso pasa
con las funciones
anónimas
según el contexto
por ejemplo
si nosotros tenemos
un array
de strings
de avengers
y le ponemos
avengers.foreach
y de cada avenger
queremos hacer
console.log
avenger.
pues fíjate
que tenemos aquí
el autocomplete
y me ha detectado
que puedo hacer
el uppercase
¿qué significa esto?
pues que typescript
sabe que avenger
es un string
¿ves?
sabe que es un string
¿y cómo lo sabe?
si esto es una función
anónima
que ni siquiera
ni siquiera
la hemos tipado
ni nada
pues lo que está haciendo
es la inferencia
gracias a
que estamos utilizando
avengers
con el método
for each
lo que está pasando
es que dice
ah vale
pues entonces
como estás utilizando
un array de strings
sé que aquí
te va a llegar
un string
así que hay veces
ciertos casos
esto también lo podríamos hacer
si no con una
arrow function
también lo podríamos hacer
con una función normal
y funcionaría
exactamente igual
también aquí sabe
que esto es una cadena
de texto
o sea que hay veces
que la inferencia
sí que funciona
o sea tenlo en cuenta
porque en este caso
sí que habría
inferencia de datos
¿vale?
esto
esto pasa
con otras funciones
no solo con el for each
con el punto map
también pasa
con todas las funciones
de arrays
pero también
incluso con bibliotecas
te puede pasar
¿vale?
que es capaz de inferir
gracias a los genéricos
que veremos después
vamos a hablar ahora
de los objetos
los objetos
ya hemos visto
que tienen inferencia
de datos
o sea si tú haces
un objeto como este
pues obviamente
haces giro
punto
y ya tenemos aquí
el autocomplete
el age y el name
o sea ya sabemos
cómo es esto
si tú intentas
ahora mismo
acceder
y cambiar
por ejemplo el name
y ponerle un número
pues se va a quejar
porque dice
oye que el name
era un string
y ahora me dices
que es un número
o incluso
se va a quejar
si por lo que sea
tú intentas aquí
decirle
ah no pues ahora
le voy a poner aquí
una propiedad nueva
que sea el poder
y le pongo 100
fíjate que te dice
oye
es que esta propiedad
no existe
en este tipo
que tú has creado aquí
esto es porque nosotros
nos hemos fiado
de la inferencia
y le hemos dicho
oye no
cuando yo creo
un héroe
tiene justamente
estas propiedades
por lo tanto
si intento acceder
o crear una nueva
pues no me puedes permitir
ni leerla
porque no existe
ves
me dice
oye
esta propiedad no existe
ni siquiera crearla
porque no existe
nosotros le hemos dicho
que no la podemos crear
esto es súper importante
a la hora de trabajar
con TypeScript
porque nos está haciendo
como un contrato
de nuestros objetos
que suele ser el error
más común
que muchas veces
cometemos
con JavaScript
que ponemos ahí
a crear cualquier cosa
y la liamos
obviamente
podríamos crear
una función
create hero
para crear
héroes
teníamos aquí
el number
y tal
y hacer un return
con el nombre
y el age
vale
aquí con esto
podríamos crear héroes
pero fíjate
que el problema es
vale
yo creo un héroe
create hero
y digo
Thor 1500
vale
aquí tengo
a Thor
pero
el tipo
de este hero
es el mismo
que este de aquí
no lo sabemos
o sea
sabemos que el objeto
sí que parece el mismo
o sea
estamos devolviendo
y haciendo exactamente
lo mismo
pero es un poco rollo
el hecho de que
aquí fíjate
que tenemos exactamente
los mismos tipos
que aquí
que aquí
no soy capaz
de saber si Thor
es realmente
de este mismo tipo
sé que tiene las mismas propiedades
el objeto
pero no sabemos
si es del mismo tipo
así que aquí
entra una cosa
que se llaman
los type alias
y es una de las cosas
más potentes
y más interesantes
que tiene justamente
TypeScript
lo que vamos a hacer
es crear
un type
nuestro propio
que vamos a definir
cómo es un héroe
vamos a decirle
que un héroe
es un objeto
que tiene dos propiedades
un string
y también tenemos
un number
vamos a quitar esta coma
y por lo tanto
ahora le podríamos decir
que este giro de aquí
es un giro
¿vale?
esta variable giro
es giro
muy importante
cuando creas
tipos tuyos propios
siempre se hacen
en Pascal case
¿vale?
no se hacen
ni en minúscula
no se hacen
en camel case
giro type
no se pone una t
aquí al principio
se hacen
Pascal case
¿vale?
y en este caso
ahora le podemos decir
oye
pues
este es el tipo de giro
por lo tanto
este giro
es del tipo giro
y lo tienes aquí
y es más
lo mejor
es que puedes decir
que este create hero
fíjate que ahora
me dice que devuelve
un objeto
con name y string
age y number
pero nos gustaría
que el tor
no fuese un objeto
sino que fuese
de nuestro tipo
porque si el día de mañana
nosotros añadimos
algo nuevo aquí
nos gustaría
que lo tuviese el tipo
es más fácil
de trabajar
teniendo este tipo
que no estar trabajando
con el objeto
en todos los sitios
así que le podemos decir
que create hero
le vamos a decir
que devuelve
el giro
y ahora si vamos a tor
podemos ver
que ahora pone hero
fíjate la diferencia
entre
que dice que devuelve
un objeto
a decir que devuelve
nuestro tipo
que ya lo está
como encapsulando
en un contrato
en el que nosotros
le estamos diciendo
cómo es este objeto
lo bueno de esto
es que si ahora
yo de repente
digo no
pero es que también
quiero
que nos diga
si el héroe
es tan activo
fíjate que se me queja
porque me dice
oye
estás devolviendo esto
estás devolviendo
is active
un boleano
y resulta
que esto
no está
en este tipo
por lo tanto
algo tienes que hacer
para arreglar esto
lo vamos a hacer
vamos a hacerlo
pero antes
otra cosa interesante
que podemos hacer
para que veas
la potencia
que tienen los tipos
es los parámetros
fíjate que ahora mismo
en los parámetros
tengo el name
que es un string
el age
que es un number
pero son justamente
los mismos parámetros
que tenemos en el tipo
bueno
pues podemos decirle
que le queremos pasar
un giro
que esto es del tipo giro
y que devuelve un giro
sacamos el name
y el age
del giro
¿vale?
y ya está
estamos extrayendo
el name
y el age
del giro
y ahora mismo
solo devolvemos un objeto
con el name
y el age
exactamente igual
lo que pasa es que ahora
aquí en el crew
giro
fíjate que ahora se me queja
porque dice que ahora
solo espera un argumento
y le he pasado dos
así que en este giro
¿qué pasa?
que lo que espera
es un objeto
así que le podemos pasar
aquí el objeto
y le decimos
vale
el name
store
y el age
1500
hasta aquí alguien dirá
oye esto está muy bien
pero no es un poco tontería
cuando creas un héroe
pasarle el héroe
y devolver el héroe
tienes toda la razón
y no te preocupes
porque vamos a ver
cuál es
cómo esto
lo vamos a ir cambiando
para poder separar mejor
estos tipos
de input
a lo que devuelve
o sea lo que le pasamos
para crearlo
y a lo que devuelve
así que vamos a comentar esto
y vamos primero
a explicar
los optional properties
¿vale?
teníamos esto
lo primero que queremos hacer
es que resulta
que los héroes
queremos saber
si están en activo
porque hay algunos
que se están retirando
como Iron Man
el pobre pues
lo ha dejado
vamos a ver
cuáles están en activo
pues fíjate que he puesto aquí
como una interrogante
¿por qué?
bueno si yo no le pongo
el interrogante
empieza a haber un montón
de problemas
¿por qué?
porque en mi tipo
de repente
he añadido una nueva propiedad
boleana
y fíjate
todos los errores
que acaban de aparecer
¿por qué?
porque este objeto
no tiene la propiedad
aquí
estamos devolviendo
name y edge
pero no estamos devolviendo
el isActive
aquí también se me está quejando
porque no estoy pasando
por parámetro
el isActive
o sea
la hemos liado
parda
la hemos liado parda
de golpe
¿no?
lo que está pasando aquí
es que
hemos añadido una propiedad
que necesitamos
que sea opcional
así que le decimos
oye no
esto es opcional
que si está bien
pero si no está
no pasa nada
o sea que
si está
tiene que ser un boleano
y si no está
pues no está
ya está
fíjate que solo con esto
ya lo hemos arreglado
y lo bueno
es que ahora podríamos decir
oye
cada vez que creamos un giro
pues voy a hacer
que tú me pasas el nombre
y la edad
y yo te lo devuelvo
y como lo estamos creando
hombre
si lo estamos creando
yo quiero pensar
que
es tan activo
¿vale?
está empezando ahora
su carrera de héroe
por lo tanto
por defecto
isActive
está true
y ahora
si en Tor
miramos el isActive
y esto
lo ponemos en un console.log
esto
nos devolvería
true
¿vale?
esto lo tendríamos en true
muy bien
hasta aquí
está bien
pero
no es raro
que un héroe
no tenga ID
porque a mí me parece
un poco raro
que los héroes
no tengan ID
bueno pues
vamos a hacer algo
vamos a poner aquí
que nuestros héroes
tengan ID
vamos a poner ID
y vamos a poner
un number
la hemos vuelto a liar
porque obviamente
nos dice aquí
fíjate todos los problemas
que tenemos por aquí
vamos a poner
que es opcional también
esto lo arregla
pero resulta
que nuestros héroes
ahora mismo
no tienen ID
o sea
aunque yo
si voy aquí
a tor ID
aunque ves que me dice
es number
o undefined
claro
le he dicho que es un
es un número
pongamos que yo digo
vale
ID.toString
porque quiero transformarle
un string
fíjate que ha pasado
automáticamente
TypeScript
ha detectado
que ID
puede ser undefined
y por lo tanto
cuando estaba escribiendo
fíjate
hago .toString
como quiero transformar
este número
a un string
y automáticamente
me ha puesto
este simbolito
que es el
optional chaining
el encadenamiento
opcional
que lo que hace
es decir
oye
si Tor
tiene una ID
entonces
voy a ejecutar
este método
pero si no tiene una ID
esto
lo que voy a hacer
es evitar ejecutarlo
y por lo tanto
esto no lo va a ejecutar
vale
es una forma
de asegurarse
de preguntar
sin necesidad
de hacer un condicional
si esto existe
antes de continuar
pero bueno
esto está muy bien
pero sabes que pasa
que como pasa
en todas las empresas
hay alguna persona
que resulta
que le gusta
jugar con fuego
un problema
que tenemos
muchas veces
en
en
en JavaScript
es la mutabilidad
¿no?
imagínate que alguien
un poco torpe
dice
ostras
Tor ID
pues yo le voy a poner aquí
el que me da
me da la gana
el que me da la gana
¿vale?
dice vale
el que me da la gana
o le voy a poner el
bueno
como es un número
le voy a poner el
le voy a poner el número
que me da la gana
¿qué ha pasado aquí?
lo que está pasando aquí
es que alguien
acaba de romper
nuestro Tor
porque ha mutado
el objeto
que hemos creado aquí
lo está mutando
imagínate
que alguien
lo quiere utilizar
y
bueno
¿y ahora qué?
¿cómo podemos evitar
que esto ocurra?
pues muy fácil
lo bueno de los tipos
es que también tenemos
algunas propiedades
que pueden acompañarle
como por ejemplo
le podemos decir
que la propiedad ID
del tipo giro
que sea solo de lectura
le podemos decir
esto
solo es de lectura
y fíjate lo que pasa
que si tú intentas ahora
acceder
y reescribir
la propiedad ID
te va a decir
oye
no puedo asignar esta ID
porque solo es de lectura
y así ya te estás evitando
muchos problemas
no es
no es
que esto
de repente
sea inmutable
que es diferente
no estamos haciendo
que sea inmutable
pero sí que estamos haciendo
que si alguien
intenta acceder
y escribir
tenga un error
en TypeScript
¿y por qué no es inmutable?
alguien se preguntará
no es inmutable
porque de nuevo
y por favor
tened esto
súper súper súper súper
súper en cuenta
si ponemos esto aquí
fijaos
fijaos
vale
voy a quitar esto
fijaos
que
este código
al compilarse
se queda en esto
todo el código
que veis a la izquierda
de TypeScript
se queda en este código
a la derecha
de JavaScript
y este código
no está haciendo
que el código
sea inmutable
sino que
mientras desarrollamos
nos avisa
con un error
de que no podemos
hacer esa operación
pero no ha convertido
esto en algo
inmutable
¿vale?
súper importante
porque muchas veces
se confunde
y para hacerlo
inmutable
realmente
tendríamos que utilizar
código JavaScript
deberíamos hacer
por ejemplo
utilizar el object
object freeze
con el object freeze
podríamos hacer
que este código
no fuese editable
¿vale?
y eso sería ya
otra cosa
pero
tened en cuenta esto
¿no?
fijaos que además
si he quitado
fíjate que he quitado
el read only
pues TypeScript
se da cuenta
que tú has hecho aquí
un object freeze
y Tor
ahora es un
read only giro
y te da
el mismo error
pero fíjate en la diferencia
¿vale?
para que lo veas clarísimo
porque
me sabe muy mal
pero mucha gente
que aprende TypeScript
no entiende
que no funciona
en ejecución
y se cometen
muchos errores
por esto
cuanto más aprendes
de TypeScript
con esa concepción
peor
fijaos la diferencia
aquí tendríamos
el código de JavaScript
con un objeto
que sigue
en este caso
hemos hecho
que no se pueda mutar
con el object freeze
y aquí está el código
de JavaScript compilado
pero en este
que habíamos puesto
con el read only
no está aquí
el object freeze
¿vale?
así que ahí tienes
una diferencia clave
de que pese a que
en ambos casos
TypeScript
lo detecta
como algo
de solo lectura
fíjate
que la diferencia
en código
de JavaScript
está presente
¿ok?
así que no cometáis
ese error
pues ahora que tenemos
esto
vamos a hacer una cosa
porque
¿qué pasa
si queremos crear
el id
que tendría más sentido
crearla dentro?
vamos a hacer
que se pueda crear
dentro del héroe
dentro de la función
en lugar de
hacer esto
de pasarle todo el giro
no sé qué
por ahora
vamos a dejar opcional
luego lo vamos a hacer bien
¿vale?
pero vamos a hacer
que la id
que tenemos por aquí
vamos a hacer
id
crypto.random
uid
o sea vamos a crear
un uid
esto lo vamos a quitar
por aquí
¿vale?
o sea que la id
la vamos a crear dentro
hasta aquí
bien
pero
aquí hay un problema
y esto está muy interesante
para explicarte
una cosa que se llama
template union types
que esto sí que te va a volar
la cabeza
porque es una de las cosas
muy tremendas
que tiene typescript
y que lleva
a otro nivel
la experiencia de desarrollo
fíjate que yo he puesto aquí
que el giro
tiene una id
que es de tipo string
o sea que es una cadena de texto
normal y corriente
¿vale?
bueno
voy a hacer esto
y le he puesto que la id
la estamos creando
con un random uuid
no sé si has visto alguna vez
un random uuid
¿vale?
pero un random uuid
tiene este formato
tienes aquí un string
guión
string
guión
string
guión
string
guión
string
¿vale?
¿te imaginas
que pudiéramos
crear un tipo
que se asegurase
que lo que estamos haciendo
asignando como id
sea esto?
si el random uuid
esto es algo nativo
esto es nativo
de la plataforma web
pues
¿qué pasaría
si pudiéramos hacer un tipo
que no fuese
que no fuese un string
sino que fuese más allá
y que nos detectase
que estamos siguiendo
al menos
esto que
string
guión
string
guión
string
guión
¿no?
pues lo vamos a ver
esto es lo que se le llamaría
un union
un template
union type
vamos a crear aquí
un hero id
y para que veas
que podemos crear
otro tipo
no solo tienen que ser objetos
vamos a crear aquí
por ejemplo
una cadena de texto
y le vamos a decir
que tenemos
un string
que luego tenemos aquí
otro string
son cinco
¿no?
pues cinco
vamos a crear una id
que tenga que tener
este estilo
y ese es
cadena de texto
guión
cadena de texto
guión
cadena de texto
y este hero id
se lo asignamos aquí
así que ya puedes ver
la creación de tipos
para usarlo dentro
de otros tipos
ahora
en esta id
lo que tenemos aquí ya
es que
este id
si miramos aquí
este id
tiene este formato
si yo le intento decir
no
voy a pasarle
un dos tres
¿qué pasa aquí?
que se me está quejando
se me queja
porque me dice
oye
me estás intentando
asignar una cadena de texto
pero tú la id
me has dicho
que la cadena de texto
es diferente
que tiene que ser
cadena de texto
guión
cadena de texto
guión
cadena de texto
y por eso
y por eso
si hago esto
un dos tres
un dos tres
un dos tres
un dos tres
esto
si que se lo traga
no llega a validar los datos
o sea
tiene sus limitaciones
¿vale?
no llega a validar
que puedas decirle
es un uuid
que no me extraería
que en el futuro
se puedan hacer
pero si
que podemos decirle
el tipo de cadena de texto
que queremos
y ahora te voy a enseñar
otro ejemplo
que parece una tontería
pero que es súper potente
¿no?
un error muy común
que tenemos
¿vale?
tipo
type
union
template
union
types
es lo que estamos haciendo
un ejemplo muy típico
no sé si os ha pasado
alguna vez
trabajando con javascript
es que tenéis cadenas de texto
por ejemplo
para hacer colores
¿no?
hacéis colores
hexadecimales
hexadecimales
y resulta
que ya no os acordáis
color 2
ya no os acordáis
si
eran con almohadilla
o eran sin almohadilla
¿sabes?
está guardando los valores
con almohadilla
o sin almohadilla
¿cómo era?
¿sabes?
no me acuerdo
bueno
entonces
ya veo por qué
es bueno
title script
bueno
esa era la idea
hombre
para que veáis
este tipo de cosas
esto a mí me ha pasado
un montón de veces
¿no?
pues una cosa
que puedes hacer
justamente
es imagínate
hexadecimal
color
y algo tan sencillo
con esto
puedes decir
no
es que el hexadecimal
color
siempre lo guardo
con almohadilla
pues lo que puedes hacer
aquí es decir
esto es un color
que es hexadecimal color
y dice no
no
no
porque el color
fíjate
que me has dicho
que tiene que ser aquí
con un string
y la almohadilla
y esto no tiene almohadilla
y en cambio este
pues este sí que tiene
almohadilla
o sea el color 2
sí que sería correcto
y el 2 no
almohadilla es esto
no sé
o hash
si le queréis llamar en inglés
hash
almohadilla
gato
numeral
no me acuerdo
pues hash
este que no tiene hash
ahora se queja
esto es por lo que es tan interesante
los template union types
y que aquí habéis visto
que nos ha servido
para validar un poco
para validar un poco
el tema
de las ideas
de nuestros
héroes
has explicado
dos opciones
de indicar
el tipo de un objeto
que pasas por parámetro
de una función
¿qué opción es más correcta?
no hay una opción más correcta
y yo ya he dicho
la que a mí me gusta más
entonces la que queráis
¿es objeto type hero?
¿no lleva comas
para separar cada propiedad?
no es necesario
es opcional
de hecho
yo os recomiendo
que no los pongáis
son opcionales
¿vale?
midud
una pregunta
¿todo esto se va a subir un repo?
sí
os subiré en un repo
el archivillo
¿vale?
excelente trabajo
por ahora os gusta
¿es posible validar
un correo electrónico
con los template union types?
¿es posible?
no es posible
o sea puedes
hasta cierto punto
podrías llegar
a validar
puedes hacer validaciones
bastante potentes
con esto
pero no te lo recomendaría
tened en cuenta
que estas validaciones
son solo
os insisto
porque me sabe mal
porque este es el error
más común
del mundo
y he visto gente senior
cometiendo este error
este código
que hemos hecho
con esto del string
esta validación
de los strings
tened en cuenta
que no está
en el código
de ejecución
por lo tanto
validar un email
no tendría sentido
podría no tener sentido
si lo quieres
en tiempo de ejecución
no tendría sentido
¿cómo se llaman
las propiedades
de ese tipo de giro?
propiedades
mola mucho esto
pero me está entrando
taquicardia
del ritmo que llevamos
pero si vamos
super lentos
vamos super lentos
sé que me responderás
que no
pero cuando creas
el type giro
¿importa la posición
de las propiedades?
no importa
la posición
de las propiedades
un tipo
puede ser
una expresión regular
puede ser
una expresión regular
claro que sí
sin ningún problema
cuando ves el error
escrito en rojo
en texto
¿cómo ves?
ah bueno
eso es una extensión
que yo tengo
que si la queréis
utilizar bien
y si no
se refiere a esto
cuando pone esto
ves que sale aquí
el error
me sale en línea
esto es la extensión
que se llama
inline error
o error lens
error lens
nunca me acuerdo
error lens
¿vale?
error lens
pues esta es
para mí
de las mejores extensiones
que existen
aunque sé que hay gente
que le agobia
ver mucho rojo
pero bueno
eso a mí me ayuda
para programar
y no estar ahí
¿por qué usas dólar?
no sé dónde uso dólar
porque no he visto
ningún sitio
ah aquí
esto es de javascript
esto es un template
string de toda la vida
esto es para evaluar
el string que hay aquí dentro
¿vale?
el colocar
object freeze
es una garantía
read only
no es una garantía
de nada en esta vida
porque el object freeze
solo funciona
de forma superficial
¿vale?
vamos a ver los enums
claro que sí
¿el random uid
tenía tipo?
sí
los random uid
si te pones encima
ya puedes ver
que es justamente
lo que devuelve
o sea ya te dice
el tipo que devuelve
y el tipo que devuelve
además es con el tipo
que necesitamos
si hubiera puesto
que devolvía un string
pues seguramente
no hubiera sido tan mágico
lo que hemos visto
pero aún así
bastante interesante
para nota
¿qué es un giro
en programación?
no es un giro
en programación
un giro
es un héroe
estamos hablando
de héroes aquí
héroes normal
¿es posible validar datos
usando TypeScript
desde Node?
ya os he comentado
que no
TypeScript
no sirve para
validar datos
en tiempo de ejecución
TypeScript
es un lenguaje
de programación
estático
y solo funciona
en tiempo
de compilación
¿tienes vídeos
del curso de Microsoft
de TypeScript
pero solo dos?
¿montarás el resto
algún día?
creo que es que nos quedamos ahí
¿me digo entonces
cuando pones un read only
ya no puedes añadir
esa prop?
no puedes añadirle
cuando pones un read only
lo único que puedes hacer
es leer esa propiedad
ya está
no puedes modificarla
TypeScript
no es para validación
de usuario
efectivamente
necesitas bibliotecas
aparte
que pueden estar escritas
con TypeScript
pero son bibliotecas
que se ejecutan
en tiempo de ejecución
vale
¿funciona en programación
dentro de objetos?
sí que funciona
y luego veremos alguna cosita
que bien muy bien
ha venido esto
cuando entré en la empresa
seguro
en opcionales
se pueden poner
valores por defecto
se puede
tú puedes hacer
valores por defecto
tal que
por ejemplo
imagínate
ID
pues puedes hacer esto
no tiene ID
este sería el valor
por defecto
sería el de la derecha
¿vale?
venga
seguimos
que está muy interesante
y ahora vamos a por otra cosa
que está muy chula
muy potente también
que nos va a ayudar
a ver
es que vais a ver
que este ejemplo
que además es un ejemplo
muy típico
vais a ver
hasta qué punto
lo vamos a llegar
al otro nivel
¿no?
mira
vamos a poner
vamos a copiarnos esto
vamos a comentar esto
y vamos a poner aquí
los
Union
Union Types
¿vale?
¿qué son los Union Types?
bueno
ya hemos visto aquí
vamos a recuperar el código
que teníamos antes
teníamos el Hero ID
el Hero
imagínate
que queremos
queremos tener
la escala de poder
del héroe
¿cuál es la escala de poder
del héroe?
podríamos hacerlo
con un número
podríamos hacerlo
de diferentes formas
lo vamos a hacer
con un string
y para eso
vamos a hacer
un Type nuevo
que le vamos a poner
Hero
Power
Scale
¿vale?
y podemos decirle
bueno
Low Medium High
me parece muy aburrido
vamos a poner
yo que sé
local
planetario
planetari
galáctico
esto me gusta
omnipresente
me gusta
me gusta
vale
esta es una buena
omnipresente
me parece un poco exagerado
pero bueno
vamos a ponerla así
¿vale?
¿cuál es el poder
de escala
de nuestro héroe?
¿qué es esto?
¿qué es esto?
¿qué es hecho esto?
¿qué es esto?
bueno
esto es lo que significa
es un
un tipo de unión
o sea
esto es un tipo
en el que le estamos diciendo
que
la escala de poder
puede ser
esta cadena de texto
o
esta cadena de texto
o
esta cadena de texto
o
esta cadena de texto
o esta cadena de texto
esto también funciona
a nivel
de por ejemplo
utilizar dos tipos
o sea
imagínate que tenemos aquí
una variable
que le decimos
oye esta variable
puede ser
un number
o puede ser
un string
entonces
si yo ahora
le pongo un 1
pues se lo va a comer
bueno claro
es que este
and
vamos a poner
and por aquí
and
and
vale
si le pongo un número
le gusta
porque le he dicho
and puede ser
un número
o puede ser un string
por lo tanto
si pongo un string
tampoco le va a extrañar
lo que le va a extrañar
es que le ponga
que es un número
hay un boleano
si le pongo un boleano
va a decir
oye a ver
tú me has dicho
que era número
o string
pero boleano
no me has dicho
no te inventes cosas
aquí podemos ver
que es una unión
de tipos
podríamos decir
que está uniendo
que puede ser
o boleano
o números
o strings
esto
es como los joints
de SQL
si miramos una imagen
de estos los joints
podríamos decir
que estaríamos
ante este
que sería como
la unión
de dos tipos
estamos como uniendo
los dos tipos
no tiene mucho sentido
ver
este hasta aquí en medio
pero es la unión
de los dos tipos
en las que puede ser
uno
o el otro
vale
es la unión
de los dos tipos
estamos diciendo
que es un número
o un string
pero esto mismo
lo puedes llevar
más allá
por ejemplo
puedes decir
que an
puede ser
o un string
o el número dos
podría decir
no es un string
o el número dos
entonces si a an
le pones el tres
va a decir
no el tres no
pero si le pones el dos
sí
puedes utilizar valores
directamente
y lo mismo
nos pasa aquí
con la escala de poder
que le podemos decir
oye
el power scale
no que sea un tipo
es que es
un tipo concreto
o es la cadena
de texto local
o planetaria
galáctica
universal
o multiversal
y aquí ahora
cuando le digamos
oye
cuál es el power scale
que vamos a decir
que sea opcional
vamos a poner
giro power scale
y esto ahora
podemos
si lo podemos crear
o no
o lo podemos poner después
podemos decir
venga
thor.power scale
fíjate
que ya tenemos aquí
el autocomplete
y cuando lo ponemos
si yo aquí le pongo
que es
la leche de fuerte
se queja
porque dice
oye
en power scale
no es asignable
a lo que me has dicho
tú me has dicho
que iba a ser
uno de los tipos
que me has puesto aquí
y tú me has dicho
la hostia de fuerte
o la leche de fuerte
esto no puede ser
pero fíjate que normalmente
si aquí
abren las comillas
ya te pone aquí
todos los autocomplits
te dice
vale pues puede ser
galáctico
local
multiversal
planetario
o universal
la unión de tipos
lo puedes hacer
con números
con strings
lo puedes hacer
con un boleano
por ejemplo
una cosa que muchas veces
se puede ver también
es por ejemplo
enable
duration
enable animation
animation duration
y hay veces
que puede ser
un boleano
o puede ser
un número
¿por qué?
por lo que hacen aquí
ay perdón
estos dos puntos
porque lo que hacen aquí
es decir
vale true
y por defecto
500 milisegundos
o puedes indicar tú
la duración
y que sea 200 milisegundos
esto se ve en un montón
de bibliotecas
y tal
para justamente
tener
estas dos posibilidades
¿vale?
y lo puedes hacer
con tantos tipos
como quieras
o sea
es que me puedo aburrir aquí
de hacerte ejemplos
pero bueno
para que os hagáis una idea
¿vale?
en este caso
lo hemos hecho
con el power scale
luego veremos
un ejemplo mejor
de cómo tratar esto
pero me parecía
un ejemplo interesante
para luego presentarte
algo todavía
más interesante
vamos a
hacer otra cosa
todavía mejor
¿cómo podemos
extender tipos?
porque tenemos aquí tipos
un tipo aquí normal
pero me gustaría
extender este tipo
para ello
tenemos los intersection types
esto
vamos a partir de esta base
del mismo código
que teníamos antes
¿vale?
vamos a partir de esta base
¿y qué es lo que pasa?
que si nos fijamos aquí
fíjate que el create hero
aquí le pasamos el hero
y devolvemos un hero
pero
no sería mejor
si pudiéramos separar
lo que es el input
del hero
a lo que es
las propiedades
que necesita tener el hero
pero luego tener también
el tipo hero
que lo tenga todo
claro
una cosa que
rápidamente
se me viene a la cabeza
es decir
a ver
¿qué es lo que necesita
aquí de input?
solo necesita el name
y el age
pues yo podría tener aquí
type hero input
y podríamos sacar
estos dos de aquí
¿vale?
lo ponemos aquí
y ya está
y luego
¿qué es lo que devuelve esto?
es el hero
¿vale?
perfecto
pues ya está
ya lo tenemos hecho
esto sería una forma de hacerlo
pero alguien me dirá
oye
pero tú has hecho este tipo aquí
que es justamente
lo mismo que tenemos aquí
¿no habría una forma
interesante
de poder reutilizar esto?
¿por qué no podemos
tener esto
o hero input
o le podemos poner
hero basic info
basic info
o required info
vamos a ponerle
basic info
porque el nombre
y la edad
me parece bastante básica
¿no?
o sea
molaría poder hacer esto
sería genial
¿no?
esto estaría muy chulo
poder hacer algo así
¿no?
esto sería
intremendo
tremendo ¿no?
porque se parece
mucho a Yavacit
pero esto no es correcto
esto no se puede hacer
¿qué es lo que tenemos
que hacer
para poder
hacer intersecciones?
o sea
para poder
expandir
o para ir
añadiendo
para crear nuevos tipos
a través de otros tipos
bueno pues tenemos aquí
un tipo
que es la información básica
aquí tendríamos
como
las properties
vamos a decir
que estas son las propiedades
del héroe
¿cómo podemos crear ahora
el type hero
con
teniendo
bueno
el spoiler
teniendo en cuenta los dos
pues lo que le queremos decir es
oye
el tipo de hero
es la información básica
del hero
del héroe
y además
la de propiedades
o sea
lo que estamos haciendo aquí
es algo
al revés
o diferente
a lo que estamos haciendo
con el union
el union era unir
y aquí lo que estamos haciendo
es como
estamos uniendo también
pero estamos haciendo
un and
o sea
el otro era un o
y este es un and
el otro era un or
y este es un and
lo que están diciendo
es que el type hero
tiene que tener
esto
y esto
¿vale?
y por lo tanto
estamos creando
un nuevo tipo
donde vamos a tener
estas propiedades
y estas propiedades
las estamos uniendo
fíjate que ahora
con esto
funciona todo
perfectamente
pero
además aquí
en las propiedades
que estamos pasando
como parámetro
ahora podríamos utilizar
el basic info
ya no hace falta
y aquí podremos poner input
en lugar de
o basic
o lo que queráis poner
ya no hace falta
que el parámetro
que estamos pasando
en la función
sea tan
tan amplio
y luego veremos
otra forma de hacer esto
pero esta sería una forma
al menos
de solo tener un trozo
y luego crear
el type
que es mucho más grande
luego veremos
utility types
que nos ayuda a mejorar esto
¿vale?
pero por ahora
ya tendríamos
tendríamos esto
otra cosa que es bastante
interesante
y voy a dejaros
el héroe este
ya tranquilo
que el pobre
a lo mejor
vais a tenerlo
cansado
es el tema
del type index
¿vale?
vamos a poner aquí
type indexing
vamos a dejar los héroes
que ya le hemos dado
mucha cañita
a los héroes
bueno
voy a ver si tenéis
alguna duda
¿alguna duda de esto?
¿alguna duda?
¿la habéis pillado esto?
estoy intentando aprender
algunos lenguajes
lo comentamos mañana
¿vale?
que ahora estamos con el curso
¿cómo decirle al type
que no sea case sensitive?
la línea 178
que no sea case sensitive
tendrías que poner ahí
cada uno de las posibilidades
lo cual no te recomiendo
terminando el stream
¿podríamos estar
donde usaste bien
TypeScript
en los proyectos de React?
lo podéis mirar
vosotros mismos
¿vale?
¿cómo puedo instanciar
un giro vacío
para instancias
por default?
en este caso
lo podrías hacer
pero tendrías que configurar
y ya está
¿si consideras la misma
probabilidad en dos tipos
¿qué pasa con la intersección?
muy buena pregunta
¿no?
¿qué pasa si justamente
tenemos una intersección?
no, lo podemos poner aquí
¿qué pasa si tenemos
una intersección
¿no?
y justamente colisiona
tenemos aquí
esto que sea un string
¿no?
y esto que tengamos esto
bueno, fíjate
que aquí ya se me empieza a quejar
dice
no es asignable al tipo
porque
id is missing type name string
but requiring basic info
ah, bueno, claro
espérate
que vamos a poner que esto sea
vamos a poner que sea un number
a ver
number
bueno, lo que va a pasar
es que no le va a gustar
porque
es declare hero
un type hero
lo que va a pasar
es que no le va a gustar
no le va a gustar
o sea, no le va a gustar
en este caso
porque no
no coinciden
y al no coincidir
nos va a decir
oye
no puede ser
porque esto no está
no está
creo que se quedaría
en este caso el primero
porque si hacemos
a ver
vamos a
vamos a hacer el ejemplo
porque si lo ponemos aquí
ves que aquí me va a decir
que no es undefined
porque puede ser undefined
claro, tendría que
tendría que cumplir
las dos cosas
claro, tiene vida propia
claro que sí
porque no podría cumplir
las dos cosas
entonces en este caso
pues tendríamos un problema
no es que se vaya a quedar
es que se van a tener
que cumplir las dos cosas
y no va a ocurrir
en este caso
a lo mejor
se podría intentar quedar
con el que fuese más
específico
y no con el que sea
más general
pero hay que tener en cuenta
que encima
teniendo en cuenta
que son dos tipos
totalmente diferentes
pues ya lo está
ya tendríamos el problema
claro
dice el error te está dando
porque le has puesto number
claro, pero por eso
lo he puesto a posta
he puesto el number
para ver si el giro properties
machacaba al anterior
pero ya podéis ver
que no que lo machaque
sino que directamente
al final lo que está teniendo
es que los tiene que cumplir todos
porque es una unión
entonces tiene que unir
y unir todos los tipos
y tiene que cumplir
los dos tipos
y al final
no lo tendría que hacer
porque nunca
nunca lo va a poder cumplir
en este caso
si son dos
totalmente diferentes
¿se podría reescribir
el tipo para la idea?
hombre, se podría reescribir
lo podrías hacer
si los tipos coinciden
pero unos retornly
a ver, que sea retornly
lo único que hace
es que sea de lectura
y ya está
tampoco hace ninguna cosa
no funciona exactamente igual
que el extends
justamente por esto
por cómo funciona la unión
y cómo es la extensión
el extends
lo veremos después
así que continuemos
y lo vemos
os voy a enseñar uno
que es un poco tontería
pero bueno
os lo enseño en un momento
imaginad que tenemos
ah bueno
mira, vamos a hacerlo más fácil
imaginad yo que sé
isActive, bolean
y tenemos address
imaginad que tenemos
las propiedades del héroe
que sabemos
el planeta
y la ciudad
¿vale?
una cosa interesante
es que a veces
imagínate que quieres crear
por lo que sea
un objeto del tipo address
y quieres que sea
exactamente
con este tipo
pero no lo tienes fuera
o sea, no tienes este tipo separado
lo ideal sería separarlo
pero una cosa que
tienes que saber
es que puedes acceder
a tipos que estén anidados
o sea, tú puedes acceder aquí
al tipo de address
que tienes aquí
y este tipo
ahora cuando
si utilizamos
planet
earth
city
madrid
por decir algo
si ahora tú le quitas el planet
se va a quejar
porque le estamos diciendo
oye, este address
que estoy creando aquí
o llámale como quiera
direct
bueno, postal
postal hero
o address
address hero
¿vale?
fíjate que le podemos decir
que esto
lo saque
este tipo
lo saque de este address
que tenemos aquí
así que
ya estaría tipándolo correctamente
lo ideal sería sacarlo
pero bueno
hay veces que hay
que tienes que escribir mucho
o es un objeto muy complejo
o lo que sea
lo puedes hacer así también
¿vale?
la pantalla
ay, no
claro
es que estoy
a veces hablando
bueno, pero amigos
haberme enviado unos bits
en un momento
bueno
a ver
type index
indexing
claro, es que me vuelvo loco ya
contestando
preguntas y tal
bueno, os explico esto en un momento
que es un momento
imaginad que tenemos este tipo
¿vale?
en este tipo
tenemos este objeto address aquí
trucazo para sacar money
que son 50 centimos de dólar
o sea, no nos pasemos
mira
si creamos una constante
que sea address hero
¿ok?
podemos aprovechar
el hero properties
y acceder
al tipo
al tipo
que tenemos aquí
a este tipo del objeto
para eso
accedemos a la propiedad
address
que es esta de aquí
y ahora la podemos tipar
si ahora tú intentas
utilizar el city Madrid
fíjate
le falta planet
y se queja por eso
si empieza a escribir aquí
si ponemos planet
¿ves?
detecta que es una propiedad
y ahora
ya no se quejará
esto está bastante chulo
porque lo que te permite
es reutilizar
partes de
tipos
que ya tengas por ahí
¿vale?
muy bien
lo mismo puedes hacer
esto también
esto es el type indexing
y esto también
lo puedes hacer
con el
sacarlo desde un valor
esto está muy chulo
imagínate que tienes
un valor
que sea el address
¿vale?
imagínate que tenemos
la vamos a llamar
type from value
type from value
imagínate que tienes
un objeto
el address
¿vale?
el que hemos visto antes
y quieres crear un tipo
a través de una constante
pues puedes hacerlo así
puedes hacer
type address
igual type of address
el type of
es un operador
de javascript
para sacar el tipo
pero en typescript
es como un
supraconjunto
que hace más cosas
esto lo que va a hacer
es que si yo ahora
intento
address
yo que sé
twitch
imagínate
si yo ahora digo
bueno
voy a utilizar este tipo
de aquí
podríamos hacerlo
de diferentes formas
pero podrías hacer aquí
pam
address
¿vale?
y ahora
este
está esperando
que escribas
exactamente
como es
mars
y city
twitch
¿vale?
está esperando
que hagamos exactamente
el mismo objeto
que hacemos aquí
tan simple como esto
¿vale?
que es mejor usar
type of interface
cuando es mejor
uno que otro
lo siento si ya lo explicaste
pero acabo de llegar
lo explicamos más adelante
¿vale?
entonces
lo que podemos hacer
con el type of
es extraer
los tipos
de un objeto
de funciones
incluso de funciones
incluso si tuvieses
una función tipada
y quieres otra función
que tenga el mismo tipo
se lo podría sacar también
utilizando el type of
así que
el type of
es una herramienta
un operador
que en javascript
se utiliza
para ciertas cosas
pero que en typescript
tiene todavía más poder
porque te permite
crear tipos
a partir de código
que ya tengas
vamos a poner un ejemplo
de type
from
function
return
para que veas
como de potente
es esto
imagínate que tengo
mira
tengo aquí una función
que se llama
create address
¿vale?
que devuelve
el objeto este
planeta tierra
site barcelona
con la inferencia
que hemos comentado antes
esto ya sabemos
que devuelve
este objeto
imagínate que quieres
devolver
o quieres
crear otra función
o quieres
este tipo
que estamos devolviendo
a través de una función
lo quiero recuperar
o sea
quiero lo que he hecho aquí
del type address
pero a través
de lo que devuelve
la función
pues esto lo puedes hacer
igual
hacemos un type address
y tenemos aquí
un utility
que se llama
return type
el return type
es
oye
quiero que
me recuperes
el tipo
de lo que devuelve
la función
que tiene
este
create address
o sea
el tipo
de este
create address
lo estamos recuperando
y el return type
o sea
este return
quiero que me lo guardes
en este tipo
address
y ahora este address
fíjate lo que tiene
esto
no hace falta
no es lo más importante
de TypeScript
y ahora pasaremos
a los arrays
que de nuevo
lo que decía
vamos a poner un ejemplo
de type
from
function
return
para que veas
como de potente
es esto
imagínate que tengo
mira
tengo aquí una función
que se llama
create address
¿vale?
que devuelve
el objeto
este planeta
tierra
site
barcelona
con la inferencia
que hemos comentado
antes
esto ya sabemos
que devuelve
este objeto
imagínate que quieres
devolver
o quieres
crear
otra función
o quieres
este tipo
que estamos devolviendo
a través de una función
lo quiero recuperar
o sea
quiero lo que he hecho
aquí del type address
pero a través
de lo que devuelve
la función
pues esto lo puedes hacer
igual
hacemos un type address
y tenemos aquí
un utility
que se llama
return type
el return type
es
oye
quiero
que
me recuperes
el tipo
de lo que devuelve
la función
que tiene
este
crujit address
o sea
el tipo
de este crujit address
lo estamos recuperando
y el return type
o sea
este return
quiero que me lo guardes
en este tipo
address
y ahora este address
fíjate lo que tiene
esto
no hace falta
no es lo más importante
de typescript
y ahora pasaremos
a los arrays
que de nuevo
lo que decía
hacemos unos cuantos pasos
para adelante
tres para atrás
para adelante
para atrás
pero esto
es una de las cosas
que hace que typescript
sea súper súper súper potente
porque lo que está haciendo
es básicamente
es
que tú puedes extraer
los tipos
puedes extraer los tipos
de cualquier función
gracias a que los tipos
se están infiriendo
en este caso
imagínate que tú no sabes
lo que hace esta función
pero quieres
recuperar el tipo
que devuelve esta función
para utilizarlo
en otro sitio
pues aquí lo podrías hacer
¿vale?
sería como que estamos haciendo
al revés
de lo que hemos hecho antes
de recuperar tipos
a través de funciones
que tienen el código
así que
tremendo
igualmente
esto no es lo más importante
pero lo quería comentar
porque está muy relacionado
con lo que estábamos haciendo
vamos ahora
con los arrays
y esto está
más interesante
y es bastante chulo
así que
venga
vamos a hacer los arrays
que se hacen en un momento
y seguiremos
la semana que viene
los arrays
a ver
cuando hacemos arrays
es muy sencillo
los arrays
imagínate que tenemos
los lenguajes aquí
ahora ya podemos
hacer un push
y yo que sé
podemos ponerle aquí
javascript
javascript
pero ojo
problemas
problemas con los arrays
¿qué pasa con los arrays?
fijaos con esto
yo le he dicho
que he creado un array
he hecho
languages.push
javascript
y va
y me dice
que el argumento
del tipo string
no lo puedo meter
en el array
pero que locura es esta
por lo que está pasando
es que
por la inferencia de datos
que decíamos de typescript
lo que está pasando
es que está detectando
que el array que queremos
es que queremos
que siempre
que siempre
esté vacío
y fíjate
que lo que me está diciendo aquí
es
que languages
es
never
never
un array de never
o sea que nunca hay nada
ahí dentro
¿no?
bueno
para arreglar esto
tenemos que tipar correctamente
nuestro querido array
y es muy sencillo
lo que tenemos que hacer
es decirle
el tipo de datos
que queremos que tenga
nuestro array
le decimos que es un string
y luego
utilizamos
los corchetes
lo que le estamos diciendo
es que
en languages
vamos a tener
un array
de strings
pero ojo con esto
porque al decirle
que queremos tener
un array de strings
esto funciona
pero en cuanto intentemos
ponerle un número
por ejemplo
beta
un número
un boleano
o cualquier cosa
¿no?
hay otra sintaxis
que podéis utilizar
para esto
podéis utilizar
otra sintaxis
que sería utilizando
array
en mayúscula
y entre
no son corchetes
sino que
entre estas cositas
le podéis decir
el tipo de datos
en este caso
pues string
¿cuándo utilizar
uno u otro?
yo
en este caso
utilizaría
siempre
este
me parece que
es más claro
más fácil de entender
ocupa menos
a mí me gusta más este
pero es un tema
de preferencia
si crees
que te gusta más
este
por lo que sea
lo puedes utilizar
¿vale?
pero yo creo
que se ve más claro
o me gusta más
este
ahora
¿qué pasa
si justamente
resulta
que también
quieres poner números?
que ya sería raro
pero puede ser
que quieras poner
también números
bueno
pues
un error
muy común
que comete la gente
es esto
es decir
bueno
pues voy a hacer
que languages
sea un string
de array
o un array
de strings
o un array
de numbers
¿no?
lo que hemos visto antes
y esto no es la solución
esto está mal
esta no sería la respuesta
porque lo que le estamos
diciendo aquí
es que
o es un array
todo de números
o es un array
todo de strings
¿vale?
lo que tenemos que decirle
es más bien
que el array
puede ser de string
o de number
eso lo tenemos que poner
entre paréntesis
aquí
¿vale?
así que
lo importante
es que cualquier tipo
que le queramos meter
al array
lo deberíamos tener
aquí dentro
fíjate que si yo ahora
le pongo un boleano
pues también se queja
porque dice
oye
que me has dicho
que es string on number
pero no has dicho nada
de que iba a ser boleano
no me engañes
¿vale?
una cosa muy interesante
que obviamente
esto que hemos hecho antes
de los héroes
que teníamos por aquí
¿vale?
vamos a traernos
estos
estos héroes
obviamente los héroes
como te puedes imaginar
solo faltaba
también puedes tipar
un array
de héroes
puedes poner
heroes
y poner
hero
hero
así
¿vale?
podrías tener un array
de heroes
bueno
hero basic info
que es lo que tenemos por aquí
podrías tener
with basic info
podrías tener un array
de tus tipos de datos
sin ningún tipo de problema
y otra cosa
que puedes hacer
que es bastante chula
también
y bastante interesante
es por ejemplo
crear matrices
o sea
puedes decir
imagínate un game board
y esto es súper interesante
porque esto
si lo dominas bien
te evita
aún hay problemas
imaginad
el 3x3
el 3x3
el 3 en raya
el 3 en raya
es una cosa
así ¿no?
vale
¿cómo podríamos tiparlo?
porque esto es un array
de arrays
para hacer un array
de arrays
y fijaos que tenemos strings
mira
aquí vamos a hacer
un montón de cosas
que hemos aprendido hoy
condensado aquí
súper fácil
y súper potente
mira
si quiero tipar esto
una cosa que podría decir
es obviamente
ya sabemos que
este
cada línea
es esto ¿no?
cada uno de estos tipos
sería este
ahora bien
¿qué es lo que debería ser todo?
porque esto es sólo una línea
esto es sólo una línea
cada línea
es un array de strings
pero todo esto
es a su vez
un array
por lo tanto
el tipo
debería ser
un array de strings
de arrays
¿vale?
así como lo tendríamos
que poner el tipo
¿vale?
esto es lo que sería
y aquí
lo inicializaríamos
lo que
¿cómo lo inicializamos?
bueno
pues le vamos a poner esto
y ya lo tenemos bien
pero esto tiene un error
tiene diferentes errores
¿vale?
uno
el game board
en cualquier posición
puedes poner
lo que te dé la gana
o sea
primer error
por lo tanto
deberíamos asegurarnos
que en lugar de string
podamos poner cualquier cosa
creamos nuestro propio tipo
y además
utilizando el or
¿no?
y podemos decirle
oye
podemos decir que
el string puede ser
x o
el círculo
o string vacío
en lugar del string
y ya
hemos subido un nivel
ahora ya
sólo podemos ponerle
uno de los tres
pero
todavía hay un problema
y es que
fíjate que aquí
se puede poner más cosas
no está haciendo
correctamente
su funcionalidad
de describir
el juego
del 3 en raya
porque resulta
que tú aquí
puedes empezar a poner
bueno aquí
eso no
pero sí que puedes hacerlo
más grande
y debería ser un 3x3
¿cómo hacemos
que esto sea realmente
un 3x3?
pues para hacer un 3x3
es
muy fácil
vamos a crear aquí
un type
mira vamos a
poner esto aquí
type
gameboard
y lo que vamos a hacer
es describir
con una tupla
y ahora te explico
que es una tupla
vamos a describir
cómo es
nuestro gameboard
le decimos
que es un array
donde tenemos
el cell value
el cell value
y el cell value
y ahora
este gameboard
lo podemos utilizar
directamente
aquí
y fíjate que ahora
se nos queja
porque le hemos dicho
oye
el tipo
es
parece un array
pero a esto
se le llama
tuplas
y te voy a explicar
por qué
una tupla
es un array
que tiene
un límite fijado
de longitud
así que le estamos diciendo
que esto es un array
que su primera posición
es un array
de tres posiciones
su segunda posición
un array de tres posiciones
y ahora
dice
oye
es que me estás pasando
de más
así que hasta que
no quitemos todo
no va a funcionar
correctamente
las tuplas
son
mágicas
son súper importantes
te voy a enseñar
dos ejemplos
más básicos de tuplas
para que los entiendas
¿vale?
por ejemplo
volviendo con los héroes
imagínate un héroe
que lo que
bueno
una de las tuplas
más
mira
te voy a explicar
la tupla
si sabes React
esta tupla
la vas a conocer
tú sabes
cuando tenemos
esta tupla
hacemos esto
useState
y aquí le pasamos
Thor
por ejemplo
este useState
que bueno
aquí no lo tengo
no lo tengo
en el tal
esto es una tupla
porque siempre
el useState
siempre
siempre
siempre
devuelve
dos posiciones
en la primera
sabes lo que tienes
en este caso
será un string
y en la segunda
también sabes lo que tienes
en este caso
será una función
de hecho
con una tupla
podemos describir
cómo es este estado
podemos decir
que el estado
es una tupla
aunque lo ves
como un array
en TypeScript
se llama tupla
¿vale?
donde la primera posición
es un string
porque lo tenemos aquí
este string
viene de aquí
¿vale?
y la segunda posición
es una función
que recibe
el nuevo
el new name
¿vale?
y que devuelve
void
y con esto
ya podríamos estar aquí
tipando justamente
esto de aquí
esto lo habéis visto
mil o millones de veces
en React
y lo que devuelve
un useState
sería una tupla
un ejemplo
todavía más sencillo
por si queréis
todavía saber más
qué son las tuplas
es el de los códigos RGB
los códigos RGB
cuando
lo tengamos
o sea cuando lo hacemos
muchas veces
lo hacemos así
estos son números
que van desde el 0
al 255
siendo el 0
el negro
255
el color más alto
en ese canal
el rojo
el verde
o el azul
¿no?
el primero sería el rojo
el segundo el verde
el tercero el azul
esto se puede tipar
con una tupla
justamente para evitar
problemas
podemos hacer un type
y tener number
number
y ahora
cuando creemos
un código RGB
ahora no la liaremos
no haremos cosas así
como decir
ah esto es un string
y además aquí ponemos
un número
aquí tiene
y aquí tal
todo esto nos va a dar error
¿por qué?
porque lo que está esperando
es que utilicemos
correctamente
la tupla
incluso si ponemos
uno más que no espera
también nos va a decir
oye no
es que me has dicho
que es un array
de tres posiciones
y me has pasado cuatro
esto lo estás tipando mal
así que fíjate
como de potente es
el ejemplo del game board
me parece tremendo
me parece un ejemplo
además
de la vida real
para cualquier juego
porque en todos los juegos
vas a querer hacer esto
y te va a ayudar
un montón
en tu experiencia
de desarrollo
y además esto
lo puedes llegar
a utilizar
para las props
de React
para pasarlo
como parámetro
para reiniciar
para lo que sea
para siempre tener
el mismo objeto
en todos los sitios
y si no
para tipos
que parecen más básicos
como el RGB
que también te pueden ayudar
un montón
¿vale?
así que
ahí dejamos
los arrays
y las tuplas
y si tengo un juego
de 256 celdas
se puede llegar
a hacer también
se puede llegar
a hacer
se podría llegar
a validar
sin necesidad
de hacer eso
¿por qué?
porque hay utility clases
que te permiten hacerlo
¿como hacer para que
el número sea
de 0 a 255?
no podrías
con tipos
con tipos
no lo podrías hacer
o a mí no se me ocurre
una cosa
una forma
de lo que podrías hacer
sin llegar
a escribir código
podrías llegar
a escribir código
es verdad
que las utilities clases
es que no he visto
las últimas versiones
se han hecho
bastante potentes
y no me extrañaría
que se pudiera hacer
o sea no me extrañaría
porque cada vez
le añade más potencia
pero
lo normal
sería validar
validar los datos
con código
puedes llegar
a tipar
a este punto
y luego validar
¿vale?
entonces se podría hacer
como hasta cierto punto
luego con utility clases
se pueden llegar
a hacer cosas
muy brutales
que eso lo veremos
¿vale?
se puede llegar
a hacer cosas tremendas
a la hora de
yo que sé
eso lo veremos
con los genéricos
es que claro
si ahora os explico
genéricos y tal
por ejemplo
lo que comentaba antes
un chico
de cómo puedo hacer
limitar
si es 9x9
o 256x256
lo tengo que hacer a mano
no lo tienes que hacer a mano
hay formas de hacerlo
pero tengo que explicar
los genéricos antes
no me lo puedo saltar
¿vale?
así que bueno
esta ha sido la primera clase
del curso de TypeScript
la semana que viene
el miércoles
haremos la segunda clase
donde veremos interfaces
y todo esto
¿vale?
espero que os haya gustado
la clase
me lo he pasado súper bien
la verdad
espero que
que me hayas pasado bien
la verdad
es que me ha entrado
mucha hambre
un montón de hambre
y nos vemos mañana
que vamos a estar revisando
portfolios y webs
de la comunidad
¡Gracias!