⭐ 타입스크립트란?
-
타입스크립트는 동적 타입 언어 (런타임시 변수의 타입이 결정되는 언어)인 자바스크립트의 약점을 위해 정적인 타입을 부여한 언어 즉, 자바스크립트의 확장판
-
컴파일 시 타입 체킹을 하기 때문에 오류 포착도 쉽고 명시적 타입지정으로 개발자의 의도를 명확하게 파악 가능
-
타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한 번 변환해주는 컴파일 과정이 필요 (TSC)
-
자바스크립트는 동적 타입 언어기 때문에 런타임 때 속도는 빠르지만 타입 안정성이 보장되지 않음 반면에 타입스크립트는 컴파일시 시간이 조금 걸리지만 안정성을 보장
-
리액트의 경우 브라우저는 자바스크립트 밖에 모르기 때문에 tsx 파일을 자바스크립트로 변환하는 트랜스파일링이 필요
⭐ 타입스크립트 특징
-
ES6 모듈 및 네임스페이스
-- 타입스크립트는 ES6의 모듈 선언 (export)와 모듈 호출 방식 (import)를 지원, 유사한 기능의 클래스들을 모으도록 네임 스페이스를 활용 가능 -
클래스와 인터페이스
-- ES6의 클래스 특징과 인터페이스 특징을 지원하기 때문에 기존 객체지향 프로그래밍 언어에서 사용하는 키워드 (class, interface, extends)를 그대로 사용 가능 -
타입 시스템
-- 타입 스크립트는 타입 시스템을 지원, 자바스크립트의 타입을 확장하고 Type Annotation을 통해 변수에 타입을 선언할 수 있음, 이렇게 타입이 지정되면 엄격한 타이핑이 적용돼 타입 안정성을 보장
타입스크립트 기본 타입
- Boolean
- Number
- String
Object
- Array
-
Tuple : 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식
-
enum : C, Java같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미
-
any : 모든 타입에 대해 허용 (그냥 사용하지 마셈)
기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 TS를 점진적으로 대입할 때 좋음 -
void : 변수에는 undefined와 null만 할당하고 함수에는 반환 값을 설정할 수 없는 타입
-
never : 함수의 끝에 절대 도달하지 않는다는 의미 (결코 return 하지 않음)
void와 never의 차이
- null
- undefined
인터페이스 (interface)
- 인터페이스는 상호간의 정의한 약속 혹은 규칙을 의미
-- 객체의 스펙 (속성과 속성의 타입)
-- 함수의 파라미터
-- 함수의 스펙 (파라미터, 반환 타입)
-- 배열과 객체를 접근하는 방식
-- 클래스
⭐ Type Alias vs Interface
-
확장 상속 방법
-- interface는 extends 키워드를 통해 확장
-- Type Alias는 & (intersection Type)을 이용 -
타입 지정 범위
-- 인터페이스는 타입만 지정할 수 있지만 Type Alias는 원시값, union Type, Tuple 등도 타입으로 지정 가능 -
선언 병합, 자동 확장
-- 인터페이스는 동일한 이름의 인터페이스가 생성되면 컴파일러가 선언된 개별적인 인터페이스를 하나의 정의로 확장, Type Alias는 확장되지 않음
- 결론 : Type Alias와 Interface 둘 다 기능은 비슷하지만 공식문서를 보면 웬만하면 Interface를 사용하고 union, tuple 등이 필요한 때에만 type Alias를 사용하라는 내용이 존재
enu과 object의 차이
-
객체는 프로퍼티를 자유롭게 변경할 수 있는데 enum의 속성은 변경 불가
-
객체의 프로퍼티 값으로는 자바스크립트의 모든 값이 올 수 있지만 enum의 값으로는 문자열 또는 숫자만 허용
-
객체의 프로퍼티는 리터럴 타입이 아니라 그보다 더 넓은 타입으로 타입 추론이 가능, enum은 항상 리터럴 타입이 사용 (리터럴이란 변수에 넣는 변하지 않는 데이터 그 자체 let a = 1에서 1이 리터럴)
-
결론적으로, 종류를 나타내는 여러 개의 숫자 혹은 문자열을 다뤄야하는데 각각 적당한 이름을 붙여서 코드의 가독성을 높이고 싶다면 enum을 사용
제네릭 (Generic)
- 타입을 마치 함수의 파라미터처럼 사용하는 것
- 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용
위 그림처럼 T자리에 동적으로 들어가는 것
타입추론, 타입호환, 타입별칭, 타입단언, 타입가드
-
타입 추론
-- 타입스크립트에서는 타입 표기가 없는 경우 타입 정보를 제공하기 위해 타입을 추론함 -
타입 호환 (Type Compatibility)
-- 타입호환이란 특정 타입이 다른 타입에 잘 맞는지를 확인
-- 자바스크립트는 객체 리터럴이나 익명함수 등을 사용하기 때문에 명시적으로 타입을 지정하기 보다는 코드의 구조 관점에서 타입을 지정 -
타입 별칭 (Type Alias)
-- 타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미 -
타입 단언 (Type Assertion)
-- 타입스크립트 컴파일러가 타입을 실제 런타임에 존재할 변수의 타입과 다르게 타입을 추론하는 경우 프로그래머가 수동으로 컴파일러한테 특정 변수에 대해 타입 힌트를 주는 것 -
타입 가드 (Type Guard)
-- 타입스크립트 컴파일러는 Typeof 키워드를 이해 가능
-- 타입가드를 사용하면 조건문에서 객체의 타입을 좁혀 나갈 수 있음
