Como posso depurar o TypeScript modular com mapas de origem?
Eu estou tendo um tempo impossível tentando obter depuração de TypeScript trabalhando no Chrome Dev Tools. Gerei mapas de origem para todos os meus arquivos .ts, e o javascript parece correto, mas o Chrome carrega apenas o arquivo js que é referenciado em index.html e ignora todos os módulos. Isso meio que faz sentido, porque o compilador Typescript não parece estar fazendo nada com meus módulos. Se alguém puder explicar o que estou fazendo de errado no exemplo a seguir, isso seria ótimo.
Minha configuração de projeto é assim:
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>
Comando do compilador
tsc --sourcemap --target ES5 --module commonjs file.ts
Quando abro index.html no Chrome e abro o painel de origens Chrome Dev Tools, ele mostra-me app.js e app.ts, mas não os outros módulos .ts. Portanto, o mapa de origem do app.ts está funcionando, mas como carregar os outros módulos para que eles possam ser depurados no Chrome?