Typescript | 타입스크립트 개발환경 구성, 타입 단언(Type assertion), 타입 가드(Type guard), Type Alias vs interface

타입스크립트 개발환경 구성

npm install -g typescript 
= global로 typescript 설치하겠다

 

main.ts

--> index.html에 연결

<script src="main.js"></script>

 

--> main.ts를 컴파일해서 main.js 만들어야 함 !

주의) 컴파일할 때는 기본적으로 ES3 문법을 사용해서 컴파일하게 설정이 되어있음

tsc main.ts

 

 

--> watch모드로 main.ts 파일에서 변경된 사항을 자동으로 main.js에 반영

tsc main.ts -w

 

tsconfig.js

 

타입 단언(Type assertion)

프로그래머가 컴파일러에게 내가 너보다 타입에 대해 더 잘 알고 있고, 나의 주장에 대해 의심하지 말라고 하는 것

interface Foo {
  bar: number;
  bas: string;
}
var foo = {} as Foo;
foo.bar = 123;
foo.bas 'hello';

 

예시

 

--> 오류! 'bodyElement'는 'null'일 수 있습니다 

 

해결책

 

잘못된 사용법

 

--> null 일 경우 toLowerCase() 사용 불가, 에러 발생

 

 

 

--> Type guard 사용

 

Type Alias vs interface

Type Alias(타입 별칭)과 interface는 타입의 이름을 지정하는 방법으로 매우 유사하며 대부분의 경우 자유롭게 선택할 수 있음

 

 

 

차이점

1. 확장

interface --> extends를 이용해서 확장

type --> intersection을 이용해서 확장

 

2. 병합

interface --> 선언 병합(Declaration Merging)

type --> 선언 병합 불가

 

type은 중복되었다고 오류 뜸

 

공통점

1. implements 사용 가능

 

2. union 유형

| 연산자를 사용하여 type과 interface를 모두 사용하여 새로운 union 유형을 생성함. 하지만 선언은 항상 type이어야 함