Question

我正在将JavaScript项目迁移到TypeScript。现有的JavaScript使用requirejs进行模块加载，我想在TypeScript中做同样的事情。

我有一个投掷的模块＆＃34;找不到模块＆＃34;编译时来自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别名都以小写字母开头;所有类名都以大写字母开头。

＆＃34;找不到模块＆＃34;当一个模块引用更深层文件夹中的另一个模块时，似乎只会发生错误。如果我将import语句更改为`require（＆＃34; Panels / panel1＆＃34;），则编译器错误消失，但在运行时失败。

如何正确使此错误停止显示？我有一个requirejs的配置文件。我可以将语言服务指向该文件以解析模块引用吗？我真的希望尽可能在设计时将文件路径中的引用解耦。

Answer 1

首先，对于类定义，您可以将它们更新为这样。

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

Answer 2

不要使用相对路径，即

“../../助手”。

始终使用项目文件夹中的绝对路径，即 “应用/组件/助手”

也不要在文件路径前放置/因为这会导致问题。

不要使用//引用，请使用

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

这也有助于在捆绑js时使requirejs更容易找到类引用。

Vlad也是正确的，只是改变你的班级定义......

export class Helper {
    [...]
}

您不需要文件末尾的export = Helper语句。

带有requirejs的TypeScript无法找到模块错误

2 个答案: