Question

在VSCode中练习TypeScript，开发Todo应用程序，尝试导入“todo”模块时，vscode intellisense会生成错误：内部模块中的导入声明无法引用外部模块 控制台也会抛出错误：“未定义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>

Answer 1

您合并commonjs and amd in code，使用其中一个

<强> 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 {
    ...
}

Typescript - 内部模块中的import声明不能引用外部模块

1 个答案: