서론

최근 동아리 프로젝트에서 사용하는 기술 스택으로 타입스크립트가 있어서 공부하는 중이다.
하지만 타입스크립트를 단순히 타입을 정의한 자바스크립트 정도로만 생각한다면 굉장히 답답한 일이다.
현재까지는 자바스크립트 기반으로 코드를 작성하고 타입 에러가 발생하면 타입을 추가해 주는 방식으로 타입스크립트를 사용해 왔는데 이번 시간에 타입스크립트를 왜 사용하는지를 이해하고 올바르게 타입스크립트를 사용해 보고자 한다.

TypeScript

JavaScript는 언어가 굉장히 유연하다.
다음 코드를 살펴보자.

const a = 3; 	// number
const b = '5';	// string
const c = a + b; // c는 string이다..!

number와 string을 더한다는 것이 말이 안 될 것 같지만 자바스크립트는 예외를 발생시키지 않는다.

const a: number = 3;
const b: string = '3';
const c: number = a + b; // 타입스크립트 에러 발생

하지만 타입스크립트에서는 에러를 발생시킨다.
또한, 컴파일 타임에 에러를 발생시키기 때문에 프로그램을 실행시키기 전이더라도 에러를 검출할 수 있다.

타입스크립트는 의도를 명시해야 에러가 발생하지 않는다.

지금이야 코드가 간략해서 굳이? 저게 편한 게 맞는가? 라는 의문이 생길 수 있다.
추후 프로젝트가 방대해졌을 때 컴파일 타임에 에러를 발생시키지 않는다면 에러를 수정하기가 힘들 것이다.
이에 더해 자바스크립트의 암묵적 변환 때문에 런타임에 에러가 발생하지 않는데도 의도하지 않은 동작을 한다면 이를 발견하기는 더욱이 힘들어질 것이다.
타입스크립트는 이러한 상황을 사전에 예방해줄 수 있다.

type

boolean

참과 거짓중 하나와 이에 수행할 수 있는 연산(|| && !)의 집합이다.

number

숫자와 숫자에 적용할 수 있는 연산, 숫자에 호출할 수 있는 메서드(.toFixed .toString)의 집합이다.

string

문자열과 문자열에 수행할 수 있는 연산, 문자열에 호출할 수 있는 메서드(.concat)의 집합이다.

any

any는 모든 값의 집합이다.
타입스크립트를 사용할 때 사용할 일이 없도록 하자.
any를 사용한다면 타입스크립트를 사용하는 이유가 없어진다.

unknown

타입을 미리 알 수 없을 때 unknown을 사용한다.
타입을 검사하여 정제하기 전까지는 unknwon 타입의 값을 사용할 수 없게한다.

const a: unknown = 10;
const b = a + 20;	// 객체타입이 unknown이라서 에러 발생
if (typeof a === 'number'){
  const c = a + 30;	// c는 number
}

unknown 타입을 사용하려면 개발자가 명시적으로 설정해야 한다.

object

타입스크립트의 객체타입은 객체의 형태를 정의한다.
타입스크립트는 객체 프로퍼티에 엄격하기 때문에 객체에 프로퍼티를 정의한다면 반드시 해당 프로퍼티가 있어야한다. 해당 프로퍼티가 없으면 에러를 발생시킨다.

const a: {
  b: number
}
a = {} // b프로퍼티가 없으므로 에러 발생

만약 프로퍼티가 있을수도 있고 없을 수도 있다면 다음과 같이 작성하자.

const a: {
  b: number;
  c?: string;
}

위 코드에서 c는 존재할 수도 존재하지 않을 수도 있다.

객체 리터럴은 객체가 어떤 필드를 포함할 수 있는지 알고 있거나 객체의 모든 값이 같은 타입을 가질 때 사용한다.

결론

타입스크립트를 사용하는 이유와 타입스크립트의 주요한 type에 대해 알아보았다.
정리하자면 타입스크립트는 변수에 타입을 강제하고, 사용할 객체와 사용하지 않을 객체를 구분함으로써, 복잡한 환경의 프로젝트에서 개발자가 실수할 가능성을 크게 줄여준다.
이외에도 타입스크립트에는 개발자에게 도움이 되는 많은 기능들이 있다.
차차 하나씩 정리해 보도록 하겠다.