Contenido del curso
Resolviendo módulos
Beto Toro
Estudiante
Isabella Susana
Estudiante
Jimmy Buriticá Londoño
Estudiante
Jose Daniel Barría Reyes
Estudiante
Reinaldo Mendoza
Estudiante
Matias Sebastian Perez
Estudiante
Ulises Rojas González
EstudianteUlises Rojas González
Estudiante
Taner Alfredo Alberto Sarmiento
Estudiante
Camilo José Mezú Mina
Estudiante
Miguel Angel Reyes Moreno
Estudiante
Cristian Caraballo
Estudiante
Cristian Florez
Estudiante
silvana murgo
Estudiante
Francisco Javier Antúnez Durán
Estudiante
Jose Daniel Hernandez Quiceno
Estudiante
Enrique Tecayehuatl
EstudianteAnthony Torres Vargas
Estudiante
Hector Rubi Garcia
Estudiante
Jorge Cruz Perez
Estudiante
Andres David Sanchez
Estudiante
Diego Fernando Caviedes Camaho
Estudiante
Christopher Andrés Guano Valencia
EstudianteDiego Fernando Caviedes Camaho
Estudiante
José Antonio Torres
Estudiante
German Vera
Estudiante
Moisés Manuel Morín Hevia
EstudianteMoisés Manuel Morín Hevia
Estudiante
Raul Hernández
EstudianteMoisés Manuel Morín Hevia
Estudiante
Naldo Duran
EstudianteMoisés Manuel Morín Hevia
Estudiante
Carlos Javier Bazan Huaman
Estudiante
Andrés Felipe Eslava Zuluaga
Estudianteexisten 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'
Buen aporte.
No sabia que esto se podía hacer, gracias por compartir.
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
Gracias por el resumen
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
Muy buen aporte, creo que efectivamente tienes razón
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
Sinceramente no veo viable esto... Creo que es mejor ser específico con la ruta del archivo...
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
Estoy de acuerdo contigo.
¿ Por que index.d.ts ?
x2
x3
No logré entender correctamente la finalidad de esta clase. ¿que ventajas tiene, o como podemos implementar lo aprendido?
El profesor esta enseñando organizacion en el codigo y buenas practicas para desarrollar con TypeScript o cualquier otro lenguaje de programacion
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.
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. */ } }
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'. ========
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
el navegador te muestra un error? intenta correr el codigo con el servidor parser bundler
ese archivo picture.d.ts cual es y donde lo puedo ver
¡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
tsc --moduleResolution node tsc --moduleResolution classic
Analizador de rutas de resolucion
Resolución de módulos, la ubicación de los módulos puede ser relativa y absoluta.
Resolución de módulos, la ubicación de los módulos puede ser relativa y absoluta.
Para buscar en consola (o en casi cualquier lado) se usa
Ctrl + f
Sí, podemos buscar & renombrar
.
(:
habrá alguna herramienta o paquete que haga todo esto por abajo?
Documentación de Module Resolution:
