TypeScript-모듈

모듈은 TypeScript로 작성된 코드를 구성하는 아이디어로 설계되었습니다. 모듈은 크게 나뉩니다.

내부 모듈
외부 모듈

내부 모듈

내부 모듈은 이전 버전의 Typescript에서 제공되었습니다. 이것은 클래스, 인터페이스, 기능을 하나의 단위로 논리적으로 그룹화하는 데 사용되었으며 다른 모듈로 내보낼 수 있습니다. 이 논리적 그룹은 최신 버전의 TypeScript에서 네임 스페이스로 명명됩니다. 따라서 내부 모듈은 더 이상 사용되지 않습니다. 대신 네임 스페이스를 사용할 수 있습니다. 내부 모듈은 계속 지원되지만 내부 모듈보다 네임 스페이스를 사용하는 것이 좋습니다.

내부 모듈 구문 (이전)

module TutorialPoint { 
   export function add(x, y) {  
      console.log(x+y); 
   } 
}

네임 스페이스 구문 (신규)

namespace TutorialPoint { 
   export function add(x, y) { console.log(x + y);} 
}

두 경우 모두 생성 된 JavaScript는 동일합니다.

var TutorialPoint; 
(function (TutorialPoint) { 
   function add(x, y) { 
      console.log(x + y); 
   } 
   TutorialPoint.add = add; 
})(TutorialPoint || (TutorialPoint = {}));

외부 모듈

TypeScript의 외부 모듈은 여러 외부 간의 종속성을 지정하고로드하기 위해 존재합니다. js파일. 하나만 있다면js파일이 사용 된 경우 외부 모듈은 관련이 없습니다. 전통적으로 JavaScript 파일 간의 종속성 관리는 브라우저 스크립트 태그 (<script> </ script>)를 사용하여 수행되었습니다. 그러나 모듈을로드하는 동안 매우 선형 적이기 때문에 확장 할 수 없습니다. 즉, 파일을 하나씩로드하는 대신 모듈을로드하는 비동기 옵션이 없습니다. 예를 들어 NodeJ와 같은 서버용 js를 프로그래밍 할 때 스크립트 태그도 없습니다.

종속 항목을로드하는 두 가지 시나리오가 있습니다. js 단일 기본 JavaScript 파일의 파일.

클라이언트 측-RequireJs
서버 측-NodeJ

모듈 로더 선택

외부 자바 스크립트 파일로드를 지원하려면 모듈 로더가 필요합니다. 이것은 또 다른 것입니다js도서관. 브라우저의 경우 가장 일반적인 라이브러리는 RequieJS입니다. 이것은 AMD (Asynchronous Module Definition) 사양의 구현입니다. 파일을 하나씩로드하는 대신 AMD는 파일이 서로 종속되어 있어도 모두 개별적으로로드 할 수 있습니다.

외부 모듈 정의

CommonJS 또는 AMD를 대상으로하는 TypeScript에서 외부 모듈을 정의 할 때 각 파일은 모듈로 간주됩니다. 따라서 외부 모듈에서 내부 모듈을 사용하는 것은 선택 사항입니다.

TypeScript를 AMD에서 CommonJs 모듈 시스템으로 마이그레이션하는 경우 추가 작업이 필요하지 않습니다. 변경해야하는 유일한 것은 컴파일러 플래그뿐입니다. JavaScript와 달리 CommonJ에서 AMD로 또는 그 반대로 마이그레이션하는 데 오버 헤드가 있습니다.

외부 모듈을 선언하는 구문은 'export'및 'import'키워드를 사용합니다.

통사론

//FileName : SomeInterface.ts 
export interface SomeInterface { 
   //code declarations 
}

선언 된 모듈을 다른 파일에서 사용하기 위해 아래와 같이 import 키워드를 사용합니다. 파일 이름은 확장명이 사용되지 않고 지정됩니다.

import someInterfaceRef = require(“./SomeInterface”);

예

예제를 사용하여 이것을 이해합시다.

// IShape.ts 
export interface IShape { 
   draw(); 
}

// Circle.ts 
import shape = require("./IShape"); 
export class Circle implements shape.IShape { 
   public draw() { 
      console.log("Cirlce is drawn (external module)"); 
   } 
} 

// Triangle.ts 
import shape = require("./IShape"); 
export class Triangle implements shape.IShape { 
   public draw() { 
      console.log("Triangle is drawn (external module)"); 
   } 
}
   
// TestShape.ts 
import shape = require("./IShape"); 
import circle = require("./Circle"); 
import triangle = require("./Triangle");  

function drawAllShapes(shapeToDraw: shape.IShape) {
   shapeToDraw.draw(); 
} 

drawAllShapes(new circle.Circle()); 
drawAllShapes(new triangle.Triangle());

AMD 시스템 용 주요 TypeScript 파일을 컴파일하는 명령은 다음과 같습니다.

tsc --module amd TestShape.ts

컴파일시 다음과 같은 AMD 용 JavaScript 코드가 생성됩니다.

파일 : IShape.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});

파일 : Circle.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
   var Circle = (function () {
      function Circle() {
      }
      Circle.prototype.draw = function () {
         console.log("Cirlce is drawn (external module)");
      };
      return Circle;
   })();
   exports.Circle = Circle;
});

파일 : Triangle.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
   var Triangle = (function () {
      function Triangle() {
      }
      Triangle.prototype.draw = function () {
         console.log("Triangle is drawn (external module)");
      };
      return Triangle;
   })();
   exports.Triangle = Triangle;
});

파일 : TestShape.js

//Generated by typescript 1.8.10
define(["require", "exports", "./Circle", "./Triangle"], 
   function (require, exports, circle, triangle) {
   
   function drawAllShapes(shapeToDraw) {
      shapeToDraw.draw();
   }
   drawAllShapes(new circle.Circle());
   drawAllShapes(new triangle.Triangle());
});

기본 TypeScript 파일을 컴파일하는 명령 Commonjs 시스템은

tsc --module commonjs TestShape.ts

컴파일시 다음 JavaScript 코드가 생성됩니다. Commonjs.

파일 : Circle.js

//Generated by typescript 1.8.10
var Circle = (function () {
   function Circle() {
   }
   Circle.prototype.draw = function () {
      console.log("Cirlce is drawn");
   };
   return Circle;
})();

exports.Circle = Circle;

파일 : Triangle.js

//Generated by typescript 1.8.10
var Triangle = (function () {
   function Triangle() {
   }
   Triangle.prototype.draw = function () {
      console.log("Triangle is drawn (external module)");
   };
   return Triangle;
})();
exports.Triangle = Triangle;

파일 : TestShape.js

//Generated by typescript 1.8.10
var circle = require("./Circle");
var triangle = require("./Triangle");

function drawAllShapes(shapeToDraw) {
   shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());

산출

Cirlce is drawn (external module)
Triangle is drawn (external module)