google chrome devtools - Làm thế nào tôi có thể gỡ lỗi TypeScript mô-đun với bản đồ nguồn?

Tôi đang gặp khó khăn không thể tưởng khi cố gắng kích hoạt gỡ lỗi TypeScript trong công cụ Dev Tools của Chrome. Tôi đã tạo bản đồ nguồn cho tất cả các tệp .ts của mình, và JavaScript trông đúng, nhưng Chrome chỉ tải tệp js được tham chiếu trong index.html và bỏ qua tất cả các module. Điều này phần nào hợp lý, vì trình biên dịch TypeScript dường như không làm gì với các module của tôi. Nếu ai đó có thể giải thích tôi đang làm sai ở ví dụ sau, điều đó sẽ thật tuyệt vời.

Cài đặt dự án của tôi như sau:

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

Công ty.ts

module Company {

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

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

Người dùng.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>

Lệnh trình biên dịch

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

Khi tôi mở index.html trong Chrome và mở bảng Sources của Chrome Dev Tools, nó sẽ hiển thị cho tôi app.js và app.ts, nhưng không hiển thị các module .ts khác. Vì vậy, bản đồ source của app.ts hoạt động, nhưng làm thế nào để tôi tải các module khác để chúng có thể được gỡ lỗi trong Chrome?

Câu trả lời #1

Khi bạn sử dụng các chú thích tham chiếu, bạn phải tải tất cả các mô-đun tự mình (tức là thêm nhiều thẻ script, hoặc kết hợp và nén các tệp, v.v.).

Nếu bạn muốn sử dụng một trình tải module, bạn cần sử dụng các câu lệnh import, những câu lệnh này sẽ được chuyển đổi thành các cuộc gọi phương thức require cho trình tải module mà bạn chọn (có lẽ là RequireJS cho web).

Ví dụ 1 - Tự làm

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

Ví dụ 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;
    }
}

Lưu ý rằng tôi đã loại bỏ khai báo module. Tên tệp sẽ trở thành tên mô-đun khi bạn nhập các mô-đun bằng cách sử dụng 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;
    }
}

Một vài thay đổi ở đây - chúng ta có câu lệnh import thay vì một chú thích chỉ tới tệp. Chúng ta cũng tham chiếu Account ở đây thay vì User.Account. Một lần nữa, module bao quanh đã biến mất vì tệp chính là 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());
} ());

Các câu lệnh import lại ở đây. Như một lưu ý phụ, hàm go có vẻ đang thực thi ngay lập tức, vì vậy bạn không cần gọi nó lần thứ hai một cách thủ công - bạn có thể loại bỏ tên hàm để tránh việc này xảy ra tình cờ.

Index.html

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

Bạn cần bao gồm tập lệnh RequireJS trong dự án của mình. Bạn chỉ cần chỉ định nó tới tệp đầu tiên của bạn và nó sẽ tải tất cả các tệp còn lại. Bạn sẽ nhận thấy trong JavaScript đã biên dịch của mình rằng các câu lệnh import của bạn được chuyển đổi thành các cuộc gọi tới hàm require của RequireJS:

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

Điều này kích hoạt RequireJS tải script cho bạn.

Bạn cũng có thể sử dụng RequireJS theo cách thủ công nếu bạn muốn kiểm soát nhiều hơn (tức là sử dụng phương thức require trực tiếp thay vì sử dụng các câu lệnh import).