|
|
게시됨 2018. 10. 22. 오후 5:21:45
|
|
|
ECMAscrip{filtering}t 2015 표준에서 Javascrip{filtering}t는 모듈 개념을 추가합니다. Typescrip{filter}t 역시 이 개념을 따릅니다.
1. 모듈의 가져오기 및 수출
모듈은 전역 범위가 아닌 자체 범위에서 실행됩니다; 즉, 모듈 내에서 정의된 변수, 함수, 클래스 등은 내보내기 중 하나를 명시적으로 내보내지 않는 한 모듈 외부에서는 보이지 않습니다. 반면, 다른 모듈에서 내보내는 변수, 함수, 클래스, 인터페이스 등을 사용하려면 가져오기 중 하나를 사용해 가져와야 합니다.
모듈은 스스로 선언됩니다. Typescrip{filter}t에서는 파일 수준에서 가져오기와 내보내기를 사용하여 두 모듈 간의 관계를 설정합니다. 기본 예시를 들어보겠습니다:
animal.ts
app.ts
위 예에서 Animal-like가 animal.ts에서 선언되고 export를 통해 내보내집니다. app.ts에서 상대 파일 경로를 지정하고 Animal 클래스를 사용하기 위해 가져오기를 통해 가져오세요.
Javascrip{filter}t는 두 가지 다른 모듈 참조 메서드를 가지고 있기 때문에, Javascrip{filter}t로 컴파일할 때 Typescrip{filtering}t 설정 파일을 통해 컴파일된 모듈 참조 메서드를 지정할 수 있습니다tsconfig.json
다음은 Javascrip{filter}t 파일의 다양한 방식으로 컴파일된 내용입니다
공통
AMD
2. 수입 및 수출의 명칭 변경
모듈을 가져오고 내보낼 때 기본적으로 사용되는 내부 객체의 이름입니다. Typescrip{filter}t는 내보내기 전후의 이름 변경도 지원합니다. 위의 예시를 수정해 보세요
animal.ts
app.ts
가져오기 및 내보낼 때 모듈은 as 키워드를 사용하여 이름이 변경됩니다.
여기서 한 가지 주목할 점은 내보낸 모듈의 이름을 변경할 때, 가져오기 전 모듈 이름이 내보낸 이름 변경된 모듈 이름과 같아야 한다는 것입니다. 그렇지 않으면 컴파일러가 오류 메시지를 표시합니다. 예를 들어, 내보낸 모듈이 ANI로 이름이 바뀐 경우, 이 모듈을 다른 파일 app.ts에 가져올 때 as 키워드 앞의 모듈 이름은 ANI여야 합니다.
또는 불러온 모듈 이름을 모른다면 * 기호로 대체할 수도 있습니다
위 예시에서 * 기호로 대체된 모든 모듈 이름을 animal_module으로 바꾸면, 모듈에서 내보내진 모든 콘텐츠를 animal_module 객체를 통해 접근할 수 있습니다.
3. 여러 객체를 내보내기 및 내보내기
일반적으로 모듈 내에서 여러 유형의 객체가 정의된 후 함께 내보내집니다. 가져오기 과정에서 여러 모듈이 있을 수도 있습니다
animal.ts
app.ts
내보낼 때, 내보내고 싶은 타입 객체를 JSON 객체로 다시 조립한 후 내보낼 수 있습니다. 임포트가 완료되면 이름이 바뀐 모듈 객체를 통해 내용에 접근할 수 있습니다.
4. 기본 내보내기
모듈에는 기본 내보내기가 하나만 있을 수 있습니다
animal.ts
app.ts
위 예시에서 Animal 클래스는 기본 키워드를 사용해 내보내집니다. 일반 가져오기와 달리, 기본 가져오기 모듈을 가져올 때는 {}로 괄호 없이 직접 모듈 이름을 지정할 수 있습니다.
5. 동적 부하 모듈
Javascrip{filter}t에서는 모듈을 로드하는 두 가지 방법이 있습니다: CommonJS와 AMD입니다. Typescrip{filter}t를 사용할 때는 최종 컴파일의 구성 내용에 따라 Javascrip{filter}t를 생성하기 위해 다른 코드를 작성해야 합니다.
모듈 파일 animal.ts
CommonJS 방법 참고:
app.ts
AMD 방식:
app.ts
|
이전의:보너스클라우드 활성화 코드 그랩 도구 [소스 코드 포함]다음:신입 보고, MB는 어떻게 그것을 얻었나요?
|
