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

Question

Whilst practicing TypeScript in VSCode, developing a Todo application, attempting to import the "todo" module, the vscode intellisense generates an error: import declarations in an internal module cannot reference an external module The console also throws an error also: "TodoApp is not defined"

Please can anyone help? I presume the structure is incorrect, but cant seem to correct it. Ultimately my aim is to have the .ts files, preferably all compile into one js file "testApp.js".

Heres my code:

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>

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

You combine commonjs and amd in code, use one of them

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

edited May 23 '17 at 12:19

Community

1
1

answered May 28 '15 at 16:37

madreason

437
4
17

Hey Madreason, thanks for the feedback. I have it working applying the references in testApp.ts... /// /// However, I have to include testApp.js AND task.js, todo.js scripts in my html. By using the import statement shouldn't the (todo.js & task.js) files be compiled into the testApp.js - which is what im after? – meji May 28 '15 at 19:47
1

I thought that you compiled all files into one with compiler option "--out". With the import statement you should use define and require implementation(as a sample [requirejs](http://requirejs.org/)) – madreason May 29 '15 at 09:14

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

1 Answers1