Resolución de Módulos

Entiende cómo TypeScript resuelve las importaciones.

Resolución de Módulos

TypeScript busca archivos basado en la importación.

Tipos de resolución

typescript

// Relative - rutas relativas
import { foo } from "./archivo";
import { bar } from "../carpeta/archivo";

// No relative - busca en node_modules
import { baz } from "lodash";
import { qux } from "@angular/core";

Extensiones que busca

typescript

import { foo } from "./archivo";
// Busca en orden:
// 1. archivo.ts
// 2. archivo.tsx
// 3. archivo.d.ts
// 4. archivo/index.ts
// 5. archivo/package.json (campo "types")

tsconfig.json

json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"],
      "@types/*": ["types/*"]
    }
  }
}

Uso de paths

typescript

// Sin paths
import { Button } from "../../../components/Button";

// Con paths
import { Button } from "@components/Button";

Resolución de nodos

typescript

// Para librerías con tipos
npm install --save-dev @types/lodash

// Para librerías sin tipos
// Crear: src/types/lodash.d.ts
declare module "lodash" {
  export function chunk<T>(array: T[], size: number): T[][];
}

Ejercicio pratico

Configura paths en tsconfig para usar alias en las importaciones.

exercise.ts

Resultado

Haz clic en "Ejecutar" para ver el resultado...

Imports Dinámicos

Siguiente modulo

Ver todos los modulos

Ir al examen del modulo