TypeScript_STUDY 12장 _ 타입스크립트 프로젝트관리 [ 12.1 엠비언트 타입 활용하기 | 12.2 스크립트와 설정 파일 활용하기 ]
TypeScriptStudy
12.1 엠비언트 타입 활용하기
.
.
.
1. 앰비언트 타입 선언
[ 타입스크립트의 타입 선언 ]
.ts 또는 .tsx 확장자를 가진 파일에서도 가능
.d.ts 확장자를 가진 파일에서도 선언 가능
- 앰비언트 타입 선언
: 타입 선언만 할 수 있으며 값을 표현할 수는 없다.
** 앰비언트 embient : 사전적으로 '주변의'란 의미
: 값을 정의할 수 없지만 declare라는 키워드 사용 -> 어딘가에 자바스크립트 값이 존재한다는 사실 선언 가능
** declare : 타입스크립트 컴파일러에 어떤 것의 존재 여부를 명시해주는 역할. 단순 존재 여부만 알려줌 -> 컴파일 대상 아님.
- 대표적인 앰비언트 타입 선언 활용 사례
타입스크립트는 기본적으로 .ts와 .js 파일만 이해하며 그 외의 다른 파일 형식은 인식하지 못함.
따라서,
알지 못하는 파일 형식을 모듈로 가져오려 하면 에러가 발생.
이런 상황에,
declare 키워드 사용 -> 특정 형식을 모듈로 선언하면 타입스크립트 컴파일러에 미리 정보를 제공함으로써 에러 수정 가능.
declare module "*.png" {
const src: string;
export default src;
}: declare 키워드는 이미 존재하지만 타입스크립트가 알지 못하는 부분을 컴파일러에 '이러한 것이 존재해'라고 알려주는 역할
- 자바스크립트로 작성된 라이브러리
자바스크립트로 작성된 npm 라이브러리 -> 타입 선언이 존재 x
: 임포트한 모듈은 모두 any로 추론됨.
ex. tsconfig.json파일에서 any를 사용하지 못하게 설정했다면 ?
: 프로젝트가 빌드되지 못함.
이때,
앰비언트 타입 선언 사용
자바스크립트 라이브러리 내부 함수와 변수의 타입을 앰비언트타입으로 선언
-> 타입스크립트는 자동으로 .d.ts 확장자를 가진 파일을 검색하여 타입 검사를 진행 ( 문제 없이 컴파일 )
즉, 앰비언트 타입 선언은
타입스크립트에게 '자바스크립트 코드 안에는 이러한 정보들이 있어'라고 알려주는 도구라고 이해하기...!
- 타입스크립트로 작성된 라이브러리
타입스크립트로 작성된 라이브러리일지라도 자바스크립트 파일과 .d.ts 파일로 배포되는 것이 일반적.
그러나
자바스크립트 파일과 .d.ts 파일로 배포하면 라이브러리 코드를 따로 컴파일하지 않아도 되기 때문에 컴파일 시간이 크게 줄어듦.
.d.ts 파일에 정의된 타입 정보를 할용 -> 라이브러리 사용
tsconfig.jsom 파일의 declaration을 true로 설정 -> 타입스크립트 컴파일러는 자동으로 .d.ts 파일을 생성
- 자바스크립트 어딘가에 전역 변수가 정의되어 있음을 타입스트립트에 알릴 때
실제 자바스크립트 어딘가에 전역 변수가 정의되어 있는 상황을 타입스크립트에 알릴 때
앰비언트 타입 선언 사용.
네이티브 앱과의 통신을 위한 인터페이스를 네이티브 앱이 Window 객체에 추가하는 경우가 많음.
-> 타입스크립트에 직접 구현x라도 실제 런타임 환경에서 해당 변수 사용 가능.
2. 앰비언트 타입 선언 시 주의점
- 타입스크립트로 만드는 라이블러리에는 불필요
tsconfig.jsom 파일의 declaration을 true로 설정 -> 타입스크립트 컴파일러는 자동으로 .d.ts 파일을 생성 -> 수동으로 생성 필요 x
- 전역으로 타입을 정의하여 사용할 때 중의해야 할 점
동일한 이름의 앰비언트 타입 선언 -> 충돌 발생
그래서
앰비언트 타입 선언은 명시적인 임포트나 익스포트가 없기 때문에
코드의 의존성 관계가 명확하지 않아 나중에 병경할 때 어려움.
3. 앰비언트 타입 선언을 잘못 사용했을 때의 문제점
앰비언트 타입은 명시적인 임포트나 익스포트 없이 코드 전역에서 사용 가능.
특히 소스코드 규모가 커지면 추후 변경 어려움.
앰비언트 변수 선언은 어느 곳에나 영향을 줌
-> 일반 타입 선언과 섞이게 되면 앰비언트 선언이 어떤 파일에 포함되어 있는지 파악하기 어려워짐.
.d.ts 확장자 파일 내에서 앰비언트 타입 선언을 하는 것은 일종의 개발자 간의 약속.
( : 타입선언의 명확성을 높이기 위해 )
4. 앰비언트 타입 활용하기
declare 키워드 효과적 활용 방법 알아보기
- 타입을 정의하여 임포트 없이 전역으로 공유
.d.ts 파일에서의 앰비언트 타입 선언은 전역 변수와 같은 역할.
-> 앰비언트 타입 선언시 모든 코드 내에서 임포트하지 않고 사용 가능.
- declare type 활용하기
커스텀 유틸리티 타입을 declare type으로 선언 -> 전역에서 사용 가능
declare type Nullable<T> = T | null;
const name: Nullable<string> = "woowa";Nullable 타입 선언 -> 어디에서든 쉽게 사용 가능
- declare module 활용하기
const fontSizes ={
/..}
const colors ={
/..}
const depths = {
origin: 0,
foreground: 10,
dialog: 100,
//..
}
const theme = {
fontSizes,
colors,
depths
}
declare module "styled-components" {
type Theme = typeof theme;
export interface DefaultTheme extends Theme {}
}theme의 인터페이스 타입 확장 -> theme 타입이 자동으로 완성되도록 하는 기능 추가
- declare namespace 활용하기
Node.js 환경에서 .env 파일을 사용할 때,
declare namaspace 활용
-> process.env로 설정값을 손쉽게 불러오고 환경변수의 자동 완성 기능 사용 가능
declare namespace NodeJS {
interface ProcessEnv {
readonly API_URL: string;
readonly API_INTERNAL_URL: string;
//...
}
}- declare global 활용하기
declare global 키워드는 전역 변수를 선언할 때 사용.
ex) 전역 변수 window 객체의 스코프에서 사용되는 모듈이나 변수 추가 가능
declare global {
interface Window {
newProperty: string;
}
}네이티브 앱과의 통신을 위한 인터페이스를 Window 객체에 추가할 때 앰비언트 타입 선언 활용 가능
5. declare와 번들러의 시너지
declare global로 전역 변수를 선언하는 과정과 번들러를 통해 데이터를 주입하는 절차를 함게 활용하면 시너지를 낼 수 있음.
const color = {
white: "#ffffff",
black: "#000000",
} as const;
type ColorSet = typeof color;
declare global {
const _color: ColorSet;
}전역에 _color라는 변수가 존재함을 타입스크립트 컴파일러에 알리면 해당 객체 활용 가능
const white = _color ["white"];하지만
아직 ColorSet 타입을 가지고 있는 _color 객체의 실제 데이터가 존재하지 않음.
다시말해
앞의 코드는 타입스크립트 에러를 발생시키지 않지만,
코드가 실행될 경우에는 실제 데이터가 없기 때문에 기대하는 동작과 다를 수 있음.
12.2 스크립트와 설정 파일 활용하기
.
.
.
1. 스크립트 활용하기
- 실시간으로 타입을 검사하자
타입스크립트 프로젝트에서 컴퓨터 성능이 떨어지거나 프로젝트 규모가 커지면 타입 에러를 알려주는 속도가 느려짐
yarn tsc —noEmit -incremental-w-> tsc(타입스크립트 컴파일러) 실행
noEmit : 자바스크립트로 된 출력 파일을 생성하지 않도록 설정
incremental : 증분 컴파일 활성화 -> 컴파일 시간 단축
w : 파일 변경 사항을 모니터링
- 타입 커버리지 확인하기
any 타입을 이곳저곳에 남발 (= any 스크립트)
npx type-coverage -detail이 스크립트를 사용하면 현재 프로젝트의 타입 커버리지와 any를 사용하고 잇는 변수의 위치가 나타남.
타입 커버리지 체크
2. 설정 파일 활용하기
- 타입스크립트 컴파일 속도 높이기
tsconfig의 incremental 속성 활용 -> 타입스크립트의 컴파일 속도 높이기 가능
incremental 속성 true tjfwjd -> 증분 컴파일 활성화 / 변경된 부분만 컴파일 (컴파일 타임 줄이기 가능)
- 스크립트 활용
yarn tsc —noEmit -incremental -diagnostic도서참조 : 우아한 타입스크립트 with 리액트
