Typescript - import declarations in inner module cannot reference outer module
While practicing TypeScript in VSCode, while developing a Todo app, trying to import the todo module, vscode intellisense generates an error: import declarations in the inner module cannot reference the outer module Also, the console also throws the error: "TodoApp is not defined"
Please, help? I am guessing the structure is wrong, but it doesn't seem to fix it. Ultimately my goal is to have .ts files, preferably all compiled into one js file "testApp.js".
Here is 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>
+3
source to share
1 answer
You are combining commonjs and amd in your 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 {
...
}
+2
source to share