How can I debug modular TypeScript with source maps?

StackOverflow https://stackoverflow.com/questions/16500322

Frage

I am having an impossible time trying to get TypeScript debugging working in Chrome Dev Tools. I've generated source maps for all my .ts files, and the javascript looks correct, but Chrome only loads the js file that is referenced in index.html and ignores all the modules. This kinda makes sense, because the Typescript compiler does not seem to be doing anything with my modules. If someone could explain what I'm doing wrong in the following example, that would be great.

My project setup is like this:

root/
  src/
    Company.ts
    User.ts
  app.ts
  index.html

Company.ts

module Company {

    export class Job {
        public title:string;
        public description:string;

        constructor(title:string, desc:string){
            this.title = title;
            this.description = desc;
        };
    }
}

User.ts

 ///<reference path="Company.ts"/>

module User {
    export class Person {
        public first:string;
        public last:string;
        private myJob:Company.Job;
        private myAccount:User.Account;

        constructor(firstName:string, lastName:string){
            this.first = firstName;
            this.last = lastName;
        }

        public getName():string{
            return this.first + ' ' + this.last;
        }

        public setJob(job:Company.Job){
            this.myJob = job;
        }

        public setAccount(acct:User.Account){
            this.myAccount = acct;
        }

        public toString():string{
            return "User: " + this.getName()
                    + "\nUsername: " + this.myAccount.userName
                    + "\nJob: " + this.myJob.title;
        }
    }

    export class Account {
        public userName:string;
        private _password:string;

        constructor(user:Person){
            this.userName = user.first[0] + user.last;
            this._password = '12345';
        }
    }
}

app.ts

///<reference path="src/User.ts"/>
///<reference path="src/Company.ts"/>

(function go(){
    var user1:User.Person = new User.Person('Bill','Braxton');
    var acct1:User.Account = new User.Account(user1);
    var job1:Company.Job = new Company.Job('Greeter','Greet');

    user1.setAccount(acct1);
    user1.setJob(job1);
    console.log(user1.toString());
}());

index.html

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript Test</title>
    <script src="app.js"/>
    <script>
        go();
    </script>
</head>
<body>

</body>
</html>

Compiler command

tsc --sourcemap --target ES5 --module commonjs file.ts

When I open index.html in Chrome and open the Sources panel Chrome Dev Tools, it will show me app.js and app.ts, but not the other .ts modules. So the source map for app.ts is working, but how do I load the other modules so they can be debugged in Chrome?

War es hilfreich?

Lösung

When you use reference comments, you have to load all of the modules yourself (i.e. add multiple script tags, or combine and minify the files etc).

If you want to use a module loader, you need to use import statements, which will be converted into require method calls for the module loader of your choice (probably RequireJS for the web).

Example 1 - DIY

<script src="/src/Company.js"></script>
<script src="/src/User.js"></script>
<script src="app.js"></script>

Example 2 - RequireJS

src/Company.ts

export class Job {
    public title: string;
    public description: string;

    constructor(title: string, desc: string) {
        this.title = title;
        this.description = desc;
    }
}

Note that I have removed the module declaration. The file name becomes the module name when you are importing the modules using RequireJS...

src/User.ts

import company = module('Company');

export class Account {
    public userName: string;
    private _password: string;

    constructor(user: Person) {
        this.userName = user.first[0] + user.last;
        this._password = '12345';
    }
}

export class Person {
    public first: string;
    public last: string;
    private myJob: company.Job;
    private myAccount: Account;

    constructor(firstName: string, lastName: string) {
        this.first = firstName;
        this.last = lastName;
    }

    public getName(): string {
        return this.first + ' ' + this.last;
    }

    public setJob(job: company.Job) {
        this.myJob = job;
    }

    public setAccount(acct: Account) {
        this.myAccount = acct;
    }

    public toString(): string {
        return "User: " + this.getName()
            + "\nUsername: " //+ this.myAccount.userName
            + "\nJob: " + this.myJob.title;
    }
}

A couple of changes here - we have the import statement rather than a comment that points to the file. We also reference Account in here rather than User.Account. Again, the enclosing module is gone as the file is the module.

app.ts

import Company = module('src/Company');
import User = module('src/User');

(function go() {
    var user1: User.Person = new User.Person('Bill', 'Braxton');
    var acct1: User.Account = new User.Account(user1);
    var job1: Company.Job = new Company.Job('Greeter', 'Greet');

    user1.setAccount(acct1);
    user1.setJob(job1);
    console.log(user1.toString());
} ());

Import statements again here. As a side note, the go function looks to be immediately executing, so you shouldn't need to call it a second time manually - you could remove the function name to stop this being done by accident.

Index.html

<script data-main="app.js" src="require.js"></script>

You need to include the RequireJS script in your project. You only need to point it at your first file and it will load all the rest. You'll notice in your compiled JavaScript that your import statements get converted into calls to the RequireJS require function:

var Company = require("./src/Company");
var User = require("./src/User");

This triggers RequireJS to load the script for you.

You can also use RequireJS manually if you want more control (i.e. use the require method directly rather than using import statements.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top