Type

📌 타입이 중요한 이유

input → operation → output

순으로 프로그래밍이 진행되는데, 인풋에서 operation으로 넘어갈때 데이터를 임시로 담아두는 곳을 보통 변수라고 한다.

타입이 없다면 오퍼레이션 과정에서 어떤 데이터가 들어가서 어떤 데이터가 반환되는지 유추할 수 없는 반면에 타입이 주어진다면 어떤 데이터가 변수로 주어지고 기대되는 반환 값을 유추 할 수 있고, 만약 잘못된 타입이 올 경우 컴파일 단계에서 에러를 발생시켜서 예상치 않은 에러를 방지할 수 있다. 이 덕분에 비교적 안정적인 프로그래밍이 가능하다.

파일을 작성할때 모듈을 설정하지 않고 코드를 작성해 나갈때 변수들이 글로벌 스코프에 적용된다.

그래서 컬리 브라켓으로 감싸줘서 로컬로 사용해주는 것이 필요하다.

타입스크립트에서 구버전 호환 고려하겠답시고 var를 사용하지 않는다.

자바스크립트로 변환할때 자바스크립트 버전을 낮춘다면 알아서 변환해주기에 const, let을 사용한다.

📌 기본 타입

number, string, boolean

타입스크립트에서 변수를 선언할때 변수명:자료형 식으로 변수를 선언해준다.

만약 타입을 넘버로 정의한 변수에 문자열을 작성한다면?

오류가 발생한다.

undefined, null

undefined 와 null 역시 사용할 수 있다.

다만 해당 자료형으로 타입을 지정해버리면 변수를 사용하는 의미가 없기 때문에

let name:undefined; 이런 식으로는 사용하지 않고 버티컬 바를 이용해서 number 나 string 이거나 undefined 이거나 와 같은 방식으로 다음과 같이 사용한다.

이걸 함수에도 사용할 수 있는데

다음과 같은 방식으로 함수가 반환하는 값을 타입으로 지정해줄 수 있다.

---

이런 원시 자료형이 오는 경우도 있고 object, unknown, any, void, never 등이 올 수 있다.

object

object 같은 경우는 원시 자료형을 제외한 배열과 객체같은 참조 자료형을 받을 수 있는 타입이다.

unknown, any

이제 unknown 부터 조금 생소할 수 있는데 unknown 같은 경우는 자바스크립트 라이브러리를 사용할때 등, 어떤 자료형이 올지 모를때 사용하게 되고, any 같은 경우는 무슨 자료형이 와도 괜찮을때 사용하게 된다.

다만 이와 같은 타입을 사용하게 되면 타입스크립트를 사용하는 의미가 퇴색되니 사용을 최대한 지양하는 편이 좋다.

void, never

void 같은 경우는 값을 따로 반환하지 않는 함수(반환값이 undefined 일때)의 경우 반환값을 void로 설정해준다.
void 는 생략할 수 있으며 함수 내에서 return이 없거나, 있더라도 값이 없는 경우 자동으로 설정된다.

never 같은 경우는 어떤 함수가 undefined조차 반환하지 않을때 사용한다.

1번 같은 경우는 에러를 던지는 것으로 함수가 리턴도 되지 않고 끝나게 되지만

2번 같은 경우는 리턴이 적혀있지만 않을 뿐, undefined 를 반환하고 있기에 never가 아닌 void가 와야 맞다.

에러가 발생하는 모습.

object

오브젝트 타입 역시 여러 객체 자료형이 올 수 있기에 구체적으로 설정해주는 것이 좋으며, object 타입은 사용을 지양하는 것이 좋다.

---

📌 함수에서의 타입

반환 값을 원시 값으로 받는 함수의 경우는 위와 같이 작성할 수 있다.

각 매개변수의 타입을 지정해주고, 그 옆에 반환 값으로 어떤 타입이 올지 설정하는 방식이다.

만약 Promise 객체를 반환 받는다면 어떨까 ?

매개변수의 타입을 지정해주는 것 까지는 결이 같지만, Promise 객체의 경우는 해당 Promise 객체가 어떤 값을 반환하는지까지 지정해줄 수 있는데 이때 부등호를 괄호로 사용해 반환되는 값의 타입을 지정해줄 수 있다.

Optional parameter

함수의 매개변수에 해당 매개변수가 들어올 수도 있고 없을 수도 있다면 ? 를 사용하는 방법이 있다.

이와 별개로

위와 같이 | 연산자를 사용할 수도 있지만, 이 경우 값이 없을 경우 해당 매개변수를 비워놓으면 안돼고, 자리에 undefined 를 표기해줘야 함으로 ? 연산자를 사용하는 것이 좋다.

Default parameter

자바스크립트의 그것과 같이 타입스크립트에서도 사용 가능하다.

