Nhiều tệp tạo nên dự án Type Script

Question

Gần đây tôi đã làm việc với TypeScript và mọi thứ đều ổn và tôi thực sự, thực sự thích nó .. Làm cho JavaScript khả thi trở lại! :)

chúng tôi đã cố gắng làm theo những ý tưởng tương tự như chúng ta sẽ đằng sau bất kỳ dự án .net ví dụ như tập tin duy nhất cho mỗi lớp/giao diện

module Infrastructure { 
    export interface IBaseViewModel { 
     addOrRemoveClass(selector: string, className: string); 
    } 
} 

vấn đề, chúng tôi đã đi qua là này - tất cả các tập tin phụ thuộc là không được bao gồm? khi nói đến việc chạy.

Nếu bạn nhìn vào tập tin này đó là điểm mấu chốt chính để ứng dụng của chúng tôi, tôi nhận được một lỗi không xác định vào việc tạo ra một ViewModelBuilder mới

module Infrastructure { 
    export class Fusion { 
     constructor() { 
      this.vmBuilder = new ViewModelBuilder(); 
      this.setApplicationDefaults(); 
      this.start(); 
     } 

     private vmBuilder: IViewModelBuilder; 

     private start() { 
      this.vmBuilder.process(); 
     } 

     private setApplicationDefaults() { 
      $.pnotify.defaults.styling = "jqueryui"; 
      $.pnotify.defaults.history = false; 
      $.pnotify.defaults.auto_display = false; 
     } 
    } 
} 

và ở phía trên cùng của tập tin chúng tôi có

/// <reference path="../Typings/jquery.d.ts" /> 
/// <reference path="ViewModelBuilder/ViewModelBuilder.ts" /> 
/// <reference path="ViewModelBuilder/IViewModelBuilder.ts" /> 

cũng ViewModelBuilder

module Infrastructure { 

    export class ViewModelBuilder { } 
} 

Vì vậy, câu hỏi là này - cách tốt nhất để tiếp tục là gì? làm thế nào chúng ta có thể nhận được tờ khai lớp khác để làm việc? dự án của chúng tôi sẽ phát triển đáng kể, chúng tôi có thể xem 100 mô hình đại diện cho mỗi chế độ xem (dự án là chuyển đổi từ dạng cửa sổ sang web)

Bất kỳ trợ giúp nào cũng sẽ tuyệt vời như chúng ta thực sự cần phải chinh phục và tiếp tục! :)

Answer 1

Tôi đã viết về getting the right set up for TypeScript và một trong những ý tưởng trong đó sẽ giúp bạn - ban đầu tôi có ý tưởng từ Mark Rendle.

Ý tưởng là tạo tệp có tên references.ts và có tất cả các phụ thuộc của bạn được liệt kê trong đó. Một chút như thế này:

/// <reference path="modulea.ts" /> 
/// <reference path="moduleb.ts" /> 
/// <reference path="modulec.ts" /> 
/// <reference path="moduled.ts" /> 
/// <reference path="modulee.ts" /> 

Bạn có thể sau đó chỉ cần tham khảo tập tin này ở phía trên cùng của tất cả các file nguyên cảo của bạn:

/// <reference path="references.ts" /> 
module ModuleA { 
    export class MyClass { 
     doSomething() { 
      return 'Hello'; 
     } 
     tester() { 
      var x = new ModuleB.MyClass(); 
     } 
    } 
} 

Các references.ts tập hành vi như References thư mục mà bạn có cho một dự án .NET .

Đề xuất khác, hoạt động khá tốt với thiết lập này, là sử dụng cờ --out để biên dịch một tệp JavaScript, bắt đầu bằng app.ts. Trình biên dịch TypeScript đi tất cả các phụ thuộc và làm việc ra đúng thứ tự cho tất cả các JavaScript được tạo ra.

tsc --out final.js app.ts 

Chiến lược này sẽ mở rộng quy mô của bạn tốt hơn so với tham chiếu thủ công các tệp cụ thể ở mọi nơi.

Answer 2

Bạn có hai tùy chọn ở đây, hoặc là commonjs hoặc AMD (tải mô-đun không đồng bộ).
Sử dụng commonjs, bạn sẽ cần phải đặt một

<script type="text/javascript" src="lib/jquery-1.7.2.js"></script> 

cho mỗi tập tin javascript riêng biệt trong dự án của bạn trong trang html của bạn.
Rõ ràng điều này có thể trở nên rất tẻ nhạt, đặc biệt nếu bạn có hàng trăm tệp trong dự án của mình.
Hoặc, như Steve Fenton đã chỉ ra, bạn có thể sử dụng tham số --out để biên dịch các tệp khác nhau thành một tệp, và sau đó chỉ tham chiếu tệp đơn này trong trang html của bạn.

Sử dụng AMD là tùy chọn thứ ba - nơi bạn chỉ cần bao gồm một thẻ tập lệnh trong trang html của mình và AMD sẽ xử lý các tham chiếu.
Hãy xem blog của tôi về cách làm việc này: http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/