근황

요즘 이직 후 적응기간이 필요했고 진행해 오던 사이드 프로젝트가 곧 1차 오픈이 다가와서 이것저것 신경을 썼었고 올해 3학년으로 편입을 다시 하게되어 중간고사와 겹쳐 바빴고 정신 없는 나날을 보냈었다.
미루다가 오랜만에 글을 올리게 되었당 ㅠ 타입스크립트 공부를 계속하고있어서 공부내용을 정리하려 한다!!

타입스크립트의 이상한 특징

글로벌 모듈

타입스크립트 파일에변수를 선언하면 자동으로 글로벌 모듈(ambient module)이 되어버린다..
import export 를 하지 않아도 ts 끼리는 변수를 가져다 쓸 수가 있다는 얘기!

그래서 그런지 let name 을 선언 했을시 에러가 난다.

lib.dom.d.ts(17330, 15): 여기서도 'name'이(가) 선언되었습니다.

정의가 되어있다는 얘기이다. 그래서 ts 에서는 name 을 변수로 사용할 수 없다.
그렇다면 변수선언을 하면 전부 전역변수가 되어버리는데. 애매한 상황이다.

로컬 모듈

이럴 경우 로컬 모듈로 만드는 방법은 import{} 혹은 export{} 하나가 있으면 무조건 로컬 모듈로 변경이 된다.

로컬 모듈에서 글로벌 변수를 만들고 싶을때?

그러면 현재 로컬 모듈로 되었는데 갑자기 글로별 변수를 만들고 싶어질 때는?

declare global {
  type Name = string;
}

모든 파일은 이 타입을 가져다 쓸 수 있다!

let b: Name = "test"
console.log(b);

d.ts

타입스크립트 코드를 짜다 보면,라이브러리를 쓰다 보면 d.ts라는 파일을 보게 될 것이다.

사용이유

1) 타입이 너무 길어서 따로 정의해서 보관해야할 때

import { Test } from "./test";
let test: Test;

2) 타입 레퍼런스 생성하고 싶을때

레퍼런스용 d.ts 을 생성하기도 한다.
ts파일에 있던 모든 타입들을 정리해 놓은 문서로 쓴다.
tsconfig.json 에 "declaration": true 옵션을 추가 하면 ts 만들 때마다 d.ts파일 자동 생성된다.

let Per: string = "ㅁㅁㅁ";
type Mimi = number;

 //index.d.ts
declare let Per: string;
declare type Mimi = number;

자동 생성되는 경우 d.ts굳이 수정할 필요는 없다.

글로벌 모듈로 만들고 싶을때

그리고 d.ts는 자동으로 export, import 해도 자동으로 글로벌 모듈이 되지 않는다. (로컬 모듈)

d.ts 파일을 글로벌 모듈로 만들고 싶을때 tsconfig 속성에
"typeRoots": ["./types/common"]
추가해 주면 common 폴더에 있는 d.ts파일은 글로벌 모듈로 사용이 가능하다는 얘기이다.

위험해서 export import 로 주로 사용하긴 함

번외) DefinitelyTyped

주로 외부 라이브러리를 수정할 때 d.ts 를 쓴다.
https://github.com/DefinitelyTyped/DefinitelyTyped 을 사용하면 좋다.
온갖 라이브러리 타입을 자동 지정 해주는 고마운 친구 !
d.ts 파일 다운받아서 사용하면 됨 찾기 힘드니 공식 typescript 사이트에 검색해 보면 위치 알 수 있음 !
npm 설치시 대부분 자동으로 @type 들어오긴 한다!