No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Tipos inferidos

8/24
Recursos

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:
Autocompletado en Visual Studio Code

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.

Aportes 25

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

En el anterior curso 2020 de TS el profesor expostaba un objeto vacio para poder quitar los errores del editor:

export {}

Sin embargo, nunca entend铆 bien el porqu茅, aunque tenga m谩s l铆neas de c贸digo, creo que es mejor practica la que se ve en esta clase.

Inmediately Invoked Function Expression (IIFE).

Tambi茅n se pueden usar para simular un 鈥榯op level await鈥:

(async () => { 
	...
	const students = await window.fetch(...)
	...
})() 

De esta clase podemos concluir:

  • TS usa tipos inferidos para 鈥渁signar鈥 tipos de datos a variables sin que se las tengamos que asignar de manera explicita
  • Entre los beneficios de usar TS esta el hecho de que tenemos los metodos usados a cada tipo de datos, como en el caso de una variable 鈥渟tring鈥, podemos acceder a el m茅todo toLowerCase de manera mas r谩pida
  • Al no tener aun modularizacion, TS nos alerta de que ciertas variables ya han sido declaradas, esto lo podemos prevenir con funciones an贸nimas autoejecutadas

Les recomiendo la extensi贸n Error Lens en VSCode.
Te permite ver los errores en tiempo real y te indica en la misma l铆nea, en donde ten茅s el error y la descripci贸n del mismo.
Ejemplo:

una funci贸n an贸nima auto-ejecutada :

(( ) => {

}) ( );

Les comparto mis apuntes. 馃槃

Tipo de dato inferido

Sin necesidad de especificar el tipo de dato, TypeScript supone o deduce el mismo con el valor que le asignamos a la variable.

Es recomendable usarlo por encima del tipo de dato explico cada vez que sea posible.

Variables (let y var)

En TypeScript nos dice el tipo de dato que tienen que recibir est谩s variables, ya que como son variables pueden solamente cambiar a lo largo del programa pero solo por ese tipo de dato.

Constantes (const)

Aqu铆 TypeScript no nos dice tipo de dato de nuestra constante, porque como su nombre lo indica, la misma no puede cambiar a lo largo del programa por otro valor.

Funciones an贸nimas autoejecutable

((parameters) => {
		statements
})();

No hay ninguna ventaja de utilizar un arrow function en un **IIFE **(Immediately Invoke Function Expression) por lo cual usar una funcion normal me parece mas correcto

(function() {

})()

Esas funciones se les conoce como IIFE (Immediately Invoked Function Expression)
Ac谩 te dejo la documentaci貌n

Ese Tipo de funci贸n es llamado Funci贸n IFEE (Immediately-invoked function expressions y este tipo de funci贸n se manda a llamar por si sola. Se puede escribir como arrow function o function declaration

(() => {
  
})()
(function() {
  
})()

muy interesante, siempre escuchaba sobre TS pero no habia tenido la oportunidad ni la necesidad de usarlo, pues definitivamente me esta gustando TS鈥

//* Funci贸n an贸nima autoejecutada

(() => {
  let myProductName = 'Product 1'
  let myProductPrice = 123

  //!myProductName = 123 no podemos hacer esto
  myProductName = 'change'
  myProductName.toUpperCase()

  myProductPrice.toString()

  const myProductStock = 1000
  //! myProductStock = 2000; no podemos hacerlo porque es una constante

})();

//* Hacemos esto para poder usar los mismos nombres de variables en otros archivos de TS.

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:
.

  1. 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.

  1. 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.

  1. 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.

a example :3

let myProductName = 'producto'; // tipo inferido (ya es una variable de strings)

let myProductPrice = 12; // tipo inferido (ya es una variable de tipo number)

 myProductName = 2; // ERROR! NO SE PUEDE ASIGNAR UN NUMERO A UNA VARIABLE DE TIPO STRING

myProductName = 'cambio'; // BIEN :)

 myProductPrice = 'hola'; // ERROR! NO SE SE LE PUEDE ASIGNAR UN STRING A UNA VARIABLE DE TIPO NUMBER

myProductPrice = 22; // BIEN :)

Les comparto otras formas de crear funciones an贸nimas auto-ejecutables

Forma cl谩sica:

(function(){
  console.log('Versi贸n cl谩sica');
})();

Con arrow function:

(()=>{
  console.log('Versi贸n arrow function')
})();

Crockford --> Creador de JSON:

((function(){
  console.log('Versi贸n Crockford');
})());

Forma Unaria:

+function(){
  console.log('Forma unaria');
}();
Creo que este problema ya lo solucionaron en versiones de TS +5
Hola a todos. 驴Alguien tiene recursos donde pueda leer m谩s acerca de la sint谩xis: (() => {})(); que vimos en esta clase? Me pareci贸 demasiado interesante y quisiera ver m谩s acerca de este tema. Gracias de antemano.
Se me crean unos archivos cuando compilo .map, alguien sabe por que? Tengo la impresion que activen algo que no debia en el tsconfig

Jajajaja hasta hoy entend铆 como es que funciona una IIFE. Siempre hab铆a escrito el c贸digo por mero h谩bito, no me hab铆a puesto a analizarlo.

Excelente clase, este curso es muy did谩ctico y siento que se me est谩 facilitando el aprendizaje.

TIPADO INFERIDO: Typescript deduce el tipado por default, es decir que si no colocamos el tipado tipescript lo hace por nosotros a trav茅s de su motor de inferencia.

que te avise que usaste esos valores en otro archivos es excelente.

Algo curioso que not茅, o que percibo, es que la inferencia de tipo, cuando se declara un valor let, Typescript te advierte del cambio, no tanto de tipo, sino de valor, como si quisiese tratarlo como constante de cierta forma.

Tambi茅n es curioso que al declarar constantes, el editor no te sugiere el tipo asignado en el tooltip.

Immediate-Invoked Function Expression (()=>{})()

Y yo que no entendia porque seguia tirandome errores, hasta que conoci las funciones anonimas autoejecutadas