如何使用源映射调试模块化TypeScript？

我在Chrome开发工具中进行TypeScript调试时遇到了困难。我已经为我的所有.ts文件生成了源代码映射，javascript看起来是正确的，但是Chrome只加载index.html中引用的js文件，并忽略所有模块。这有点道理，因为Typescript编译器似乎没有对我的模块执行任何操作。如果有人能在下面的例子中解释我做错了什么，那就太好了

我的项目设置如下所示：

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;
        };
    }
}

 ///<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';
        }
    }
}

///<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());
}());

User.ts

module Company {

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

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

 ///<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';
        }
    }
}

///<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());
}());

///
模块用户{
出口类人员{
公共优先：字符串；
公共最后：字符串；
私人myJob:Company.Job；
私有myAccount:User.Account；
构造函数（名字：string，名字：string）{
this.first=firstName；
this.last=lastName；
}
public getName（）：字符串{
返回this.first+“”+this.last；
}
公共setJob（作业：Company.job）{
this.myJob=job；
}
公共设置帐户（帐户：User.Account）{
this.myAccount=acct；
}
public-toString（）：字符串{
return“User:+this.getName（）
+“\n用户名：”+this.myAccount.userName
+“\nJob:”+this.myJob.title；
}
}
出口类帐户{
公共用户名：字符串；
私有密码：字符串；
建造师（用户：人）{
this.userName=user.first[0]+user.last；
此._密码='12345'；
}
}
}

应用程序ts

module Company {

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

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

 ///<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';
        }
    }
}

///<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());
}());

///
///
（功能go（）{
var user1:User.Person=新的User.Person（'Bill'，'Braxton'）；
var acct1:User.Account=新的User.Account（user1）；
变量job1:Company.Job=新的Company.Job（'greater'，'Greet'）；
user1.setAccount（acct1）；
user1.setJob（job1）；
log（user1.toString（））；
}());

index.html

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

</body>
</html>

打字测试
go（）；

编译器命令

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

---

当我在Chrome中打开index.html并打开源代码面板Chrome Dev Tools时，它将显示app.js和app.ts，但不会显示其他.ts模块。因此app.ts的源代码映射正在运行，但是如何加载其他模块以便在Chrome中调试它们？

当您使用参考注释时，您必须自己加载所有模块（即添加多个脚本标记，或合并并缩小文件等）

如果要使用模块加载器，则需要使用

import

语句，这些语句将转换为所选模块加载器的require方法调用（可能是web的RequireJS）

例1-DIY

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

请注意，我已删除

模块

声明。当您使用RequireJS导入模块时，文件名将成为模块名

src/User.ts

这里有几处更改-我们有

import

语句，而不是指向文件的注释。我们在这里也引用了

Account

，而不是

User.Account

。同样，封闭模块也消失了，因为文件就是模块

app.ts

在这里再次导入语句。作为旁注，

go

函数看起来是立即执行的，因此您不需要再次手动调用它-您可以删除函数名来阻止意外执行

Index.html

这将触发RequireJS为您加载脚本

---

你也可以（即，直接使用

require

方法，而不是使用

import

语句。

好的，我认为模块加载器可能必须手动实现。您是否打算在最后一句话中包含链接？看起来它以蓝色突出显示，但没有链接。我添加了RequireJS示例。很棒的东西！我避免使用RequireJS，因为我觉得TypeScript更倾向于CommonJS规范（默认情况下使用）。不过这很好，因为我更喜欢AMD/RequireJS。谢谢你提供的非常详细的答案！