[JS][TS] TypeScript의 간단한 설명과 타입

타입스크립트란

자바스크립트가 가진 다른 C계열 언어들과의 차이는 크게 두 가지라고 개인적으로 생각한다. 첫 번째로는 비동기, 두 번째는 타입이다.

이 중에 동적 타입은, 자바스크립트만의 특징은 아니다. 파이썬과 같이 런타임에 정해지는 스크립트 언어도 존재한다. 어쨌거나 그런 이유로, 컴파일 언어와는 다르게 정적 타입으로 사전에 체크할 수가 없었고, 이를 해결하고 실행 전 단계에서 에러를 최대한 거르고자 여러가지 방법이 나왔다. 그 중 하나가 바로 타입스크립트이다.

타입스크립트는 자바스크립트의 상위호환(SuperSet)으로, 단순하게 생각하면 타입을 가진 자바스크립트의 느낌이다. 거기에 class, interface 등을 추가해서 자바나 C#과 같은 OOP 프로그래밍을 할 수 있다. 인터프리터 언어인 자바스크립트와는 다르게 컴파일 언어인데, 전통적인 C계열의 컴파일 언어와는 차이가 있어 트랜스파일 언어라고도 부른다.

동작 방식은 TS -> (컴파일(트랜스파일)) -> JS -> (실행) 과 같이 이루어지는데, TS가 JS로 변환될 때 helper 코드가 위아래로 추가되기 때문에, 절대적인 코드의 양 자체는 타입스크립트가 더 많다. 물론 개발자는 타입스크립트만 작성하고, 변환은 알아서 해 주므로 개발할 때 크게 문제되는 부분은 아니다.

ts config파일을 통해 JS 파일 변환 시의 설정(경로, 버전 등)을 할 수 있다. 자세한 정보는 https://json.schemastore.org/tsconfig에서 확인할 수 있다.

아래는 가장 보편적인 예시이다.

function add(a: number, b: number) {
  return a + b;
}
const sum: number = add(1, 2);
console.log(sum);

자바스크립트였다면 add에 어떤 타입이 들어가도 에러 검출을 하지 못 했겠지만, 타입스크립트에서는 add('a','b'); 와 같은 식으로 작성하면 타입이 맞지 않아 컴파일을 할 수 없다(C계열과 동일하게 IDE에서 빨간 줄이 나온다).

타입스크립트의 타입

우선 타입에 대해서 살펴보자면, 자바스크립트의 기본 자료형(null, Array, Boolean, Number 등)을 모두 포함하고, Any, Void, Never, Enum 등의 타입이 더 제공된다.

• Primitive type : 실제 값을 저장하는 자료형. 자바스크립트와 같고, 내장 함수도 사용할 수 있다(ex. name.toString()).
• literal : 변하지 않는 값. const와는 약간 다르고, 35와 같은 숫자 자체를 가리킨다.
• null & undefined : 아무 타입에나 들어갈 수 있고, 체크를 strict하게 설정하면 void나 본인들에게만 할당하게 설정할 수도 있다. 둘의 차이는 null은 사용할 준비는 되었으나 값이 할당되지 않음(객체 생성됨), undefined는 객체 자체가 존재하지 않는다. 없는 멤버에 접근할 때 undefined가 나오는 것을 볼 수 있다.
• Any : 말 그대로 어떤 타입이어도 상관없는 타입인데, 타입스크립트를 쓰는 의미가 퇴색된다. 예를들어
  function add (a: Any, b: Any) { ... 와 같다면 아무거나 들어가도 되는데, 이러면 자바스크립트를 그냥 쓰는 것과 차이가 없다.
• Symbol : 고유하고 수정불가능한 값으로, 접근 제어에 주로 사용한다.

변수 선언하기

자세한 내용은 지난 글을 참조하자.

• var : ES5까지 쓰던 변수 키워드로, 함수 스코프에서 유효하다. 재선언도 가능하고, 호이스팅도 가능하다.
• let, const : ES6부터 쓰는 변수 키워드로, 블록 스코프에서 유효하다. 재선언 불가, 호이스팅 불가.

결론적으로는 let과 const를 사용하는 편이 좋다.

추가적으로 let과 const의 차이에 대해서 보자면, let의 타입추론은 일반적 타입이 된다. 즉
let b = 'hi' // string
이렇게 추론이 되는 반면, const는 literal로 타입추론이 된다.
const d = 'hi' // type : 'hi'

그 외 타입에 관한 정보

• Type Assertion : 컴파일러에게 타입을 알려주는 것으로, 다른 컴파일 언어에서 사용하는 캐스팅과는 다르다. 캐스팅은 실제 데이터 구조를 바꾸는 것이고, Type Assertion은 단순히 컴파일러에게 알려주는 용도이다. 아래 두 가지 방법이 있다.
  1. 변수 as 강제타입
  2. <강제타입> 변수
  
  
• Type Alias : 타입의 별칭으로, type의 reference이다. C++에서의 변수 alias와 유사하다.
• Union Type : 여러 타입을 허용하는 것으로, Any의 하위호환으로 볼 수 있다. 단순한 개념이다.
  ex) let b: string | number; // string 및 number 타입 허용

Type Alias와 Union Type을 함께 사용하면, 다음과 같이도 사용할 수 있다.

type StringOrNumber = string | number; // Type Alias
let b: StringOrNumber; // Union Type by Type Alias