Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Interface
Veamos brevemente qué es Typescript y cómo empezar a usarlo, declarando nuestra primera interface.
Introducción a TypeScript
Antes de usar un framework JavaScript como Vue, React o Angular, se recomienda mucho aprender primero JavaScript.
Lo más probable es que ya conozcas JavaScript. Sin embargo, existe la posibilidad de que no hayas trabajado con TypeScript hasta el momento.
Si ese es tu caso, ¡enhorabuena! porque tenemos este módulo dedicado a TypeScript.
Si ya conoces qué es TypeScript, puedes avanzar directamente al módulo siguiente. Si buscas TypeScript, vas a encontrarte con una página oficial que es typescriptlang.org.
¿Qué es TypeScript?
TypeScript en realidad es JavaScript, pero con una sintaxis para tipos. Con esto se refiere a tipos de datos. TypeScript es un lenguaje de programación fuertemente tipado.
¿Qué significa fuertemente tipado?
Si defines una variable con un tipo determinado, este tipo de datos no va a cambiar. Puedes cambiar el valor de la variable, pero vas a tener que asignarle otro dato que respete el mismo tipo de dato.
Probando TypeScript
Podemos probar TypeScript incluso online. Si le damos clic a estos tres puntos, vamos a ver dos opciones:
- Podemos probar TypeScript en el navegador porque tiene un playground.
- Podemos probar TypeScript en nuestra computadora.
Nosotros vamos a probarlo ahora en el navegador. Así no tenemos que configurar ningún proyecto adicional.
Y luego de revisar los fundamentos de TypeScript, vamos a continuar revisando nuestro proyecto de Vue 3 que hace uso de TypeScript.
En otra pestaña vamos a abrir la documentación y nos vamos a dirigir a la opción que dice TypeScript for JavaScript Programmers.
Inferencia y declaración de tipos en TypeScript
Si creamos una variable HelloWorld con un valor que es una cadena, automáticamente esta variable HelloWorld se va a crear con el tipo de datos string, porque TypeScript puede inferir tipos de datos.
Esto está permitido con TypeScript, sin embargo, muchas veces vamos a querer definir los tipos explícitamente.
Por ejemplo, esto de aquí define una variable user que es un objeto que tiene un nombre y un id. ¿Cómo podemos definir un tipo para representar a este usuario? Podemos hacerlo declarando una interface.
interface User {
name: string;
id: number;
}
De esta manera, User viene a ser un tipo de dato definido por nosotros. Entonces aquí podemos usarlo de la siguiente manera:
const user: User = {
name: "Juan",
id: 1
};
Por lo tanto, se sabe que user va a contener un name, que será una cadena, y un id, que será un número.
Errores en TypeScript
¿Qué pasa si queremos agregar un dato más? Por ejemplo, aparte del name queremos agregar el email del usuario:
const user: User = {
name: "Juan",
id: 1,
email: "[email protected]"
};
Esto nos produce un error. ¿Por qué?
Porque estamos tratando de agregar un atributo email, y TypeScript sabe que un tipo de dato User solo tiene name e id.
Si agregamos uno más, esta variable deja de ser correcta, porque está yendo en contra del tipo de dato.
Como bien nos indica el error en TypeScript, la propiedad email no existe en el tipo User. Por eso, esto causa un error.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Antes de usar un framework JavaScript como vue, react o angular se recomienda mucho aprender primero JavaScript, así que lo más probable es que ya conozcas JavaScript. Sin embargo, existe la posibilidad de que no hayas trabajado con TypeScript hasta el momento. Si ese es tu caso, en hora buena porque tenemos este módulo dedicado a TypeScript. Si ya conoces que es TypeScript, puedes avanzar directamente al módulo siguiente. Si buscas TypeScript, vas a encontrarte con una página oficial que es typescriptlang.org. ¿Qué es TypeScript? TypeScript en realidad es JavaScript, pero con una sintaxis para tipos. Con esto se refiere a tipos de datos. TypeScript es un lenguaje de programación fuertemente tipado. ¿Qué significa fuertemente tipado? Que si tú defines una variable con un tipo determinado, este tipo de datos no va a cambiar. Puedes cambiar el valor de la variable, pero vas a tener que asignarle otro dato que respete el mismo tipo de dato. Podemos probar TypeScript incluso online. Si le damos clic a estos tres puntos, vamos a ver dos opciones. Podemos probar TypeScript en el navegador porque tiene un playground o podemos probar TypeScript en nuestra computadora. Nosotros vamos a probarlo ahora en el navegador. Así no tenemos que configurar ningún proyecto adicional. Y luego de revisar los fundamentos de TypeScript, vamos a continuar revisando nuestro proyecto de Vue3 que hace uso de TypeScript. En otra pestaña vamos a abrir la documentación y nos vamos a dirigir a la opción que dice TypeScript for JavaScript programmers. Bien, si nosotros creamos una variable HelloWorld con un valor que es una cadena, automáticamente esta variable HelloWorld se va a crear con el tipo de datos string, porque TypeScript puede inferir tipos de datos. esto está permitido con TypeScript, sin embargo muchas veces vamos a querer definir los tipos explícitamente, por ejemplo esto de aquí define una variable user que es un objeto que tiene un nombre y tiene un id, ¿cómo podemos definir un tipo para representar a este usuario? ello podemos hacerlo declarando una interface, las sintaxis es interface user y dentro de estas llaves podemos definir los atributos que componen a este usuario, en este caso el nombre es una propiedad de tipo string y decimos que el id es una propiedad de tipo number, de esta manera user viene a ser un tipo de dato definido por nosotros, entonces aquí podemos usarlo de esta manera, ponemos dos puntos simplemente seguido del tipo de dato, entonces esta variable user con 1 y minúsculas es un objeto de tipo user, por lo tanto se sabe que va a contener un nombre, que va a ser una cadena y un id que va a ser un número, ¿sí? Entonces vamos a empezar probando este ejemplo. Vamos a borrar esto y vamos a poner por aquí este ejemplo. Vamos a definir nuestro tipo de dato user y luego vamos a decir que este user de aquí se corresponde con este tipo de dato. ¿Qué pasa si nosotros queremos agregar un dato más? Por ejemplo, aparte del name queremos agregar el correo del usuario. Vamos a poner email y por aquí vamos a escribir un correo. Esto nos produce un error. ¿Por qué se produce un error? Porque estamos tratando de agregar un atributo email y TypeScript sabe que un tipo de dato user solo tiene name y tiene id. Si agregamos uno más, esta variable deja de estar correcta, porque está yendo en contra del tipo de dato. Como aquí bien nos dice, la propiedad email no existe en el tipo user. Por eso es que esto causa un error.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript