[러닝 타입스크립트] 11. 선언 파일

선언 파일

• 타입을 정의하기 위해서 존재하는 파일

  • 기존 자바스크립트로 만들어진 서드파티 모듈들을 타입 스크립트 환경에서도 사용할 수 있도록 따로 타입만 정리해서 넣어둔 파일
• 구현과 별도로 타입 형태를 선언 -> 자바스크립트로 컴파일 할 수 있는 모든 런타임 코드를 포함할 수 없음

• 선언 파일은 앰비언트 컨텍스트(ambient context)를 생성함

  • 값이 아닌 타입만 선언할 수 있는 코드 영역을 의미 = 구현이 없는 선언

• 타입 스크립트 코드의 추론을 돕는 파일

  • 예 : 전역 변수로 선언한 변수를 특정 파일에서 import 구문 없이 사용하는 경우 해당 변수를 인식하지 못함. -> declare 선언으로 문제를 해결할 수 있음.

  declare const global = "hello"

declare

• 함수 또는 변수 같은 런타임 값을 포함할 수 없지만 declare 키워드를 사용해 이런 구조체가 존재한다고 선언할 수 있음. -> 런타임 값을 선언할 수 있음.
• declare로 변수를 선언하면 초깃값이 허용되지 않는다는 점을 제외하고 일반적인 변수 선언과 동일한 구문 사용
• .d.ts 파일 외부에서도 사용될 수 있는 키워드
• .d.ts 파일에서 함수나 변수 같은 런타임 구문에 declare 키워드가 없다면 타입 오류가 발생함

전역 선언 파일

• import 또는 export 문이 없는 타입 스크립트 파일은 모듈이 아닌 스크립트로 취급되기 때문에 이러한 파일에 선어된 타입을 포함한 구문은 전역으로 사용된다.
• 위 특징을 사용해 타입을 전역으로 선언할 수 있다.
• 인터페이스 같은 경우 전역 스크립트에서 선언할 경우 전역에서 선언 병합을 사용할 수 있음.(?)

declare global

• 전역 스크립트가 아닌 모듈 파일에 선언된 타입이 전역으로 사용되어야 하는 경우
• declare global 코드 블록 구문을 사용해 해당 블록의 내용이 전역 컨텍스트를 사용하게 함.

내장된 선언

• 전역 객체는 타입 시스템이 알아야 하지만 코드에서 선언되지 않은 구문 -> 디노, Nodejs, 웹 브라우저 등에서 실행되는 런타임 코드에 의해 제공됨.

• 라이브러리 선언 -> 모던 자바스크립트 런타임에 존재하는 내장된 전역 객체는 lib.[target].d.ts 파일 이름으로 선언됨

  • target

    • tsconfig.json 에서 제공된 target 설정에 따라 적절한 lib 파일을 포함함.
    • 자바스크립트 최신 버전에 대한 연속적인 lib 파일들은 인터페이스 병합을 사용해 서로 빌드된다.

• DOM 선언

  • DOM 타입이라고 하는 웹 브라우저 타입은 로컬 스토리지와 같은 API와 웹 브라우저에서 주로 사용하는 HTMLElement와 같은 타입 형태를 다룬다.
  • DOM 타입은 lib.dom.d.ts 파일, lib.*.d.ts 선언 파일에도 저장된다.
  • lib 컴파일러 옵션을 재정의하지 않는 타입 스크립트 프로젝트는 DOM 타입을 기본으로 포함한다.

모듈 선언

• 선언 파일의 기능
• 모듈의 상태를 설명함.

// 사용 방법
declare module "my-module-name"{
	export const value : string;
}

• 모듈 선언은 자바스크립트와 타입스크립트 파일 확장자가 아닌 특정 파일의 내용을 코드로 가져올 수 있음을 웹 애플리케이션에 알리기 위해 사용함

declare module "*.module.css"{
	const styles :{ [i : string] : string};
	export default styles;
}

패키지 타입

• 일반적으로 .d.ts 파일을 사용해 자바스크립트 파일 뒤에 타입 스크립트 타입 시스템 형태를 지원하도록 선언
• 타입 스크립트는 입력된 파일에 대한 .d.ts 출력 파일과 자바스크립트 출력 파일을 함께 생성하는 선언 옵션을 제공 -> js 파일로 부터 .d.ts 파일을 자동으로 생성함.

Definitely Typed

• 커뮤니티에서 작성된 패키지 정의를 수용하기 위해 Definitely Typed 저장소를 만듬
• 자바스크립트로 작성된 패키지에 대한 타입 형태를 알려주기 위해 만들어진 저장소
• DT 패키지는 타입을 제공하는 패키지와 동일한 이름으로 npmdp @types 범위로 게시됨.