Tipos inferidos

Clase 8 de 24 • Curso de TypeScript

Contenido del curso

Introducción a TypeScript

Tipos de datos primitivos

Tipos de datos especiales

Próximos pasos

24
Toma el Curso de Tipos Avanzados y Funciones en TypeScript
01:01 min

Tomar examen

Resumen

TypeScript puede inferir el tipo de dato de una variable a pesar de no haberlo declarado explícitamente.

Inferencia de tipos

A partir de la inicialización de la variable TypeScript infiere el tipo que será a lo largo del código y este no puede variar. Por ejemplo:

let myName = ""Victoria"";

Si bien no indicamos el tipo de dato como se haría de esta manera:

let myName: string = ""Victoria"";

TypeScript infiere que la variable myName será del tipo string y en adelante no podrá tomar un valor que no sea de este tipo de dato.

myName = 30; 
//Nos señalará como error pues se le quiere asignar un número a una variable de tipo string.

En Visual Studio Code puedes obtener autocompletado teniendo sugerencias según el tipo de dato que sea la variable:

Nombres de variables iguales

TypeScript te indicará como error aquellas variables con el mismo nombre a pesar de estar en archivos distintos. Esto no sucederá en entornos preconfigurados como por ejemplo Angular o React, ya que estos trabajan de forma modular o tienen un alcance (scope) para cada variable.

Si deseas trabajar con los mismos nombres de variables en diferentes archivos, puedes crear una función anónima autoejecutada:

( () => {
    let myName = ""Victoria"";
})();

Lo mismo por cada variable que desees tener el mismo nombre (myName para este ejemplo) deberás crear este tipo de función para evitar que te den estas advertencias.

Contribución creada por: Martín Álvarez.

Andre Huaman Yovera

student•

Aquí te muestro varias formas de evitar las advertencias de TypeScript sobre la asignación de un número a una variable inferida como string utilizando diferentes enfoques: .

Utilizar any:

let myProductName: any = 'Product 1';
let myProductPrice: any = 123;

myProductName = 12321;  // Sin alerta de TypeScript

Al asignar el tipo any a las variables, le estás diciendo a TypeScript que permita cualquier tipo de valor, lo cual incluye la asignación de un número a una variable inferida como string. Sin embargo, debes tener en cuenta que el uso excesivo de any puede eliminar gran parte de los beneficios de TypeScript, ya que pierdes el control de tipos estático.

Utilizar unknown:

let myProductName: unknown = 'Product 1';
let myProductPrice: unknown = 123;

myProductName = 12321;  // Sin alerta de TypeScript

Al utilizar unknown, estás indicando que no tienes información sobre el tipo de la variable. Al igual que any, unknown permite asignar cualquier tipo de valor a la variable sin advertencias de TypeScript. Sin embargo, al trabajar con variables de tipo unknown, debes realizar una verificación de tipo o una conversión explícita antes de realizar operaciones específicas del tipo.

Utilizar una anotación de tipo explícita combinando string y number:

let myProductName: string | number = 'Product 1';
let myProductPrice: string | number = 123;

myProductName = 12321;  // Sin alerta de TypeScript

Como mencioné anteriormente, al utilizar una anotación de tipo union (string | number), le estás indicando a TypeScript que la variable puede ser tanto una cadena de texto como un número. Esto permite asignaciones de ambos tipos sin mostrar una advertencia. . En general, se recomienda utilizar las anotaciones de tipo más específicas posibles en lugar de any o unknown, ya que te permiten aprovechar los beneficios del sistema de tipos estático de TypeScript y detectar errores potenciales en tiempo de compilación. Sin embargo, en situaciones específicas donde necesites flexibilidad extrema o cuando no tengas información sobre el tipo de la variable, any o unknown pueden ser opciones válidas.

Andre Huaman Yovera

student•

Aquí tienes ejemplos prácticos donde el uso de any o unknown puede ser útil: . Ejemplo con any: Supongamos que estás utilizando una biblioteca de terceros que tiene una función que puede devolver diferentes tipos de resultados. En este caso, no tienes información precisa sobre el tipo de retorno de la función. Podrías usar any para asignar el resultado de la función sin generar advertencias de TypeScript.

let result: any = thirdPartyLibraryFunction();

// Puedes utilizar 'result' sin advertencias de TypeScript
// ya que está marcado como 'any'

En este escenario, el uso de any te brinda la máxima flexibilidad para trabajar con el resultado de la función sin restricciones de tipo. Sin embargo, debes tener cuidado al utilizar any y asegurarte de realizar las comprobaciones necesarias para evitar errores en tiempo de ejecución. . Ejemplo con unknown: Supongamos que estás procesando datos dinámicos de una fuente externa y no estás seguro del tipo de los datos recibidos. En este caso, puedes utilizar unknown para asignar los datos sin generar advertencias de TypeScript. Luego, puedes realizar verificaciones de tipo o conversiones explícitas según sea necesario.

let data: unknown = fetchDataFromExternalSource();

// Realizar una verificación de tipo antes de utilizar los datos
if (typeof data === 'string') {
  // Procesar los datos como una cadena de texto
  console.log(data.toUpperCase());
} else if (typeof data === 'number') {
  // Procesar los datos como un número
  console.log(data * 2);
} else {
  // Otros casos
}

En este ejemplo, el uso de unknown te permite manejar datos dinámicos sin tener información precisa sobre su tipo. Puedes realizar comprobaciones de tipo o conversiones explícitas para trabajar con los datos de manera segura y evitar errores en tiempo de ejecución. . Recuerda que aunque any y unknown ofrecen flexibilidad, también conllevan el riesgo de perder los beneficios del sistema de tipos estático de TypeScript. Por lo tanto, es recomendable utilizarlos de manera responsable y realizar las verificaciones de tipo necesarias para mantener la seguridad y confiabilidad del código.

Oscar Fuentes Esteves

Rafael Moro

Angel Hernandez

Railly Hugo

Diego Raciel Ortega Hernandez

Axel Enrique Galeed Gutierrez

Jose Ever Muñoz Muñoz

Irving Juárez

Daniel Iturralde

Alex hernandez mitre

Luis Gerardo Rosas Ruiz

Diego fernando Arboleda barrios

Eder Ramirez

Cristian David Casallas Velandia

José Fabián Beltrán Meza

Julio Manuel Nieto

Moises Hernandez

David Flores

teacher•

Nicolas Molina

Douglas Tovar

Miguel Angel Reyes Moreno

Juan David Reyes

Gustavo Pú

Andres López

Juan Carlos Montilla Sánchez

Eudes Serpa

Diego Andrés Rojas Pinzón

Tipos inferidos

Introducción a TypeScript

Por qué usar TypeScript

TypeScript vs. JavaScript

Configurado nuestro proyecto

Atrapando bugs

El compilador de TypeScript

Veamos el TSConfig.json

Tipos de datos primitivos

Qué es el tipado en TypeScript

Tipos inferidos

Numbers

Booleans

Strings

Arrays

Tipos de datos especiales

Any

Union Types

Alias y tipos literales

Null y Undefined

Funciones

Retorno de funciones

Objetos en funciones

Objetos como tipos

Módulos: import y export

Usando librerías que soportan TypeScript

Usando librerías que NO soportan TypeScript

Próximos pasos

Toma el Curso de Tipos Avanzados y Funciones en TypeScript