Rest parameter

이 역시 자바스크립트에서 사용하던 것 그대로 사용가능 하나, 타입 표기를 맞춰서 잘 해줘야한다.

프로미스 객체를 표기할 때 처럼 Array<number> 로 설정해줘도 되지만 number[] 로 설정해줘도 된다.

📌 배열에서의 타입

위에서도 잠시 언급했지만 배열은 두가지로 타입을 설정해줄 수 있다.

이 두방식은 거의 유사하지만 한가지 차이가 있는데, 바로 readonly 설정을 해줄때이다.

객체 자료형을 사용할때 이 객체가 변경되면 안될때가 있는데, 이때 읽기 전용으로 만드는 readonly 설정을 해줄 수 있다.

다만 Array<number>와 같은 방법으로 타입을 설정한다면 readonly 속성을 설정해줄 수 없고, 이로 인해 코드 통일성 및 가독성을 위해 number[] 와 같은 방식으로 선언해주는 것이 좋다.

위와 같이 에러가 발생한다.

Tuple

튜플 역시도 배열의 타입을 설정해줄 때 사용한다.

다만 배열은 한 배열 내 요소로 다른 자료형을 가질 때가 있는데 number[] 와 같은 방식은 사용할 수 없다.

이런 식으로 사용할 수 있지만, 튜플 내 몇 번째 요소가 무슨 자료형인지 가독성이 좋지 않기 때문에 interface, type alias, class 로 대체하는 것이 권장된다.

다만 구조분해할당을 한번 더 사용해 준다면 보다 간편하게 사용할 수는 있으며 리액트의 useState 역시 같은 방식으로 구현되어 있다.

📌 Type alias

타입 얼라이어스는 쉽게 커스텀 타입이라고 생각하면 편하다.

위와 같이 사용할 수 있는데 이건 값 하나에 이렇게 설정하는 것 보다 객체에 사용하는 경우가 많다.

다음과 같이 타입을 지정해줄 수 있는데, 이렇게 객체를 타입으로 지정하는 것은 객체의 키값을 설정해주고 그 키값의 자료형을 지정해 줄 수 있다.

다만 이렇게 사용하면 타입 얼라이어스로 사전에 지정되지 않은 키값은 사용할 수 없다.

타입 얼라이어스에서 제일 앞 글자를 대문자로 설정한 것을 볼 수 있는데, 이는 오류를 발생시키지는 않지만 구별시켜주기 위해 대문자로 작성했다.

String Literal Types

타입 얼라이언스를 사용할때, 우리가 흔히 알고있는 string, number 와 같은 자료형 말고 문자열이 올 수 있는데 이렇게 사용할 경우 해당 타입을 사용한 변수는 사전에 지정한 문자열만 사용할 수 있다.

이건 따로 이것만 사용하지는 않고 후술할 Union에서 주로 사용한다.

📌 Union Types

유니언은 or 연산자와 같다.

타입에 들어올 값을 미리 지정하고, 그 값만 받을 수 있게 처리하는 것이다.

만약 사전에 지정하지 않은 값이 온다면 에러가 발생하게 된다.

이 값에 대해서는 모든 자료형이 값으로 올 수 있다.

또한 타입 얼라이언스로 지정한 타입 역시도 유니언 타입으로 묶을 수 있다.

Discriminated

위와 같은 경우 자바스크립트의 경우엔 에러 없이 처리될테지만, 타입스크립트의 경우 이 시점에서 state가 SuccessState인지 FailState인지 알 수 없기 때문에 에러가 발생한다. 타입 얼라이언스로 타입을 지정했을 경우 지정한 타입을 지정한 키 값이 있어야하고 지정하지 않은 키 값은 있으면 안되기 때문이다.

이걸 해결하는 방법이 두가지 있다.

첫번째는 state안에 둘 중 한가지에만 있는 키 값이 있는지 in 연산자로 확인하는 방법이다.

이럴 경우 정상적으로 분기된다.

하지만 이 방법은 권장되지 않고, 애초에 타입 얼라이어스로 타입을 지정해줄때 이 두개의 타입 얼라이어스에 공통된 요소를 지정하고 그 값에 따라서 분기를 해주는 방법이 있다.

이 방법을 discriminate라고 한다.

이렇게 공통된 result 키를 만들고 이 키에 따라서 분기되게 설정 할 수 있다.

📌 Interaction Types

유니언 타입이 OR 이었다면 인터렉션은 AND라고 할 수 있으며 기호는 &로 사용한다.

다음과 같이 지정되어 있을때 당연스럽게도 Person임과 동시에 Worker여야 하기에 사람이기만 한 dev는 값이 될 수 없다.

이 함수의 값을 다음과 같이 변경하면 Worker 타입의 조건도 충족하기에 에러가 발생하지 않는다.