1. declare 키워드 : 변수 재정의
일반 js파일 등에 있던 변수를 사용 시 에러나지 않도록 재정의할 때 사용
declare let 변수 :타입;
- declare가 붙은 코드들은 js로 변환되지 않는다.
- 👉🏻 컴파일러에게 힌트를 주는 역할의 코드이기 때문
📌 tsconfig.json에서 allowJS: true로 설정하면 js파일도 타입지정이 알아서 implicit 하게된다.
2. ambient module
ts파일끼리 변수를 가져다 쓰고 싶을 경우, import/export해서 쓰면 되지만,
ts파일은 __ambient module(글로벌 모듈)__이므로 ⭐️ import/export없이도 모든 ts파일에서 그냥 가져다 쓸 수 있다.
📌 다른 파일에 영향을 끼치지 않기 위해 로컬모듈로 만들려면? __import, export 키워드__를 쓰면 된다.
👉🏻 ts파일 내에 import/export키워드가 하나라도 있으면 그 파일은 로컬모듈이 되므로, 공유할 변수는 export해주고 사용할 곳에서 import해줘야함.3. declare global
__로컬모듈__에서 __전역변수__를 만들고 싶으면 declare global {}에 생성
👉🏻 모든 파일에서 해당 변수 사용 가능해짐
- global이라는 이름의 namespace에 추가된다고 볼 수 있다.
4. d.ts 파일
- 타입만 저장할 수 있는 파일형식
- 로컬모듈이다.
🍓 타입저장용 d.ts
- 타입정의만 따로 하고 import해서 사용하는 용도.
- 로컬모듈이므로 export해서 써야한다.
- 한번에 많은 타입을 export하고 싶은 경우 namespace에 담거나,import * as해서 사용
🍓 레퍼런스용 d.ts
- tsconfig.json에서 declaration: true로 설정하면 ts파일 저장 시 자동으로 해당 ts파일의 d.ts파일이 생성된다.
- 열어보면 ts파일의 모든 변수와 함수 타입정의가 들어있다.
🍓 d.ts파일을 글로벌모듈로
프로젝트 내에 타입저장용 폴더 생성 후, tsconfig.json에서 typeRoots: [해당폴더 경로]옵션을 추가하면 ts파일 작성 시 타입이 없으면 자동으로 해당 폴더 내에서 타입을 찾아서 적용해준다.
- __typeRoots옵션__을 사용할 경우, __declaration(d.ts자동생성기능)옵션__은 끄는 것이 좋다.
- 하지만 로컬타입과 글로벌타입이 겹칠 수 있으므로 __import/export__로 쓰는 것이 안전하다.
📍 유명한 js라이브러리의 d.ts파일
🔗 [DefinitelyTyped] (https://github.com/DefinitelyTyped/DefinitelyTyped): 주로 쓰는 라이브러리를 모아놓은 github repository
🔗 @types 라이브러리: 타입정의된 npm패키지를 찾아서 npm으로 설치하여 사용할 수 있다.
🌱 npm으로 설치하면 node_modules/@types경로에 설치가 되고, 만약 "typeRoots"옵션이 있는 경우에는 해당경로도 추가해줘야 한다.
