Cursos Empresas Blog Live Conf Eventos Precios

0:0010:04

Resolviendo módulos

Curso de TypeScript 3

Clase 30 de 32

Clase 30 / 32

Matias Sebastian Perez

Hace 6 años

Creo que hay un error en este punto:

En mi opinión lo subrayado debería ser de esta manera:

/typescript/photo-app/picture/index.ts /typescript/photo-app/picture/index.tsx /typescript/photo-app/picture/index.d.ts

Me apoyo en la documentacion oficial

Ulises Rojas González

Hace 6 años

Muy buen aporte, creo que efectivamente tienes razón

Ulises Rojas González

Hace 6 años

Y ahora que lo mencionas, el mismo error está cometido en la diapositiva de import de Node no relativo. Según la documentación, el import sigue esta ruta: . Similarly, a non-relative import will follow the Node.js resolution logic, first looking up a file, then looking up an applicable folder. So import { b } from "moduleB" in source file /root/src/moduleA.ts would result in the following lookups:

/root/src/node_modules/moduleB.ts
/root/src/node_modules/moduleB.tsx
/root/src/node_modules/moduleB.d.ts
/root/src/node_modules/moduleB/package.json (if it specifies a "types" property)
/root/src/node_modules/@types/moduleB.d.ts
/root/src/node_modules/moduleB/index.ts
/root/src/node_modules/moduleB/index.tsx
/root/src/node_modules/moduleB/index.d.ts

/root/node_modules/moduleB.ts
/root/node_modules/moduleB.tsx
/root/node_modules/moduleB.d.ts
/root/node_modules/moduleB/package.json (if it specifies a "types" property)
/root/node_modules/@types/moduleB.d.ts
/root/node_modules/moduleB/index.ts
/root/node_modules/moduleB/index.tsx
/root/node_modules/moduleB/index.d.ts

/node_modules/moduleB.ts
/node_modules/moduleB.tsx
/node_modules/moduleB.d.ts
/node_modules/moduleB/package.json (if it specifies a "types" property)
/node_modules/@types/moduleB.d.ts
/node_modules/moduleB/index.ts
/node_modules/moduleB/index.tsx
/node_modules/moduleB/index.d.ts

Comentarios (17)17 comentarios

Beto Toro

existen los path alias para que no tengamos que lidiar con esa mano de puntos y slash en nuestros proyectos. Esta configuración la pueden poner en el ts.config.json dentro de compilerOptions y así pueden acceder al shortcut @item para llegar a esa carpeta en específico que están buscando. Para el ejemplo yo tengo una carpeta item y dentro el archivo index.ts.

"paths": { 
      "@item": ["item/index.ts"],
    }

y así se podría importar

import { Item }  from  '@item'

Isabella Susana

Buen aporte.

Jimmy Buriticá Londoño

Hace 5 años

No sabia que esto se podía hacer, gracias por compartir.

Jose Daniel Barría Reyes

Resolviendo Modulos: Typescript resuelve la ubicacion de modulos observando referencias relativas y no relativas. Posteriormente intenta localizar el modulo usando una estrategia de resolucion de modulos.

tsc --moduleResolution node
tsc --moduleResolution classic

diferencias node: Modulos CommonJs o UMD, mas opciones de configuración classic: Modulos AMD, System, ES2015, poco configurable

en tsconfig.json

"moduleResolution": "node|classic"
"traceResolution":true

Reinaldo Mendoza

Gracias por el resumen

Taner Alfredo Alberto Sarmiento

Sinceramente no veo viable esto... Creo que es mejor ser específico con la ruta del archivo...

Camilo José Mezú Mina

Si, pero si es un archivo que se utiliza varias veces y tiene una ruta compleja es más cómodo otra alternativa, o un path alias

Miguel Angel Reyes Moreno

Estoy de acuerdo contigo.

Cristian Caraballo

¿ Por que index.d.ts ?

Cristian Florez

silvana murgo

Francisco Javier Antúnez Durán

No logré entender correctamente la finalidad de esta clase. ¿que ventajas tiene, o como podemos implementar lo aprendido?

Jose Daniel Hernandez Quiceno

El profesor esta enseñando organizacion en el codigo y buenas practicas para desarrollar con TypeScript o cualquier otro lenguaje de programacion

Enrique Tecayehuatl

Con módulo lo importante es saber que existen diferentes maneras de importar archivos/clases, etc. una es con commonjs, otra puede ser amd, etc.

Anthony Torres Vargas

tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "ES2015",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "outDir": "./dist",                        /* Redirect output structure to the directory. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "moduleResolution":"node",
    "traceResolution": true,
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

Hector Rubi Garcia

Cuando ponemos el import no relativo en la clase Album tal como en la clase:

import { Item } from 'item'

Y utilizamos la estrategia classic El compilador si encuentra el archivo item.ts En la consola se ve como el si lo encuentra en el modo Classic

======== Resolving module 'item' from '/RUTA/typescript/photo-app/src/album.ts'. ========
Explicitly specified module resolution kind: 'Classic'.
File '/RUTA/typescript/photo-app/src/item.ts' exist - use it as a name resolution result.
======== Module name 'item' was successfully resolved to '/RUTA/typescript/photo-app/src/item.ts'. ========

Jorge Cruz Perez

Luis, estoy intentando correr sobre un navegador, no me genera errores al transpilar de ts a js, el problema es que el navegador intenta buscar mis modulos con extension js y el transpilado no les pone extension, ejemplo: archivos ts

archivos transpilados js:

c La pregunta es: ¿Como le hago para que los import si tengan la extension .js (sin escribirlo a mano, porque asi si funciona en el navegador) o que tengo configurar? Gracias

Andres David Sanchez

el navegador te muestra un error? intenta correr el codigo con el servidor parser bundler

Diego Fernando Caviedes Camaho

ese archivo picture.d.ts cual es y donde lo puedo ver

Christopher Andrés Guano Valencia

¡Hola! Es un archivo parar las declaraciones de tipo de TypeScript, y no es que lo puedas ver si no lo tienes creado. Lo que explica el profesor es que el compilador de TypeScript buscará archivos de ese tipo en ese orden, si encuentra uno lo ejecuta. Esto sirve para resolver errores, bugs o solucionar alguna configuración que no esté compilando de manera correcta.

¡Nunca pares de aprender! 💚

gracias andres

José Antonio Torres

German Vera

Analizador de rutas de resolucion

Moisés Manuel Morín Hevia

Resolución de módulos, la ubicación de los módulos puede ser relativa y absoluta.

Raul Hernández

Para buscar en consola (o en casi cualquier lado) se usa

Ctrl + f

Sí, podemos buscar & renombrar

Naldo Duran

Carlos Javier Bazan Huaman

habrá alguna herramienta o paquete que haga todo esto por abajo?

Andrés Felipe Eslava Zuluaga

Documentación de Module Resolution:

Resolviendo módulos

Progreso del curso

Introducción a TypeScript

Entorno de Desarrollo

Tipos en TypeScript

Tipos Personalizados

Módulos

Cierre