Абсолютное разрешение пути модуля в файлах TypeScript в VSCode

Я не могу убедить VSCode разрешить абсолютные пути модуля TypeScript. Относительные пути работают, но абсолютного нет. Я хотел бы, чтобы VSCode разрешал пути к модулю из ./src.

// 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';

Последнее, конечно, не учитывается, так как каждый путь проекта разработчика сильно отличается. Но даже если бы мы установили системную переменную %ProjectXRoot%, мы не сможем использовать эту переменную в коде. VSCode не разрешит такой путь к модулю. Я пробовал.

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

Установленные версии
• TypeScript: 1,8.10
• VSCode: 1.1.1

Вопрос

Я попытался каким-то образом настроить VSCode для решения абсолютных путей модулей, но не может этого сделать. Я попытался настроить tsconfig.json(в корне проекта), добавив baseUrl в двух разных местах.

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

Я пробовал такие значения, как src, ./src и ./src/, но ни один из них не работает в каком-либо верхнем месте конфигурации.

Итак, как настроить VSCode для разрешения абсолютных путей модулей из определенной папки?

Если это невозможно, было бы, по крайней мере, лучше разрешить абсолютные пути из корня проекта. Я понятия не имею, как VSCode определяет это? Это где вы открываете папку или это где находится папка .vscode? Без понятия. Но это все равно будет жизнеспособным решением для абсолютных путей. Я пробовал использовать ~, аналогичный VS, но безрезультатно.

Изменить ^{(неразрешенный)}

Как @steinso указывает в своем ответе, все модули, начиная с /, ./ или ../ считаются относительными. Особенно первый меня полностью удивил, так как я обычно рассматриваю его как корневой путь проекта. Но этот факт в основном означает, что главный вопрос теперь становится следующим: Как я могу обеспечить импорт модулей как абсолютные пути ^{(из некоторого пути корневой папки проекта)} вообще? Пути запуска с косой чертой обычно означают абсолютную, но в этом случае это не так.

Даже когда я устанавливаю параметр компилятора moduleResolution в classic (так что разрешение модуля не будет выглядеть в папке node_modules), второй набор вышеперечисленных им операций должен фактически работать все в соответствии с подключенным Microsoft документ. Но по какой-то причине я все еще получаю красные squiggly строки в VSCode и ошибки во время компиляции.

Итак, как я могу импортировать конкретный модуль проекта, не предоставляя ему относительный путь, а скорее его собственный путь к проекту?

Ответ 1

Чтобы иметь возможность использовать абсолютные пути из импорта в typescript с помощью VSCode, вы должны использовать следующую версию typescript - [email protected], которая является typescript v2. Для этого сделайте следующее:

Установите typescript @next через npm, для установки typescript v2.x

npm i [email protected] -D
В VSCode

i) goto Файл > Настройки > Параметры рабочей области. [Создает каталог .vscode в корне проекта и инициализирует файл settings.json]

ii) Поместите следующую пару key:value в файл settings.json

"typescript.tsdk": "node_modules/typescript/lib"
В tsconfig.json добавить следующую пару ключ: значение в 'compilerOptions'

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

Обновить VSCode

Если у вас есть следующая структура каталогов:

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

Затем для импорта /src/app/shared/service.ts из main.ts теперь вы можете import {} from 'src/app/shared/service;

Если вы используете webpack и ts-loader для пересылки файлов .ts, вы должны добавить следующее в раздел resolve конфигурационного файла webpack.config.js.

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

Обратитесь к this для абсолютного разрешения модуля.

Ответ 2

Вам нужно указать:

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

Базовый путь будет по умолчанию установлен в каталог вашего tsconfig.json, добавьте rootDir в compilerOptions, чтобы изменить его. EDIT: Это, похоже, не имеет никакого эффекта.

Это позволит импортировать, например:

import { Interface } from 'api/interfaces';

Обратите внимание, что любой путь, начинающийся с . или ../ или /, считается относительным.

Изменить: Разрешение модуля

Имейте в виду, как модули решаются. Путь к модулю по-прежнему имеет отношение к текущему файлу.

Используйте пример для иллюстрации для текущего сценария:

Скажем, вы import { Interface } from "api/interfaces", из исходного файла /src/views/View.ts. Typescript будет искать модуль в следующих путях:

/SRC/вид/api/interfaces.ts
/SRC/api/interfaces.ts
/api/interfaces.ts

Примечание:, как это все еще делает его относительным, представьте, если вы import {Home} from "Home/Home", когда находитесь в /src/views/View.ts. В этом случае он будет работать, даже если путь /src/views/Home/Home.

Это возможные разрешения:

/src/views/Home/Home → Обратите внимание, как это будет работать.
/SRC/Home/Home
/Home/Home

Более подробную информацию можно найти здесь: http://www.typescriptlang.org/docs/handbook/module-resolution.html

Вопрос

Изменить (неразрешенный)

Ответ 1

Ответ 2

Изменить ^{(неразрешенный)}