Typescript - 导入声明在内部模块中不能引用外部模块

Question

Typescript - 导入声明在内部模块中不能引用外部模块

javascriptoopimporttypescript

3

在VSCode中练习TypeScript，开发Todo应用程序时，尝试导入“todo”模块时，vscode智能提示会生成一个错误: 在内部模块中的导入声明不能引用外部模块。控制台也会报错：“TodoApp未定义”。

请问有人可以帮忙吗？我认为结构不正确，但似乎无法纠正。最终目标是将.ts文件编译成一个js文件“testApp.js”。

以下是我的代码：

task.ts

module TodoApp {

    export enum TaskType { FrontEnd, BackEnd, Designer };

    interface Itask {
        Name: string;
        Description: string;
        TaskType: TaskType;
        Completed: boolean;
    }

    export class Task implements Itask {
        Name: string;
        Description: string;
        Completed: boolean = false;
        TaskType: TaskType;

        constructor(Name: string, Description: string, TaskType: TaskType) {
            this.Name = Name;
            this.Description = Description;
            this.TaskType = TaskType;
        } 

    }

}

todo.ts

    ///<reference path="task.ts" />
///<reference path="../typings/jquery/jquery.d.ts" />

module TodoApp {
    "use strict"

    interface IJson {

    }

    interface ITaskManager { 
        Tasks: Task[];
        GetTasks(t: any[]): void;
        AddTask(t: Task): void;
        UpdateTask(n: string, d: string, tt: TaskType): void;
        DeleteTask: {
            (i: number): void;
            (i: Task): void;
        }
    }

    export class TaskManager implements ITaskManager {

        public Tasks = new Array<Task>();

        constructor() {

        }

        GetTasks(d: any[]) { 
        }

        public AddTask(_task: Task) {
            this.Tasks.push(_task);
        }

        UpdateTask(_name: string, _desc: string, _taskType: TaskType) {
        }

        DeleteTask(i: any) {
            if (typeof i === typeof Task) {
                //delete object

            } else {
                //delete task of index

            }
        }

    }
}

testApp.ts

module TestApp {

    import TodoApp = require("todo"); ///<< error occurs here

    export class ControlTodoApp { 

        static Start() {

            window.onload = function(e) {
                var tm = new TodoApp.TaskManager();
                var task = new TodoApp.Task("MyTask", "Task Description", TodoApp.TaskType.Designer);
                tm.AddTask(task);

                console.log(tm.Tasks);
            }

        }
    }
}



var ca = new TestApp.ControlTodoApp.Start();

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>

</head>

<body> 
<div class="container"> 
    <div class="inner">
        <div class="img-cont">
            <img src="assets/images/myimg.png" alt="my img" />
        </div>
    </div>
    <div class="content"></div>
</div>

<script src="assets/js/default/jquery.min.js"></script>
<script src="assets/js/ts/testApp.js"></script>
</body>
</html>

- meji

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- madreason · Accepted Answer

你可以在代码中使用 commonjs 和 amd，选择其中之一。 testApp.ts

///<reference path="task.ts" />
///<reference path="todo.ts" />

OR

testApp.ts

module TestApp {
    import TaskManager = require("todo");
    import TaskType = require("task");

    export class ControlTodoApp { 
        static Start() {

            window.onload = function(e) {
                var tm = new TaskManager.TaskManager();
                var task = new TaskType.Task("MyTask", "Task Description", TaskType.TaskType.Designer);
                tm.AddTask(task);

                console.log(tm.Tasks);
            }
        }
    }
}

task.ts

export = TodoApp;
module TodoApp {
    ...
}

todo.ts

export = TodoApp;
module TodoApp {
    ...
}