프론트엔드 개발자 인터뷰 대비를 할 겸 브리딩 인턴십 프로젝트를 다시 보던 중.. TypeScript를 사용했던 내용을 발견해 정리할 겸 면접 직전에 끄적여보는 TIL이다.
TypeScript?
자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다.
특징
1) 컴파일 언어, 정적 타입 언어
자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다.
이에 비해 타입스크립트는 정적 타입의 컴파일 언어로 컴파일러 또는 바벨을 통해 자바스크립트 코드로 변환된다.
- 코드 작성 단계에서 타입을 체크해 오류를 확일할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 빠르다.
- 단, 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다.
2) 객체 지향 프로그래밍 지원
클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.
타입스크립트 사용 이유?
1) 높은 수준의 코드 탐색과 디버깅
Ts는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다. 코드 자동완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다. (연구에 따르면 JS의 버그의 15%를 TS로 감지 가능)
리액트와 호환성
CRA(create React App)에 간단한 옵션 추가만으로 타입스크립트를 사용할 수 있다.
참고자료: https://www.samsungsds.com/kr/insights/TypeScript.html
interface
interface Window{
title: string
}
interface Window{
ts: TypeScriptAPI
}
const src = `const a = "hello World"`;
window.ts.transpileModule(src, {});인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다.
인터페이스로 구현하는 함수, 변수, 클래스는 인터페이스를 준수하여야한다.
인터페이스는 extends 키워드를 사용하여 인터페이스 또는 클래스를 상속받을 수 있다.
Type alias
type Window = {
title: string
}
type Window ={
ts: TypeScriptAPI
}
//Error: Duplicate Idenrifier 'Window'.
타입 앨리어스는 원시값, 유니온 타입, 튜플 등도 타입으로 지정할 수 있다.
Type vs Interface
1. 선언 후 타입 확장성
Type alias는 선언 시점에서 그 내용을 고칠 수 없는데 반해, Interface는 선언 후에도 얼마든지 다른 곳에서 내용을 확장할 수 있다.
2. 유틸리티 함수를 통해 만들 수 있는 것은 오직 Type
Type은 타입스크립트에서 제공하는 유틸리티 함수를 써서 기존의 type이나 Interface를 이용하여 새로운 타입을 만들어 낼 수 있다.
interface Todo{
title: string;
description: string;
completed: boolean;
}
type TodePreview = Pick<Tode, 'title' | 'completed'>;따라서 type은 매번 새로운 객체를 생성하고, 합성하는 일이 자주 일어나는 함수형 프로그래밍 방식에 적합하다.
3. Class에 적용할 타입을 생성하고, 선언 병합을 쓸 수 있는 것은 오직 interface
interface는 객체 뿐만 아니라 클래스의 타입을 지정하는데에도 사용된다. 또한 클래스나 객체의 메서드에 오버로드할 수 있다. 따라서 이 방식은 클래스를 많이 생성하고 상속, 학장하는 객체 지향 프로그래밍 방식에 적합하다.
리액트에서는?
리액트에서는 상속과 확장에 있어서 interface가 더 높은 우선순위를 가지고 있기 때문에 interface를 사용하게 된다.
type alias는 union과 tuple타입이 필요한 경우에만 사용하는 것이 바람직하다.
- tuple 타입: 값의 종류가 다른 배열을 표현할 수 있다.
let tuple: [string, number];- union 타입: or연산자(||)와 같이 'A 이거나 B이다'라는 의미의 타입
function log(text: string | number){
...
}참고자료: https://codingmoondoll.tistory.com/entry/Type-vs-Interface
