이번 세번째 프로젝트에서 타입스크립트를 써보기로 했기에,, 공부를,, 해야한다..

JS vs TS

너무나도 역동적인 당신.. 자바스크립트.. 의 한계를 극복하고자 도입된 타입스크립트!
자바스크립트가 실행 단계에 가서야 확인할 수 있었던 타입에러를 코드단에서 확인하고 잡을 수 있다는 장점이 있다고 한다.

우리가 타입스크립트를 사용했다면, 자바스크립트로 변환하는 컴파일 과정이 필요하다.

JS 사용

(1)
let a;

a = 1000;
a = 'string';

(2)
const sum = (a, b) => {
	return a + b
}
sum(1, "5") // 12

TS 사용

(1)
let a : number;

a = 1000;
a = 'string';
// Type 'string' is not assignable to type 'number'.ts(2322)

(2) 
const sum = (a :number, b:number) => {
	return a + b
}
sum(1,5) // 6

TS의 Type

타입스크립트는 결국 변수에 "타입"을 정의하겠다는 것인데, 이는 타입표기(Type Annotation)을 사용해서 나타낼 수 있다.

기본 자료형

object와 reference 형태가 아닌 실제 값을 저장하는 자료형이다.

• string, boolean, number, null, undefined, symbol

사용 방법

let 변수명 : type = value;

// null과 undefined는 type 과 value에 모두 null 또는 undefined를 작성
// null == undefined (true)
// null === undefined (false) 

참조 자료형

객체, 배열, 함수 등과 같은 object 형식의 타입이다. 참조 즉 reference 방식을 사용한다는 것은 곳 메모리에 값을 저장하고, 메모리 주소를 참조하여 연산을 수행한다고 보면 된다.

• object, array, function

let arr: number[] = [1, 2, 3]
let arr: Array<number> = [1, 2, 3] // 제네릭을 사용한 표기법

추가 자료형

타입스크립트에서 추가로 제공하는 타입이 있다.

• tuple, enum, any, void, never

튜플

길이와 각 요소의 타입이 정해진 배열을 저장하는 타입이다. tuple은 이전에 파이썬을 하면서 배운 적이 있는데, 중복이 안되고 [] 보다는 ()을 사용했던 그 개념과는 약간 다른 것 같다.

let arr: [string, number] = ["Hi", 6]

따라서 만약에 number인 요소에 .concat()을 시도하려고 했다거나, 정의되지 않은 인덱스 값을 호출하려고 하면 에러가 난다는 것이다.

enum

enum은 특정 값(상수)들의 집합을 저장하는 타입이다. 인덱싱이 가능하고, 인덱스를 변경하기까지 할 수 있다!

enum Hey {Hi=1, Hello=2, Cheers=3};

let greeting: Hey = Hey.Hi; 
let greeting: Hey = Hey[1];

흠 개인적으로 enum은 Class랑 비슷한 느낌이 들었다.
enum을 사용하면 코드가 단순해지고, 인스턴스 생성과 상속을 방지한다고 되어있다. 이 친구에 대해 좀더 궁금해졌다.

any

any는 말 그대로 정말 그 어떤 타입이 와도 된다. 컴파일 중 타입 검사를 하지 않는다는 것을 의미한다.

void

텅 비었다는 void. 함수에서 반환 값이 없을 때 사용하며, any의 반대라고도 볼 수 있다. 변수의 undefined, null과 비슷하지만 void는 변수에 사용할 수 없다.

never

발생할 수 없는 타입으로, 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입이다. 함수에서 return이 곧 종료를 의미했던 것을 생각해본다면, 반환되지 않는다는건 함수가 종료되지 않음을 의미한다. 예시로 무한 루프를 도는 함수에 never type을 작성할 수 있다는 것이다.