Diferencias de tipado:
- Explícito: Lo ves en el código
- Implícito: Lo sabes luego de ver o leer el código
Introducción
TypeScript y React: Proyecto con Next.js y Hooks
Tipado Explícito en TypeScript: Mejora tu Código
Componentes React con TypeScript en Next.js
Tipado en React
Componente de Imágenes Perezosas con React y TypeScript
Props en React: Gestión de Tipos en TypeScript
Tipado de useState con TypeScript en React: Arrays de Strings
Refactorización de Tipos en React con TypeScript
React y el DOM
Manejadores de Eventos en React con TypeScript
Carga Diferida de Imágenes en React con UseRef y TypeScript
Carga de imágenes perezosa con IntersectionObserver y React
Extender atributos HTML en componentes React con TypeScript
Funciones y tipos en JavaScript y TypeScript
Configuraciones avanzadas
Tipos Globales en TypeScript para Aplicaciones RIA
Tipos personalizados en TypeScript para librerías sin tipos
Extensión de objetos Window en TypeScript para scripts externos
Próximos pasos
Tipado avanzado en Redux con TypeScript
Tipado Explícito en TypeScript: Mejora tu Código
2/16Recursos
Transcripción
¿Qué es el tipado implícito y el tipado explícito?
En el mundo de la programación, la claridad y la explicitud son esenciales para mantener un código comprensible y fácil de mantener. A continuación, exploramos dos conceptos críticos en TypeScript: el tipado implícito y el tipado explícito.
¿Cómo funciona el tipado implícito en TypeScript?
El tipado implícito en TypeScript ocurre cuando el motor del lenguaje infiere automáticamente el tipo de una variable a partir de su valor inicial. Por ejemplo, si declaras una variable con un número entero como let edad = 11, TypeScript deduce que edad es de tipo número sin necesidad de que especifiques explícitamente el tipo.
Beneficios del tipado implícito
- Simplicidad: Reduce el código que el desarrollador debe escribir.
- Rapidez: Permite una escritura más ligera cuando los tipos son obvios.
Sin embargo, esta simplicidad puede convertirse en un problema cuando los tipos se vuelven más complejos o menos obvios.
¿Por qué es preferible el tipado explícito?
Ser explícitos al definir los tipos en TypeScript es una práctica que ayuda a evitar confusiones, tanto para el intérprete del código como para otros desarrolladores que trabajen en el mismo proyecto. Al indicar explícitamente el tipo, se establece un "contrato" que asegura qué es lo que se espera de nuestras funciones, variables y valores de retorno.
Ventajas del tipado explícito
- Precisión: El código es más claro y menos propenso a errores.
- Colaboración: Facilita la comprensión entre compañeros, especialmente en proyectos grandes.
Por ejemplo, si tienes una función que suma los elementos de un array, puedes especificar que tanto los argumentos como el valor de retorno deben ser números, previniendo errores lógicos en el código.
function sumarNumeros(args: number[]): number {
return args.reduce((a, b) => a + b, 0);
}
¿Cómo configuramos TypeScript para evitar el 'any' implícito?
TypeScript, de manera predeterminada, puede asignar el tipo any a las variables cuyo tipo no se puede inferir. Sin embargo, esto puede llevar a problemas, ya que any permite cualquier tipo de valor, rompiendo la seguridad que ofrece el tipado fuerte de TypeScript.
Estrategias para evitar el uso de any
- Configuraciones del compilador: En TypeScript, podemos establecer configuraciones que eviten el tipado
anyimplícito. Por ejemplo, en el archivotsconfig.json, configuraciones comonoImplicitAnyystrictNullCheckspueden ser muy útiles.
Ambas configuraciones hacen que TypeScript sea más estricto y evitan que se creen tipos any por accidente o que las funciones tengan valores de retorno implícitos.
Reflexión final sobre el tipado
La claridad en el código puede ser la diferencia entre un proyecto exitoso y uno plagado de errores y malentendidos. Con TypeScript, se nos da la oportunidad de mejorar la calidad del código a través del tipado explícito. ¡Así que no escatimemos en ser claros y precisos en nuestros desarrollos!
Aportes 6
Preguntas 0
Ordenar por:
🤔 ¿Debería especificar que tipo de dato se devolverán en las funciones?
Existen muchas opiniones acerca si debemos devolver los tipos, ya como menciona la clase, se tiene el beneficio de predecir que se devolverá en un futuro. Pero puede haber una perdida de la “verdad”. En este video se explica el porqué varios desarrolladores con perfiles interesantes (CTO de vercel, desarrolladores de librerías como astro, trpc, react query, entre otros…) prefieren retornar tipos inferidos
Como opinión personal, en el 90% de los casos me gusta retornar los tipos inferidos a menos de que se trate de crear tipos para un contexto de React, o alguna función específica como ser las funciones de Next.js.
import { GetStaticProps } from 'next'
type Post = {
author: string
content: string
}
export const getStaticProps: GetStaticProps<{ posts: Post[] }> = async (
context
) => {
const res = await fetch('https://.../posts')
const posts: Post[] = await res.json()
return {
props: {
posts,
},
}
}
}
👀 Pero al final tú tienes la decisión final, me gustaría saber cuáles son tus opiniones acerca de especificar el tipo de retorno en las funciones o retornar los tipos inferidos
Por qué hacer “tipado” en React?
Los beneficios de Typescript no suelen verse en el momento sino más adelante en el desarrollo. Por ejemplo es más facil saber cuales son los props y sus tipado de los componentes que vas a utilizar.
Aunque si admito que toma su tiempo y debes tener paciencia, por ejemplo yo tengo un interface del estado global del Redux que armo a partir del initialState en los reducers, lo cual no es facil de hacer pero que te facilita mucho las cosas más adelante
Vamos a darle xD
En el código, mientras más explícito seas, mejor, porque sabemos qué tipo de dato manejamos.
Al ser 100 porciento explícito nos aseguramos de no tener errores de tipado en la aplicación. Puede hacer que el escribir código nos tome más esfuerzo, pero nos ahorramos dolores de cabeza al momento de hacer troubleshooting.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?