Typescript 03
Tipos avanzados
Union type
En ocasiones puede sernos útil que una variable o parámetro pueda pertenecer a más de un tipo.
Para eso se utiliza |:
let variable: number | string = 1
Esto va a permitirnos asignar valores tanto number como string a la variable “variable”
En funciones podemos, haciendo uso de la función typeof:
function Suma(a: number | string): number {
if (typeof(a)=== 'number') return a * 2
return parseInt(a)*2
}
Cuando utilizamos el union type con objetos, nos permite o bien definir un objeto de más de un
tipo o utilizar las propiedades de los dos objetos a la vez creando una nueva clase:
type Usuario = {
id:number,
estado:string,
}
type Vehiculo = {
id: number,
tipo: string,
}
const objeto: Usuario | Vehiculo = {
id:1,
tipo:'Propiedad'
}
También podríamos crear objeto uniendo las propiedades de ambos tipos:
const objeto: Usuario | Vehiculo = {
id:1,
tipo:'Propiedad',
estado:’bueno’,
}
Intersection type
Se explica mejor con un ejemplo:
type Objeto = {
id:number,
estado:string,
}
type Vehiculo = {
matricula:string,
}
type Libro = {
autor: string,
}
const miCoche: Objeto & Vehiculo = {
id:1,
estado:'Activo',
matricula:'7877-LMN'
}
const miLibro: Objeto & Libro = {
id:2,
estado:'Prestado',
autor:'Cervantes',
}
En el código anterior se ha creado un tipo denominado Objeto que contiene las propiedades
comunes a todos los objetos con los que vamos a trabajar en nuestro programa.
Luego los tipos Vehiculo y Libro con una única propiedad cada uno
Al crear las variables miLibro y MiCoche utilizamos los tipos Objeto y Libro para el primero,
Objeto y Vehiculo para el segundo.
Tipos literales
Nos van a permitir crear un tipo que contenga una serie de valores, y únicamente estos valores,
definidos
type Niveles = 'Grado Medio' | 'Grado Superior' | 1 | 2
let curso: Niveles = 'Grado Medio'
Optional chaining
En ocasiones podemos intentar acceder a propiedades de un objeto que es posible que no existan. Si
trabajamos con JavaScript nativo hay que realizar comprobaciones de si esta propiedad existe o no.
en el caso de TypeScript podemos utilizar ?
const creaObjeto= (n:number) =>{
if (n < 0) return null
return {
id:1,
creado:new Date()
}
}
const objeto1 = creaObjeto(-1)
[Link](objeto1?.creado || 'no existe')
Nullish coalescing operator
Veamos el siguiente código:
const nivel_anterior:number | null = null
const objeto1 = {
id: 1,
nivel: nivel_anterior || 1, //Si no existe este valor pasamos a 1.
¿Pero qué ocurre si existía y era 0
}
[Link](objeto1)
El operador || comprueba si la parte de la derecha es “falsey”: 0, null o undefined. Por lo que si el
nivel_anterior fuera 0 aquí || cambiaría el valor de nivel a 1 de manera incorrecta
En typescript existe el operador ??
const nivel_anterior:number | null = 0
const objeto1 = {
id: 1,
nivel: nivel_anterior ?? 1, //Ahora, si el valor_anterior es 0 no
pasa a ejecutar la sentencia de la derecha
}
[Link](objeto1)
as
En ocasiones typescript no puede inferir el tipo de la variable con la que se está trabajando. Un caso
típico es cuando trabajamos con elementos HTML y queremos obtener la ayuda del editor para
trabajar con sus propiedades.
Si nuestro código es así:
const entrada = [Link]('nombre')
Al trabajar con entrada VisualStudio Code no nos ayudará con las propiedades y eventos de ese
elemento.
Si nuestro código lo cambiamos a esto:
const entrada = [Link]('nombre') as HTMLInputElement
VisualStudio Code ya tendrá información del tipo de variable que es y nos ayudará a introducir
código.
También podemos escribirlo, y es lo más común, así:
const entrada = <HTMLInputElement>[Link]('nombre')