module - tutorial - Resolución absoluta de la ruta del módulo en archivos TypeScript en VSCode

visual studio code tutorial español pdf

Question

Parece que no puedo convencer a VSCode para que resuelva las rutas absolutas de los módulos de TypeScript. Los caminos relativos funcionan, pero los absolutos no. Me gustaría que VSCode resuelva las rutas de los ./src carpeta ./src en.

// this works when source file is in /src/here/there/file.ts
// and importing an interface in /src/api/interfaces.ts
import { Interface } from ''../../api/interfaces'';

// this doesn''t work
import { Interface } from ''api/interfaces'';
import { Interface } from ''/api/interfaces'';
import { Interface } from ''src/api/interfaces'';
import { Interface } from ''/src/api/interfaces'';

// this works but is of course not supposed to be used
import { Interface } from ''c:/..../src/api/interfaces'';

El último, por supuesto, no cuenta, ya que la ruta del proyecto de cada desarrollador es muy diferente. Pero incluso si todos configuramos una variable de sistema %ProjectXRoot% no podemos usar esta variable en el código. VSCode no resolverá dicha ruta de módulo. He intentado.

// won''t work
import { Interface } from ''%ProjectXRoot%/api/interfaces'';

Versiones actualmente instaladas
• TypeScript: 1.8.10
• VSCode: 1.1.1

Pregunta

He intentado configurar VSCode de alguna manera para resolver rutas de módulo absolutas, pero parece que no puedo hacerlo. He intentado configurar tsconfig.json (en la raíz del proyecto) agregando baseUrl en dos lugares diferentes.

{
    ...
    "compilerOptions": {
        "baseUrl": "./src", // doesn''t work
        ...
    },
    "baseUrl": "./src", // doesn''t work either
    ...
}

He probado valores como src , ./src y ./src/ pero ninguno de ellos funciona en ninguno de los lugares de configuración superiores.

Entonces, ¿ cómo se configura VSCode para resolver rutas de módulo absolutas desde una carpeta determinada?

Si eso no fuera posible, al menos sería mejor resolver las rutas absolutas desde la raíz del proyecto. No tengo idea de cómo VSCode determina eso? ¿Es donde abres la carpeta o donde está la carpeta .vscode ? Ni idea. Pero todavía sería una solución viable para los caminos absolutos. He intentado usar ~ similar a VS pero en vano tampoco.

Editar ^{(sin resolver)}

Como @steinso señala en su respuesta, todos los módulos que comienzan con / , ./ o ../ se consideran relativos. Especialmente el primero me sorprendió por completo, ya que generalmente considero que es una ruta relativa a la raíz del proyecto. Pero este hecho básicamente significa que la pregunta principal ahora es: ¿Cómo puedo proporcionar importaciones de módulos como rutas absolutas ^{(desde alguna ruta de la carpeta raíz del proyecto )} ? Iniciar rutas con barras generalmente significa absoluto, pero en este caso no lo es.

Incluso cuando configuro la opción de compilación moduleResolution a classic (por lo que la resolución del módulo no node_modules en la carpeta node_modules ), el segundo conjunto de importaciones anterior debería funcionar de acuerdo con el documento vinculado de Microsoft. Pero por alguna razón, todavía obtengo líneas onduladas rojas en VSCode y errores durante la compilación.

Entonces, ¿cómo puedo importar un módulo de proyecto específico sin proporcionarle una ruta relativa exacta sino solo su propia ruta relativa al proyecto?

Answer 1

Necesitas especificar:

    "compilerOptions": {
        "moduleResolution": "classic"
        ...

La ruta base luego se establecerá de forma predeterminada en el directorio de su tsconfig.json, agregue rootDir en compilerOptions para cambiarlo. EDIT: Esto no parece tener ningún efecto.

Esto permitirá importaciones tales como:

import { Interface } from ''api/interfaces'';

Tenga en cuenta que cualquier camino que comience con . o ../ o / se considera relativo.

Edición: resolución del módulo

Tenga en cuenta cómo se resuelven los módulos. La ruta del módulo sigue siendo algo relacionado con el archivo actual.

Usemos un ejemplo para ilustrar el escenario actual:

Digamos que import { Interface } from "api/interfaces" , desde el archivo fuente /src/views/View.ts . Typescript buscará el módulo en las siguientes rutas:

1. / src / views / api/interfaces.ts
2. / src / api/interfaces.ts
3. / api/interfaces.ts

Nota: cómo esto todavía lo hace relativo, imagínese si import {Home} from "Home/Home" cuando se encuentra en /src/views/View.ts . En este caso, funcionaría incluso si la ruta es /src/views/Home/Home .

Estas son las posibles resoluciones:

1. / src / views / Home/Home -> Observe cómo funcionaría esto.
2. / src / Home/Home
3. / Home/Home

Puede encontrar más información aquí: http://www.typescriptlang.org/docs/handbook/module-resolution.html

Answer 2

Para poder usar rutas absolutas desde la importación en escritura de tipos usando VSCode, debe usar la próxima versión de typescript - typescript@next que es mecanografia v2. Para eso haz lo siguiente:

1. Instale typescript @ next a través de npm, para instalar typescript v2.x

   npm i typescript@next -D

2. En VSCode

   i) goto Archivo> Preferencias> Configuración del área de trabajo [Esto genera el directorio .vscode en la raíz del proyecto e inicializa el archivo settings.json ]

   ii) Coloque la siguiente key:value par de settings.json en el archivo settings.json

   "typescript.tsdk": "node_modules/typescript/lib"

3. En tsconfig.json agregue la siguiente clave: par de valor a ''compilerOptions''

{
  "compilerOptions" : {
    "baseUrl": "./",
    "paths" : {
      "src/*": ["./src/*"]
    }
  }
}

4. Recargar VSCode

Si tiene la siguiente estructura de directorios:

+ node_modules
+ src
| + app
| |  + shared
| |  |  -service.ts
| |  -main.ts
+ typings
- tsconfig.json
- webpack.config.json
- package.json
- index.html

Luego, para importar /src/app/shared/service.ts desde main.ts ahora puede import {} from ''src/app/shared/service ;

Si está utilizando webpack y ts-loader para transpilar los archivos .ts , debe agregarlo siguiendo a la sección de webpack.config.js archivo de configuración webpack.config.js .

resolve: {
    extensions: ['''', ''.js'', ''.ts''],
    alias: {
      "src": path.resolve(''./src'')
    }
  }

Por favor refiérase a this para la resolución absoluta del módulo.