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
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.
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.
Sin embargo, esta simplicidad puede convertirse en un problema cuando los tipos se vuelven más complejos o menos obvios.
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.
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);
}
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.
any
any
implícito. Por ejemplo, en el archivo tsconfig.json
, configuraciones como noImplicitAny
y strictNullChecks
pueden 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.
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
Diferencias de tipado:
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
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?