// @ts-check en JS y JSDoc para obtener tipos
Active la comprobación de tipos en .js con // @ts-check y JSDoc; añada @param/@returns, @type/@typedef y @template para patrones genéricos; configure tsconfig para una migración gradual.
// @ts-check en JS y JSDoc para obtener tipos es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 1 de 1. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 1 lecciones en total.
Introducción
Objetivo: Obtener las ventajas de TypeScript dentro de archivos .js. Activará // @ts-check, añadirá tipos JSDoc y configurará tsconfig para una adopción gradual.
- Comprobación por archivo frente a todo el proyecto
- @param, @returns, @type, @typedef
- @template para helpers similares a los genéricos
Activar la comprobación
Añada // @ts-check al principio de un archivo .js. Utilice @param/@returns para documentar y tipar la función.
// calculator.js
// @ts-check
/**
* Adds two numbers.
* @param {number} a
* @param {number} b
* @returns {number}
*/
export function add(a, b) {
return a + b
}
// Usage: type errors appear if you pass non-numbers
// add("2", 3) // TS will flag this in JSTypedef y type
Utilice @typedef para definir una estructura reutilizable y @type para anotar variables. Los campos opcionales se marcan con ?.
// models.js
// @ts-check
/** @typedef {{ id: string; name: string; age?: number }} User */
/** @type {User} */
export const currentUser = { id: "u1", name: "Ada" }
/**
* Greets a user.
* @param {User} u
* @returns {string}
*/
export function greet(u) {
return `Hello, ${u.name}!`
}Parámetros de template
@template introduce parámetros de tipo para funciones similares a las genéricas en JS. La inferencia funciona en los puntos de llamada.
// helpers.js
// @ts-check
/**
* Maps items with a function, preserving types.
* @template T,U
* @param {T[]} items
* @param {(x: T) => U} f
* @returns {U[]}
*/
export function map(items, f) {
const out = []
for (const x of items) out.push(f(x))
return out
}
// Inference: T=number, U=string
// map([1,2], n => n.toFixed(2))tsconfig para JS
En todo el proyecto: active checkJs para todos los archivos .js. Establezca allowJs para incluir archivos JS en el programa. Utilice noEmit cuando un bundler gestione la salida.
// tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"checkJs": true,
"allowJs": true,
"strict": true,
"noEmit": true
},
"include": ["./**/*.js"],
"exclude": ["node_modules"]
}Consejos de migración
Consejos de migración:
- Empiece por los archivos críticos mediante
// @ts-check. - Cree pequeños
@typedefpara las estructuras compartidas. - Cambie gradualmente las rutas críticas a
.tscuando los tipos sean estables.
Comprobación de ts-check
Comprobación rápida: ¿Cómo activa la comprobación de TS en un archivo .js?
Repaso
Repaso: Active // @ts-check, añada @param/@returns/@typedef/@template y ajuste tsconfig para proyectos JS antes de migrar a .ts.
Preguntas frecuentes
¿La lección «// @ts-check en JS y JSDoc para obtener tipos» es gratis?
Sí — el texto completo de «// @ts-check en JS y JSDoc para obtener tipos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 1 lecciones en total.
¿Qué aprenderé en «// @ts-check en JS y JSDoc para obtener tipos»?
Active la comprobación de tipos en .js con // @ts-check y JSDoc; añada @param/@returns, @type/@typedef y @template para patrones genéricos; configure tsconfig para una migración gradual. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar TypeScript Academy?
No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 1.
¿Cuánto tiempo toma la lección «// @ts-check en JS y JSDoc para obtener tipos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?
Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.