1 Por Qué TypeScript en 2025
TypeScript ha dejado de ser opcional para convertirse en el estándar de facto del desarrollo web moderno. En 2025, más del 80% de los proyectos nuevos lo adoptan.
Detección temprana de errores
El compilador detecta errores antes de ejecutar el código. Los typos, propiedades inexistentes y type mismatches se capturan en desarrollo, no en producción.
Autocompletado y documentación viva
Tu IDE conoce la estructura completa de tu código. IntelliSense muestra métodos disponibles, parámetros esperados y documentación inline. La productividad se multiplica.
Refactoring seguro
Renombra, mueve y reestructura con confianza. TypeScript actualiza todas las referencias automáticamente.
Escalabilidad
Proyectos grandes con múltiples desarrolladores se vuelven manejables. Los contratos de tipos actúan como documentación ejecutable.
2 Configuración Óptima
Un buen tsconfig.json es fundamental. Aquí la configuración recomendada para 2025:
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"jsx": "react-jsx",
"moduleResolution": "bundler",
// Strict mode (SIEMPRE activado)
"strict": true,
"noUncheckedIndexedAccess": true,
"noImplicitOverride": true,
// Imports
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
// Output
"declaration": true,
"sourceMap": true,
"removeComments": true,
// Paths
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}💡 Consejo
NUNCA desactives strict mode. Es la clave para aprovechar TypeScript al máximo.
3 Tipos Básicos y Avanzados
Primitivos y arrays
// Primitivos
const nombre: string = "Juan"
const edad: number = 30
const activo: boolean = true
// Arrays
const numeros: number[] = [1, 2, 3]
const nombres: Array<string> = ["Ana", "Luis"]
// Tuplas
const coordenadas: [number, number] = [40.4168, -3.7038]Interfaces y Types
// Interface (extensible)
interface Usuario {
id: number
nombre: string
email: string
edad?: number // Opcional
}
// Type (alias)
type ID = string | number
// Union types
type Estado = "activo" | "inactivo" | "pendiente"
// Intersection types
type UsuarioConRol = Usuario & { rol: string }Generics
// Función genérica
function obtenerPrimero<T>(array: T[]): T | undefined {
return array[0]
}
const num = obtenerPrimero([1, 2, 3]) // number | undefined
const str = obtenerPrimero(["a", "b"]) // string | undefined
// Interface genérica
interface Respuesta<T> {
data: T
error: string | null
loading: boolean
}
type UsuarioRespuesta = Respuesta<Usuario>Utility Types
// Partial - todos los campos opcionales
type UsuarioParcial = Partial<Usuario>
// Required - todos los campos obligatorios
type UsuarioCompleto = Required<Usuario>
// Pick - seleccionar campos
type UsuarioNombreEmail = Pick<Usuario, "nombre" | "email">
// Omit - excluir campos
type UsuarioSinId = Omit<Usuario, "id">
// Record - objeto con claves específicas
type UsuariosPorId = Record<number, Usuario>4 Patrones Útiles
Type guards
function esUsuario(obj: any): obj is Usuario {
return typeof obj.id === 'number' && typeof obj.nombre === 'string'
}
function procesar(data: Usuario | string) {
if (esUsuario(data)) {
console.log(data.nombre) // TypeScript sabe que es Usuario
} else {
console.log(data.toUpperCase()) // TypeScript sabe que es string
}
}Discriminated Unions
type Exito = {
tipo: "exito"
datos: Usuario
}
type Error = {
tipo: "error"
mensaje: string
}
type Resultado = Exito | Error
function manejar(resultado: Resultado) {
if (resultado.tipo === "exito") {
console.log(resultado.datos) // ✓ TypeScript sabe que existe
} else {
console.log(resultado.mensaje) // ✓ TypeScript sabe que existe
}
}Template Literal Types
type EventoClick = "onClick" | "onDoubleClick"
type EventoMouse = "onMouseEnter" | "onMouseLeave"
type TodosEventos = EventoClick | EventoMouse
// Generar tipos dinámicamente
type Color = "red" | "blue" | "green"
type ColorCSS = \`bg-\${Color}\` // "bg-red" | "bg-blue" | "bg-green"5 TypeScript con React
Componentes funcionales
interface BotonProps {
texto: string
onClick: () => void
variant?: "primary" | "secondary"
disabled?: boolean
}
export const Boton: React.FC<BotonProps> = ({
texto,
onClick,
variant = "primary",
disabled = false
}) => {
return (
<button
onClick={onClick}
disabled={disabled}
className={\`btn btn-\${variant}\`}
>
{texto}
</button>
)
}Hooks tipados
// useState
const [contador, setContador] = useState<number>(0)
const [usuario, setUsuario] = useState<Usuario | null>(null)
// useRef
const inputRef = useRef<HTMLInputElement>(null)
// useContext
const AuthContext = createContext<{
usuario: Usuario | null
login: (email: string, password: string) => Promise<void>
logout: () => void
} | undefined>(undefined)
// Custom hook
function useLocalStorage<T>(key: string, initialValue: T) {
const [valor, setValor] = useState<T>(() => {
const item = window.localStorage.getItem(key)
return item ? JSON.parse(item) : initialValue
})
return [valor, setValor] as const
}Event handlers
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault()
console.log("Click!")
}
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
console.log(e.target.value)
}
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
// Procesar form
}6 Best Practices
Activa strict mode siempre
Es la única forma de aprovechar TypeScript completamente.
Evita any como la peste
Usa unknown si no conoces el tipo. Fuerza type guards.
Prefiere interfaces para objetos públicos
Son más flexibles y extensibles que types.
Usa const assertions
as const para valores literales inmutables.
No uses type assertions innecesarias
as solo cuando realmente lo necesites.
No dupliques tipos manualmente
Usa utility types y type inference.
7 Preguntas Frecuentes
¿TypeScript hace mi código más lento?
No. TypeScript se compila a JavaScript normal. No hay overhead en runtime, solo en desarrollo.
¿Puedo usar TypeScript con JavaScript existente?
Sí, TypeScript es un superset de JavaScript. Puedes migrar gradualmente archivo por archivo.
¿Interface o Type?
Interface para objetos y clases. Type para uniones, intersecciones y aliases. En la duda, interface.
¿Vale la pena en proyectos pequeños?
Absolutamente. TypeScript ayuda desde el primer día. El setup es mínimo con Vite o Next.js.
¿Listo para TypeScript?
En WebDevFactory desarrollamos con TypeScript desde el día uno para garantizar código robusto y mantenible.
Código type-safe
Best practices
Productividad 10x