0Pricing
TypeScript Academy · Lección

Importaciones y exportaciones solo de tipos

Utilice import type para evitar sobrecarga en tiempo de ejecución.

Importaciones y exportaciones solo de tipos es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 3 de 4. 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 4 lecciones en total.

Bienvenida

Las importaciones y exportaciones solo de tipos (import type / export type) se introdujeron en TypeScript 3.8 para ofrecer a los desarrolladores un control explícito sobre qué es una dependencia de ejecución y qué es únicamente un tipo.

Por qué son importantes los elementos solo de tipos

Las importaciones normales pueden incluir código de ejecución. Si solo necesita el tipo, la importación puede eliminarse por completo de la salida compilada.
import { User } from './models'; // includes runtime binding
import type { User } from './models'; // compile-time only, erased

Sintaxis de import type

Coloque `type` después de la palabra clave `import`. No puede utilizar el nombre importado como valor.
import type { ApiResponse } from './api-types';

function handleResponse(res: ApiResponse<User>): void {
  // ApiResponse used as type annotation only
}

Sintaxis de export type

Utilice `export type` para marcar explícitamente las exportaciones como solo de tipos.
// user.types.ts
export type UserId = string;
export type { User, UserRole };

Importación de tipo inline

TypeScript 4.5 y versiones posteriores permiten marcar importaciones individuales como solo de tipos dentro de una sentencia de importación normal.
import { type User, createUser } from './user';
// User is type-only, createUser is a runtime value

Resolver dependencias circulares

Las importaciones solo de tipos pueden resolver problemas de dependencias circulares porque no crean bindings de ejecución.

verbatimModuleSyntax

TypeScript 5.0 introdujo `verbatimModuleSyntax`. Al habilitarlo, DEBE utilizar `import type` para las importaciones solo de tipos a fin de evitar confusiones del bundler.
// tsconfig.json
{ "compilerOptions": { "verbatimModuleSyntax": true } }

importsNotUsedAsValues

La opción del compilador `importsNotUsedAsValues` (sustituida por verbatimModuleSyntax) controla cómo gestiona TypeScript las importaciones de valores no utilizadas.

Ventajas en bundlers

Los bundlers como Vite y esbuild utilizan las marcas `import type` para omitir el procesamiento de las importaciones de tipos y mejorar la velocidad de compilación.

Reexportaciones solo de tipos

Vuelva a exportar tipos sin incluir su módulo de ejecución.
// public-api.ts
export type { User, UserRole } from './internal-user';
export { createUser } from './internal-user'; // runtime

Error: no se puede usar import type como valor

Utilizar una importación solo de tipos como valor de ejecución provoca un error de compilación.
import type { User } from './user';
// const u = new User(); // Error — User was imported as type-only

Comprobación rápida

¿Cuándo debe utilizar `import type` en lugar de un `import` normal?

Resumen

Utilice `import type` y `export type` para las importaciones y exportaciones solo de tipos. Se eliminan en tiempo de compilación, evitan las dependencias de ejecución de los archivos de tipos y son obligatorios cuando `verbatimModuleSyntax` está habilitado.

Preguntas frecuentes

¿La lección «Importaciones y exportaciones solo de tipos» es gratis?

Sí — el texto completo de «Importaciones y exportaciones solo de 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 4 lecciones en total.

¿Qué aprenderé en «Importaciones y exportaciones solo de tipos»?

Utilice import type para evitar sobrecarga en tiempo de ejecución. 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 3 de 4.

¿Cuánto tiempo toma la lección «Importaciones y exportaciones solo de 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.

Todas las lecciones de este curso

  1. Sintaxis de módulos ES: import y export
  2. Reexportaciones y archivos barrel
  3. Importaciones y exportaciones solo de tipos
  4. Namespaces frente a módulos: uso moderno
← Volver a TypeScript Academy