여러 AMD 파일에 모듈을 분산시키는 방법은 무엇입니까?

Question

"내보내기 모듈"을 여러 파일에 걸쳐 배포 할 수 있는지 파악할 수 없습니다. 내가 파일 Contact.ts이있는 경우

: 다음

// file Contact.ts 
export module Contacts { 
    export class Contact { 
     ... 
    } 
} 

다른 ContactView.ts

// file ContactView.ts 
export module Contacts { 
    export class ContactView { 
     model: Contact; // <--- is not recognized 
    } 
} 

를 TSC는 연락 클래스를 인식하지 못합니다. 알 수 있듯이 Contact와 ContactView는 동일한 모듈에 존재한다고 선언되었고, 사양에 따라 작동해야합니다.

"내보내기 모듈"선언을 사용해야하므로 require.js 및 AMD 패턴을 사용하는 복합 응용 프로그램을 빌드하고 있습니다.

"미리 선언"또는 까다로운 "가져 오기"를해야합니까?

고마워.

EDIT : 현재 가져 오기를 통해 각 모듈을 개별적으로로드하지만, 눈에 잘 띄면 엄청난 양의 코드 및 많은 "가져 오기"종속성이 생성됩니다. 동일한 네임 스페이스 (예 : 주소록)를 사용하여 가져 오기를 의미하지는 않는 TS를 알 수있는 방법이 있다면 제 질문이었습니다. 정상적인 // 명령을 조사했지만 작동하지 않습니다. 나는 심지어 지금까지 성공하지 못한 * .d.ts 선언 파일을 시도했다.

Answer 1

사양을 사용하면 내부의 모듈을 여러 파일에 정의 할 수 있습니다 (본질적으로 내부 모듈은 자바 스크립트 모듈 패턴을 참조 함). 외부 AMD 또는 CommonJS 모듈과 같은 모듈은 각 파일이 실제 "코드 모듈"이라는 아이디어에 따라 작동하며, 모듈이 고유 한 새 개체에로드되기 때문에 그 안에있는 네임 스페이스/이름 지정은 의미가 없습니다.

당신은 ContactView.ts 모듈의 내부 Contact.ts 모듈을로드하기 위해 다음과 같은 코드를 작성할 수있다 : 즉 충분히 잘 작동합니다

// file ContactView.ts  
import mod = module("./Contact"); 

export module Contacts { 
    export class ContactView { 
     model: mod.Contacts.Contact; // <--- will be recognized 
    } 
} 

그리고, 그러나 당신의 내용에 액세스 할 수 있도록하려는 경우 난 당신이 명확하게 종속성을 진술하고 있기 때문에, 충분히 좋은 생각

import c = module("./Contact"); 
import cv = module("./ContactView"); 

: (예 : 새 연락처 모델 자신을 위해하는) 다른 지역에 두 모듈, 당신은 것 기본적으로 둘 다 가져옵니다. 단점은 그들이 공통의 부모 객체를 공유하지 않는다는 것인데, 둘 다 "Contact"모듈 패턴에있게하는 것이 아마도별로 쓸모가 없다는 것입니다.

또 다른 옵션은 "ContactView"와 함께 "ContactView"를 다음과 같이 내보내는 것입니다 (이 코드는 이미 ContactView의 모델 속성을 통해 정확하게 수행하고 있기 때문에 어리석은 일입니다.)) :

export module Contacts { 
    export class ContactView { 
     model: mod.Contacts.Contact; 
     constructor() { 
      this.model = new mod.Contacts.Contact(); 
     } 
    } 

    export var Contact = mod.Contacts.Contact; 
} 

그러면 ContactView를로드 한 후에 액세스 할 수 있습니다.

편집 : 그런데 "내보내기 모듈 이름 {...}"을 통해서만 모듈을 내보내는 것에 국한되지 않고 파일 자체가 모듈이기 때문에 어떤 것도 내보낼 수 있습니다. 그래서 당신은 "export function foo() {...}"를 가진 파일을 가질 수 있습니다.

EDIT2 : AMD가 여러 종속성을로드하고 이들로부터 "모듈"을 구성 할 수있는 기능이 있지만 TS에서 어떻게 작동하는지 모릅니다. http://www.adobe.com/devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html (생성자 모듈) .

Answer 2

나는 잠시 동안 같은 질문으로 어려움을 겪었으며, 다른 누군가가이 질문을 방황 할 경우에 내가하고있는 것을 나누기를 원했습니다.

첫째, 나는 나 자신에게 내 모듈의 모든 파일을 선언하는 참조 파일을 정의 :

파일 내부에 지정된 경로는 참조 파일 자체 ( _contacts.ts)의 위치를 ​​기준으로

/// <reference path="_contacts.dependencies.ts" /> 
/// <reference path="../contacts/Contact.ts" /> 
/// <reference path="../contacts/ContactView.ts" /> 
/// <reference path="../contacts/ContactModel.ts" /> 

주, .js 참조 파일과 달리 내 디렉토리 구조는 다음과 같습니다 :

참조 파일 자체로 돌아갑니다. 첫 번째 줄에는 모듈에서 사용하는 모든 외부 라이브러리 목록이 들어있는 별도의 참조 파일 (예 : 밑줄, 순간 또는 다른 기존 라이브러리)이 들어 있습니다. .d.ts 정의 파일이 있습니다. 나머지 줄은 모듈을 구성하는 파일입니다. 귀하의 모든 모듈 목록에 하나의 참조 파일을 만들 수 있습니다, 마찬가지로

/// <reference path="../references/_contacts.ts" /> 
module Contacts { 
    export class Contact { 
     public model: ContactModel; 
     // ... 
    } 
} 

: 모듈의 일부인 모든 파일 내부

, 나는 위의 파일을 참조

/// <reference path="_address.ts" /> 
/// <reference path="_contacts.ts" /> 
/// <reference path="_commerce.ts" /> 

을 그리고 단순히 소스 파일에서이를 가리 키십시오.

그러나 이것은 개별 파일에있는 방출 된 코드의 문제를 해결하지 못합니다. 그 문제에 대해서는 여러 파일을 단일 소스 파일로 묶을 수있는 JavaScript 축소 도구를 사용하고 있습니다. 컴파일 설정과 유스 케이스 요구 사항에 따라 생성 된 코드 주위에 래퍼를 적용해야 AMD 모듈로 작동 할 수 있습니다 (아직 익숙하지 않은 부분).