[TypeScript] declare, d.ts 파일 (선언 코드만 담긴 파일)

2022. 11. 28. 23:30FRONT-END/TYPESCRIPT

업무를 하다 보니, TypeScript를 필수적으로 사용하게 되었는데, Typescript 사용시 궁금했던 점과 잘 몰랐던것들을 정리하여, 학습하려고 한다.

 

declare

변수, 상수, 함수, 또는 클래스가 어딘가에 이미 선언되어 있음을 알리는 역할을 한다.

다른 영역의 코드에서 declare로 선언된 해당 변수나 함수를 참조할 수 있으며 declare로 선언된 부분은 JavaScript로 컴파일 되지 않는다.

 

.d.ts 파일 (선언 코드만 담긴 파일)

타입스크립트 선언 파일 d.ts 는 타입스크립트 코드의 타입 추론을 돕는 파일이다.

전역 변수로 선언한 변수를 특정 파일에서 import 구문 없이 사용하는 경우 해당 변수를 인식하지 못하며,그럴 때 아래와 같이 해당 변수를 선언해서 Error가 나지 않게 할 수 있다.

declare const global = 'sth';
  • 구현부가 아닌 선언부만을 작성하는 용도의 파일을 의미 한다.
  • JS 코드로 컴파일 되지 않는다.
  • skipLibCheck 프로퍼티가 false라면 다음 규칙들을 강제 한다. (true 여도 지키는것이 좋다.)
    • 선언 코드만 작성 가능하며, 일반 코드는 작성 불가능 하다.
    • 최상위에 존재하는 변수, 상수, 함수, 클래스, 네임스페이스의 선언 앞에 반드시 declare 혹은 export 가 붙어야 한다.
  • 파일에 작성되는 declare namespace 블록과 declare module 블록의 필드에는 export 키워드가 기본적으로 붙어야 한다.

 

export = & import = require()

  • Commons.js와 AMD 라는 모듈 시스템에서는 export 객체라는 개념이 존재한다.
  • exports 는 모듈로부터 내보내지는 데이터들을 담고 있는 하나의 객체이다.
  • exports 객체를 또 다른 커스텀 객체로 대체하는 것도 지원한다.
  • export default 가 이 동작을 지원하기 위하여 등장한것이지만, 이 둘의 호환성은 좋지 안ㅎ다.
  • TypeScript는 Common.js와 AMD에서 exports 객체를 또 다른 커스텀 객체로 대체하는 동작을 유사하게 따라할 수 있도록 export= 문법을 지원하고 있다.
  • export= 문법은 모듈로부터 내보내질 하나의 객체를 지정한다. 그것은 클래스일 수도 있고, 인터페이스일 수도 있고, 네임스페이스일 수도 있으며, 열거형 일 수도 있다.
  • export= 문법은 객체를 내보낸 모듈의 경우 반드시 import module = require("module") 문법으로만 불러와야 한다.
    단, module 프로퍼티가 esnext이면 이 문법을 사용할 수 없다며 에러가 발생한다. 하지만 d.ts파일에서는 에러가 발생하지 않는다.

'FRONT-END > TYPESCRIPT' 카테고리의 다른 글

[Typescript] 제네릭 (Generics) , 스테틱 (Static)  (0) 2022.11.28