0Pricing
TypeScript Academy · Lección

// @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 JS

Typedef 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 @typedef para las estructuras compartidas.
  • Cambie gradualmente las rutas críticas a .ts cuando 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.

← Volver a TypeScript Academy