CODEWITHSUNDEEP
typescript
Kagami Sascha Rosylight
Kagami Sascha Rosylight

Reputation: 1482

Internal module in TypeScript: undefined error

I'm a newbie in TypeScript, and I want to use multiple files for my code, using TypeScript version 0.9.0 and Visual Studio. I think I made right codes, and IntelliSense seems it think so too, but it fails when I actually run it, throwing JavaScript undefined exception.

I have two .ts files which are app.ts and module.ts, and this is my short codes.

module.ts is here:

module Shapes {
    export class Rectangle {
        constructor(
            public height: number,
            public width: number) {
        }
    }
}

and app.ts is here:

/// <reference path="app/classes/module.ts" />
var rect = new Shapes.Rectangle(10, 4);

IntelliSense correctly detects what is 'Shapes' and what is 'Shapes.Rectangle', but when I run this code, the error says that 'Shapes' is undefined.

So I searched the web and found some articles including this and this, I followed their tips, but I failed. I can't understand why...

This is my default.htm code.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />

    <script src="app/classes/module.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
</body>
</html>

I think I correctly added module.js into the HTML file. Can anyone help me?

Upvotes: 4

Views: 3644

Answers (1)

Jeffery Grajkowski
Jeffery Grajkowski

Reputation: 4061

I think your problem is most likely that module.js isn't actually getting loaded. Most browsers include some debugging tool to look at the web traffic, but I prefer Fiddler. It's browser independent and really powerful.

Since you're using internal modules (a choice we also went with) you might want to consider compiling your source to a single file. It cuts down on network traffic, keeps your filesystem neat and your HTML file simpler. To do that open up the csproj file in a text editor, look for the PropertyGroups that include <TypeScriptTarget> and add <TypeScriptOutFile>outputfile.js</TypeScriptOutFile> where outputfile.js is the name of the file you want generated.

Here's mine as an example:

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES3</TypeScriptTarget>
    <TypeScriptIncludeComments>true</TypeScriptIncludeComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptOutFile>out.js</TypeScriptOutFile>
    <TypeScriptGeneratesDeclarations>true</TypeScriptGeneratesDeclarations>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES3</TypeScriptTarget>
    <TypeScriptIncludeComments>false</TypeScriptIncludeComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    <TypeScriptOutFile>out.js</TypeScriptOutFile>
    <TypeScriptGeneratesDeclarations>false</TypeScriptGeneratesDeclarations>
  </PropertyGroup>

Upvotes: 1

Related Questions