개요

안녕하세요😀 이번에는 23.2.6(월)부터 약 1주에 2회씩 2주간 원티드에서 진행했던 프런트엔드 챌린지에 참여하면서 느꼈던 타입스크립트에 대한 오해들을 공유해 보려고 합니다. 평소에 개발하면서 "TypeScript를 어떻게 하면 더 잘 사용할 수 있을까?" 고민하는 와중에 챌린지에서 TypeScript에 대한 강의가 있다고 하여 참여했었는데 짧은 시간이지만 좋은 지식들을 많이 전달받았습니다.👍 제가 한번 여러분에게 잘 전달해 보겠습니다.

왜 타입스크립트를 사용해야하는가❓

JavaSciprt는 런타임 언어(동적인 언어)이기 때문에 타입 충돌을 방지할 수 없지만, TypeScript는 컴파일 언어로 컴파일 단계에서 에러를 찾을 수 있기 때문에 TypeScript를 사용한다고 생각하시는 분들이 많습니다. 이 말이 틀린 건 아니지만 이로 인해서 얻는 장점들은 더 있습니다. 아래 예시 코드를 보겠습니다.

// sum.js
function sum(a,b){
    return a+b
}

//sum.ts
function sum(a:number,b:number){
    return a+b
}

a, b라는 값을 받아 합을 계산하는 메서드가 있습니다. 만약 TypeScript를 사용하지 않은 순수 JavaSciprt 코드를 봤을 때 a, b 인수에 어떤 타입의 값이 들어올지 추정하기 어렵습니다. 그러나 TypeScript를 적용시킨 코드에서는 단번에 "아~ a, b는 숫자들이 들어오는구나"라고 바로 알 수 있습니다. 맞습니다. 이처럼 코드의 가독성을 높이고 가동성이 좋으니 유지 보수성 또한 향상되는 이점이 있습니다.

TypeScript에 대한 사실과 오해

위에서 "TypeScript를 왜 사용하는지" 알아봤으니 이제 TypeScript에 대해 많이 오해할법한 것들에 대해 공유해 보려고 합니다.

1. Interface VS Type(feat.선언병합)

TypeScript를 사용하면서 Interface, Type 의 차이점이 없다고 생각하시는 분들이 있을 수 있습니다. 아래 예제코드를 보겠습니다.

interface Student = {
	name: string;
	age: number;
}

type Student = {
    name: string;
    age: number;
};

위와 같이 interface와 type 두 키워드를 사용해서 타입을 선언할 때 차이점이 없어서 둘은 같은 거 아닌가?라는 오해를 하실 수 있습니다. 어떤 차이점이 있는지 알아보겠습니다.

일단 TypeScript 공식 홈페이지에서는 둘을 아래와 같이 정의하였습니다.

A type alias is exactly that - a name for any type. An interface declaration is another way to name an object type

정의와 같이 type은 모든 타입, interface는 객체에 대해서만 타입을 정의할 수 있다고 하는데 사용자에게는 크게 와닿지 않는 차이인 것 같습니다.

그러면 어떤 차이가 있을까요??
TypeScript 측에서 말하는 둘의 차이점은 새로운 프로퍼티에 대한 수용 여부입니다.

Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

새로운 프로퍼티에 대한 수용여부란 무엇인지는 다음 두가지 예시를 통해서 확인해보겠습니다.

첫 번째는 Type alias를 사용하여 animal이라는 타입을 정의해주었고 두 번째는 Interface를 사용하여 정의하였습니다. Type alias를 사용하여 정의했을 때는 animal에 대해 프로퍼티를 더 추가할 수 없었습니다. 마치 JS에서 const와 같은 느낌입니다. 그에 반해 Interface를 사용하여 정의 한 경우에는 새로운 프로퍼티에 대해 문제없이 수용하고 있습니다. 이 부분을 선언 병합이라고도 합니다.
(위의 코드 실행시 animal interface 모습)

interface animal {
    name:string;
    age:number;
*/

다시 정리해 보자면 Type은 모든 타입을 정의할 수 있지만 새로운 프로퍼티에 대해 수용할 수 없는 특징이 있습니다. 새로운 프로퍼티를 추가해야 하는 경우에는 interface를 사용하여 타입을 정의해 주면 될 것 같습니다.

2. TypeScript도 실행할때는 JavaSciprt가 된다.

브라우저는 TS를 이해할 수 없습니다. 브라우저는 JS만 이해할 수 있기 때문에 TypeScript 파일을 실행시키려면 JavaSciprt로 트랜스파일링되는 과정이 필요합니다. 트랜스파일링 해주는 수단은 TSC(TS 컴파일러) or 바벨이 있겠습니다. 둘의 차이점은 다른 포스트에서 다뤄보겠습니다.

위와 같은 과정을 거쳐서 TypeScript 코드로 작성된 .ts 파일을 컴파일하면 .js로 변환되는것을 보실 수 있습니다.