Блог

Я переношу проект JavaScript на TypeScript. Существующий JavaScript использует requirejs для загрузки модуля, и я хотел бы сделать то же самое в TypeScript.

У меня есть один модуль, который выдает ошибки «не удается найти модуль» из своих import инструкций при компиляции. У меня есть правильные <reference/> теги, и модули ссылок будут работать во время выполнения, как и ожидалось. Тем не менее, я хотел бы удалить эти ошибочные ошибки компилятора из моего окна списка ошибок.

Вот базовая файловая структура этого модуля и ссылки на него:

 root/
    helper.ts
    ui/
       uiModule.ts //This module is throwing the error
       panels/
           panel1.ts //The import of this module throws the error
  

Верхняя часть uiModule выглядит так:

 ///<reference path="../helper.ts"/>
///<reference path="panels/panel1.ts"/>

import helper = require("Helper");
import panel1 = require("Panel1");
  

Все модули настроены как отдельные классы, например:

 //references and imports...
class MyClass {
    //Methods...
}

export = MyClass;
  

Все имена файлов и import псевдонимы начинаются со строчной буквы; все имена классов начинаются с верхнего регистра.

Ошибки «не удается найти модуль», похоже, возникают только тогда, когда один модуль ссылается на другой в более глубокой папке. Если я изменю import инструкцию на `require(«Panels / panel1»), ошибка компилятора исчезнет, но во время выполнения произойдет сбой.

Как я могу правильно заставить эту ошибку перестать отображаться? У меня есть конфигурационный файл для requirejs. Могу ли я указать языковой службе на этот файл для разрешения ссылок на модули? Мне бы очень хотелось как можно больше отделять ссылки от путей к файлам во время разработки.

Итак, прежде всего, для определений классов вы можете обновить их, чтобы они выглядели так.

 export class MyClass {
    // TO-DO
}
  

Что касается операторов require, для компилятора нормально сообщать вам, что они не могут быть найдены.

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

 import helper = require("../helper");
import panel1 = require("./panels/panel1");
  

или

 // remember you can have a file with multiple exported objects
// or and 'index.ts' file inside a folder which exports multiple files
// by using the import syntax you can choose what to import from that module

import { helper } from '../helper';
import { panel1 } from './panels/panel1';  
  

это должно решить ваши текущие проблемы.

Пример проекта, над которым я работаю, с помощью TS для справки:

https://github.com/vladjerca/imgstry/tree/feature/typescript_port

Подробнее по теме:

https://www.typescriptlang.org/docs/handbook/modules.html

Не используйте относительные пути, т.е.

«.. / .. / помощник».

Всегда используйте абсолютные пути из папки вашего проекта, т.е. «приложение / компоненты / Помощник»

Также не ставьте / перед путем к файлу, так как это может вызвать проблемы.

Не используйте //ссылки, используйте

 import { myClass } from 'app/components/Helper';
  

Это также поможет requirejs легче находить ссылки на классы при объединении js.

Влад тоже правильный, просто измените определение вашего класса…

 export class Helper {
    [...]
}
  

вам не нужен оператор export = Helper в конце вашего файла.