Internal module in TypeScript: undefined error

Question

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?

looks fine to me. If you open up your .js files can you confirm that the typescript is being compiled correctly? — rob
– rob, Commented Jun 26, 2013 at 17:34
Also how are you running your app? does it work if you just double click the index.htm file? If your running from VS you may want to double check that the working directory is setup correctly. — rob
– rob, Commented Jun 26, 2013 at 17:37
It was actually fine! I followed Jeffry Grajkowski's example and it worked, so I think the directory was set correctly. — Kagami Sascha Rosylight
– Kagami Sascha Rosylight, Commented Jun 27, 2013 at 12:25

Jeffery Grajkowski · Accepted Answer · 2013-06-26 20:35:09Z

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>

Collectives™ on Stack Overflow

Internal module in TypeScript: undefined error

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related