Как исправить ошибку компиляции TypeScript?

Question

[Никита Соколов]

Долгое время не изучал ts и давно забыл что и куда. Сейчас необходимо вернуться к моей старой поделке... При сборке проекта все четко собирается - никаких проблем, но если запустить npm test то почему то выдает такое:

TSError: ⨯ Unable to compile TypeScript:
src/plugin/modules/model.ts:7:13 - error TS2304: Cannot find name 'Settings'.

settings: Settings = {

Сам скрипт npm test выполняет такие команды:

webpacktemplate@1.0.0 test /Users/nikita/Desktop/работа/FSD-plugin
mocha -r ts-node/register src/plugin/tests/*.ts

Весь проект выложил на гитхабе: https://github.com/burningyouth/FSD-plugin

Может кто знает в чем проблема? Почему не видит интерфейсы? Они у меня есть в src/plugin/@types и при нормальной сборке все ок, но тесты не работают. Мне кажется, что проблема в том, что при компиляции @types учитывается, а при тесте нет. Я что-то явно упускаю, причем очевидное, но не пойму что.

UPD: Тесты работают, если убрать интерфейс Settings. И если этот интерфейс засунуть прям в файл, то все ок... Значит mocha не видит мои интерфейсы просто.

Comments

[twoone]

Существует три способа написания кода -
> неправильно
> правильно
> неправильно но работает

Все относительно typescript у вас прпенадлежит (видимо) к тертьему случаю. Для подключения существует опция компилятора typeRoots. Необходимо включить isolatedModules. Декларации должны определять экспорты, а файлы зависящие от них должны импортировать необходимое.

Кроме того может быть конфликт путей, но если вы Settings засовываете прямо в Model и вс5 работает, то этот вариант отпадает.

Попробуйте исправить то на что я указал и там уже дальше думать. У меня нет возможности поправить самому.

[Никита Соколов]

twoone, не совсем решилась проблема.
Добавил опции компилятора в tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "removeComments": true,
    "target": "es5",
    "noEmit": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "typeRoots": ["src/plugin/types/slider.d.ts"], //вот
    "types": ["node", "chai", "mocha", "jquery"] //и вот
  },
  "include": ["src/plugin/types/slider.d.ts", "src/plugin/slider/slider.ts"],
  "exclude": ["build/*", "dist/*", "node_modules/*", "src/plugin/tests/*"],
  "awesomeTypescriptLoaderOptions": {
    "useBabel": true,
    "babelOptions": {
      "babelrc": true
    },
    "babelCore": "@babel/core"
  }
}

Ничего не поменялось, все так же компилируется и не тестриуется.

Добавил в slider.d.ts экспорты:

export { JQuery, AdditionalClasses, Settings, Elements, MethodsToElements };

появились ошибки где у меня JQuery стоит:

interface JQuery {
  slider: (options?: Object) => JQuery<HTMLElement>; //вот тут (Type 'JQuery' is not generic.)
}

interface AdditionalClasses {
  wrapper?: string;
  base?: string;
  handler?: string;
  connector?: string;
}

interface Settings {
  min: number;
  max: number;
  range: boolean;
  startValue: Array<number>;
  align: number;
  additionalClasses: AdditionalClasses;
}

interface Elements {
  parent?: JQuery<HTMLElement>; //и здесь везде (Type 'JQuery' is not generic.)
  wrapper: JQuery<HTMLElement>;
  base: JQuery<HTMLElement>;
  handlers: Array<JQuery<HTMLElement>>;
  connector: JQuery<HTMLElement>;
}

interface MethodsToElements {
  wrapper: Array<Function>;
  base: Array<Function>;
  handler: Array<Function>;
  connector: Array<Function>;
}

export { JQuery, AdditionalClasses, Settings, Elements, MethodsToElements };

Далее закомментил первый интерфейс и убрал его из экспорта - помогло, но первый интерфейс у меня нужен для декларации метода JQuery.fn.slider (иначе там ошибка появляется из-за того, что я расширяю jquery чем-то новым). Ну если забить на этот метод, то все работает. То есть в jquery какая-то проблема чтоли.

В интернете уже пытался искать эту ошибку (Type 'JQuery' is not generic.) - ничего не нашел.

[Никита Соколов]

twoone, Короче решается это просто отделением интерфейса JQuery в другой файл без экспортов. Я не понял как это работает...

[Никита Соколов]

twoone, В любом случае спасибо за поддержку, можете ответ на вопрос какой-нибудь написать, я отмечу его ответом потом (если надо вдруг)

[twoone]

Никита Соколов первое что бросается в глаза это "src/plugin/types/slider.d.ts" и в typeRoots и include. Декларации лучше в typeRoots подключать.

Далее вот этот код -

interface JQuery {
  slider: (options?: Object) => JQuery<HTMLElement>; //вот тут (Type 'JQuery' is not generic.)
}

Вы должны расширить интерфейс JQuery, а вместо этого определяете новый не обобщенный тип. Кроме того в описании сигнатуры функции используете обобщенный тип JQuery из оригинальной библиотеки, хотя она не экспортирована, а поидее должна. Поэтому для расширения вам необходимо полностью описать интерфейс как в оригинале -

interface JQuery<TElement = HTMLElement> extends Iterable<TElement> {}

И кроме того может потребоватся повторения пространства имен. То есть переопределение интерфейса должно находится по пути @types/jquery/index.d.ts В этот модуль может потребоватся импорт типов из стандартной библиотеки.

А вообще подобные случаи редки и кроме того каждый отдельный случай имеет свои нюансы. Это из-за различий в описании библиотек устанавливаемых с помощью дериктивы npm @types

Поэтому помочь очень сложно.