3

Chrome Dev Tools で 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;
        };
    }
}

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>

コンパイラ コマンド

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

Chrome で index.html を開き、[ソース] パネルの Chrome Dev Tools を開くと、app.js と app.ts が表示されますが、他の .ts モジュールは表示されません。app.ts のソース マップは機能していますが、他のモジュールをロードして Chrome でデバッグできるようにするにはどうすればよいですか?

4

1 に答える 1

6

参照コメントを使用する場合、すべてのモジュールを自分でロードする必要があります (つまり、複数のスクリプト タグを追加するか、ファイルを結合して縮小するなど)。

モジュール ローダーを使用する場合は、ステートメントを使用する必要がありますimport。このステートメントは、選択したモジュール ローダー (おそらく Web 用の RequireJS) の require メソッド呼び出しに変換されます。

例 1 - DIY

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

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

module宣言を削除したことに注意してください。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;
    }
}

ここでいくつか変更がimportあります。ファイルを指すコメントではなく、ステートメントを使用しています。Accountではなく、ここでも参照しますUser.Account。ここでも、ファイルがモジュールであるため、囲んでいるモジュールはなくなります。

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

ここでステートメントを再度インポートします。補足として、go関数はすぐに実行されているように見えるため、手動でもう一度呼び出す必要はありません。関数名を削除して、これが誤って実行されるのを防ぐことができます。

索引.html

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

プロジェクトに RequireJS スクリプトを含める必要があります。最初のファイルを指定するだけで、残りはすべて読み込まれます。importコンパイルされた JavaScript で、ステートメントが RequireJSrequire関数の呼び出しに変換されることに気付くでしょう。

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

これにより、RequireJS がトリガーされ、スクリプトが読み込まれます。

さらに制御が必要な場合は、RequireJS を手動で使用することもできます(つまり、ステートメントrequireを使用するのではなく、メソッドを直接使用します。import

于 2013-05-11T19:21:28.113 に答える