Файл объявления Typescript, созданный с псевдонимом вместо относительного пути

Question

Редактировать 1: Добавлен GitHub URL в проект

Изменить 2: Удаление baseUrl от tsconfig.json исправляет все проблемы и работает с использованием относительного импорта.

Ссылка: Github

Как создать файл объявления машинописного текста с относительными путями вместо alias?

Я создаю библиотеку (samplelibrary) в режиме UMD и публикую ее в npm. В упакованной библиотеке npm есть только build папка (с наборами), package.json а также README.md

Когда я пытаюсь использовать библиотеку в другом приложении для машинописи, сборка завершается неудачно из-за генерируемого файла объявления недействительного типа. Файл объявления типа содержит псевдоним вместо относительного пути.

Журнал компиляции:

ERROR in /workspace/myproject/node_modules/samplelibrary/build/typings/src/foo.d.ts(403,17):TS2307: Cannot find module 'utils/bar

Как решить эту проблему?

Собственно созданный файл декларации foo.d.ts:

declare const Foo: {
   bar: typeof import("utils/bar");
}

Ожидаемый файл:

declare const Foo: {
   bar: typeof import("./utils/bar");
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "rootDir": "./",
    "baseUrl": "./src",
    "paths": {
      "@samplecompany/sampleproject": ["./"]
    },
    "outDir": "build",
    "removeComments": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "declaration": true,
    "declarationDir": "typings",
    "importHelpers": true
  },
  "files": ["types/untyped-modules.d.ts"],
  "include": [
    "src/**/*",
    "test/**/*",
    "build/**/*",
    "styleguide-renderer/**/*"
  ],
  "exclude": ["node_modules"]
}

Структура папки:

root
  -src
    -utils
       -bar.ts
    -foo.ts

Utils/bar.ts

export const bar = {
   hello: "World"
}

SRC /foo.ts

import { bar } from "./utils/bar.ts

export default const Foo = {
    bar
};

Answer 1

Чтобы исправить эту проблему,

• Удалить baseUrl использование из вашей конфигурации машинописи.
• Используйте только относительный импорт в вашем проекте, как ../somefile, ./somefolder/file, так далее.,

Исправлено здесь

Answer 2

Что ж, казалось, что это не сработает без серьезных уловок, но в конце концов я понял это. Таким образом, проблема в том, что необходимо переписать пути объявления типов. Для этого вам понадобится какой-нибудь бандлер / компилятор, который сделает это за вас. Я думаю, есть разные пакеты, которые делают это для tscна основе компиляции, но в моем случае я использую Rollup, поэтому их было не так много. Я нашел всего один https://github.com/zerkalica/zerollup/tree/master/packages/ts-transform-paths

Там есть инструкции, которые помогут вам его использовать. Но в основном вам нужно:

1. Установить yarn add -D @zerollup/ts-transform-paths ttypescript
2. Включите это в свой rollup.config.js
3. Добавьте плагин в свой tsconfig.json с участием "plugins": [{ "transform": "@zerollup/ts-transform-paths" }]

И теперь мои пути переписаны, например, с @react к "../../react/file". Ура!

И на всякий случай вот мои конфиги:

      {
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "declaration": true,
    "declarationDir": "./dist",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@context/*": ["src/context/*"],
      "@pm/*": ["src/pm/*"],
      "@react/*": ["src/react/*"],
      "@typings/*": ["src/typings/*"]
    },
    "plugins": [{ "transform": "@zerollup/ts-transform-paths" }]
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

      import alias from '@rollup/plugin-alias'
import typescript from 'rollup-plugin-typescript2'
import postcss from 'rollup-plugin-postcss'
import ttypescript from 'ttypescript'

import path from 'path'

import pkg from './package.json'

export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
    },
    {
      file: pkg.module,
      format: 'es',
    },
  ],
  external: [
    ...Object.keys(pkg.peerDependencies || {}),
  ],
  plugins: [
    alias({
      entries: [
        { find: '@context', replacement: path.resolve(__dirname, 'src/context') },
        { find: '@pm', replacement: path.resolve(__dirname, 'src/pm') },
        { find: '@react', replacement: path.resolve(__dirname, 'src/react') },
        { find: '@typings', replacement: path.resolve(__dirname, 'src/typings') },
      ]
    }),
    typescript({
      typescript: ttypescript
    }),
    postcss()
  ],
}

Answer 3

Вам не повезло: TypeScript не переписывает пути импорта. Смотрите это отклоненное предложение. Вам нужно будет воздерживаться от использования псевдонимов в вашей библиотеке, если вы не сконфигурируете псевдонимы в потребляющем проекте.