Typescript

Question

在 VSCode 中练习 TypeScript 时，开发 Todo 应用程序，尝试导入 "todo" 模块，vscode 智能感知生成错误： 内部模块中的导入声明不能引用外部模块 控制台也同样抛出错误："TodoApp is not defined"

请问有人能帮忙吗？我认为结构不正确，但似乎无法更正它。最终我的目标是拥有.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" />

或

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 - 内部模块中的导入声明不能引用外部模块

Typescript - import declarations in an internal module cannot reference an external module

javascript

oop

import