Resolviendo módulos

Beto Toro

student•

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

student•

Buen aporte.

Jimmy Buriticá Londoño

student•

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

Jose Daniel Barría Reyes

student•

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

student•

Gracias por el resumen

Matias Sebastian Perez

student•

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

student•

Muy buen aporte, creo que efectivamente tienes razón

Ulises Rojas González

student•

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

Taner Alfredo Alberto Sarmiento

student•

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

Camilo José Mezú Mina

student•

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

student•

Estoy de acuerdo contigo.

Cristian Caraballo

student•

¿ Por que index.d.ts ?

Cristian Florez

student•

silvana murgo

student•

Francisco Javier Antúnez Durán

student•

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

Jose Daniel Hernandez Quiceno

student•

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

Enrique Tecayehuatl

student•

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

student•

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

student•

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

student•

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

student•

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

Diego Fernando Caviedes Camaho

student•

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

Christopher Andrés Guano Valencia

student•

¡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! 💚

Diego Fernando Caviedes Camaho

student•

gracias andres