Antes de comenzar con los ejercicios que vamos a hacer en esta práctica, les quiero mostrar la solución que ofrece TypeScript para tipar a los objetos. Pero antes de ver algo nuevo, repasemos un poco lo que vimos hasta el momento.
Las anotaciones de tipo permiten establecer el tipo de dato que queremos que una variable o función tenga. Por ejemplo, si tenemos const suma = (a: number, b: number): number => a + b;, le indicamos al intérprete que la función suma() tiene dos parámetros, y queremos que éstos sean datos de tipo number. Además, la función retornará un dato de tipo number.
Cuando TypeScript no tiene forma de saber el tipo de dato en cuestión, pero nosostros sí, entonces hacemos uso de esta herramienta. Por ejemplo, imaginemos que queremos obtener la cantidad de planetas del Sistema Solar, y para esto solicitamos data a la API de la NASA:
const planetsData = getDataFromURL('https://api.nasa.gov/planets.json);
Vamos a suponer que la función getDataFromURL() hace todo el trabajo necesario por nosotros, y nos retorna un JSON en formato string. Primero tendríamos que parsear esos datos para poder convertirlo a un objeto manipulable con TypeScript, para luego acceder a una de sus propiedades, supongamos quantity, y finalmente acceder al dato:
const planetsDataObj = JSON.parse(planetsData);
const numberOfPlanets = planetsDataObj.quantity;
Y voilà! ya accedimos al dato que estábamos buscando. Ahora, nosotros, podemos saber de antemano que se trata de un dato tipo number. Pero, TypeScript, ¿tiene forma de saberlo? Por supuesto que no. Es en este caso hacemos uso del operador as para indicar el tipo que sabemos que es el dato en cuestión:
const numberOfPlanets = planetsDataObj.quantity as number;
¡OJO! tengan en cuenta que básicamente le están diciendo a TS confiá... yo se lo que estoy haciendo!, así que asegúrense de saber bien! ya que pueden introducir errores al código. En los links les dejo un artículo para que lean un poco más acerca de ésto.
Para poder trabajar con TypeScript, es necesario crear un archivo de configuración básico. Para este propósito existe el comando tsc --init que nos crea el archivo de configuración tsconfig.json con todas las configuraciones posibles, pero con la mayoría de ellas comentadas. Recuerden que para que les funcione este comando, teniendo instalado TypeScript únicamente de forma local, tienen que incluir el comando npx delante: npx tsc --init. En el archivo tsconfig.json creado, sólamente están operativas las opciones más básicas. Por el momento vamos a dejarlo así:
"target": "ESNext",
"module": "commonjs",
"outDir": "./dist",
"strict": true,
"alwaysStrict": true
Ahora, en el package.json vamos a tener que incluir un comando para poder transpilar todo el código de TypeScript a JavaScript. Para ésto, agregamos un script llamado compile con el comando tsc: "compile": "tsc".
Recuerden incluír "type": "module" para poder usar la sintáxis de ECMAScript para importar/exportar módulos. Al incluír esto, ts-node nos va a traer problemas, prueben. Para solucionar el error tienen que agregar el flag --esm al script "dev": "dev": "ts-node --esm index.ts".
A la hora de definir la forma de un objeto, la solución que nos ofrece TypeScript es la interfaz. Es como un contrato que detalla qué propiedades y métodos debe tener un objeto para cumplir con la forma determinada en la interfaz:
interface User {
name: string,
id: number,
active: boolean,
location?: string
}
En este ejemplo definimos una interfaz llamada User, que especifica que un objeto tiene que tener una propiedad name de tipo string, id de tipo number, active de tipo boolean, y una propiedad opcional location de tipo string. Así, a la hora de crear un nuevo objeto, vamos a poder tiparlo según la interface creada:
const vitoCorleone: User = {
name: 'Vito Corleone',
id: 654789,
active: true,
}
También podríamos aprovechar la interfaz User para tipar una collection con objetos de tipo User:
const users: User[] = [
{
name: 'Vito Corleone',
id: 654789,
active: true
},
{
name: 'Alfredo Corleone',
id: 666333,
active: true
}
]
Resolvé los ejercicios de este repositorio. En caso de que se te complique, tenés al final de cada módulo la documentación correspondiente. Fijate bien en el package.json con qué comando ejecutarlos.
💥 Éxitos! 💥