Javascript에는 없는 Typescript만의 Type

Typescript에는 Javascript에서는 사용할 수 없는 Type들이 존재한다. 이런 타입들은 물론 컴파일을 하면서 Javascript에서는 바뀌지만, .ts 파일에서는 코드를 작성할 때 에러에 대해 확실하게 알려준다.

이러한 점이 매우 유용하게 때문에 개발자들 사이에서 사용하지 않을까 생각한다. 그럼 Typescript에서만 사용되는 타입들을 보면,

1. Tuple : 배열에서 각 요소의 타입과 순서가 고정된 형태
2. Enum : 관련된 값들의 집합
3. Any : 어떤 타입이든 될 수 있는 JavaScript의 동적 특성

---

4. Union : 여러 타입 중 하나가 될 수 있음
5. Literal : 변수가 특정 리터럴에 대해 동일해야 함
6. 사용자 정의 타입 : type 키워드를 사용해 타입에 별칭을 부여

이러한 종류가 있고 지금부터 간단한 예를 사용하여 살펴보려 한다.

Tuple

배열에서 각 요소의 타입과 순서가 고정된 형태를 나타낸다. 예를 들어, [string, number] 형식의 튜플은 첫 번째 요소가 문자열이고 두 번째 요소가 숫자인 배열을 의미한다

예시

let x: [string, number];

x = ["hello", 10]; // OK
x = [10, "hello"]; // Error, 순서 및 타입이 일치하지 않음.

이러한 형태로 사용하고, 번호와 이름과 같은 형태로 주로 사용된다.

Enum

관련된 값들의 집합을 의미한다. Enum을 사용하면, 코드가 더 읽기 쉽고 안정적으로 만들 수 있다.

예시

enum Color {Red, Green, Blue}
let c: Color = Color.Green; // 1

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green; // 2

enum 타입의 Color가 두 가지가 있는데, 첫 번째 같은 경우는 Red = 0, Green = 1, Blue = 2 라는 값을 가지고 있다. 두 번째는 값을 수동으로도 설정 할 수 있음을 나타낸다.

Any

어떤 타입이든 될 수 있는 JavaScript의 동적 특성을 포함한다. 그러나 Any 타입을 너무 자주 사용하게 될 경우 Typescript만의 특성을 잃어버릴 수 있기 때문에 무분별하게 사용하는 것은 좋지 않다.

예시

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 이렇게 사용되어도 상관없음

notSure 변수는 any 타입으로 지정되었기 때문에 number, string, boolean 타입이 들어와도 상관없이 오류가 나지 않는다. 이는 Javascript에서도 똑같음을 알고 있어야 한다.

Union

여러 타입 중 하나가 될 수 있음을 나타낸다. 이를 '|' 문자로 표시하고, 'number | string' 타입은 'number 혹은 string'이 될 수 있음을 의미한다.

예시

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}

printId(101); // Your ID is: 101
printId("202"); // Your ID is: 202

함수 printId는 id를 매개변수로 받고 있는데, 이 id의 타입이 number 또는 string으로 들어와도 괜찮다는 의미이다. 이러면 오류가 나지 않고 값을 정확히 인식할 수 있다.

Literal

변수가 특정 리터럴에 대해 동일해야 함을 나타낸다. 이것은 숫자 리터럴 타입, 문자열 리터럴 타입, 불리언 리터럴 타입 등을 포함할 수 있다.

예시

type Easing = "ease-in" | "ease-out" | "ease-in-out";

let animation: Easing;

animation = "ease-in"; // OK
animation = "ease-out"; // OK
animation = "ease-in-out"; // OK
animation = "ease"; // Error: "ease"는 "ease-in" | "ease-out" | "ease-in-out" 중 하나가 아님.

이런 식으로 css의 애니메이션에 대해 동작에 대한 타입을 설정할 수도 있다.

사용자 정의 타입

type 키워드를 사용해 타입에 별칭을 부여할 수 있다. 이는 객체, 배열, 조합 타입, 기본 타입 등에 모두 사용된다.

예시

type StringOrNumber = string | number;

let sample: StringOrNumber;

sample = 123;    // OK
sample = "123";  // OK
sample = true;   // Error

StringOrNumber 라는 타입을 만들었고 이 타입은 string 또는 number 타입만 가능하다. 그래서 sample 변수는 StringOrNumber 타입을 갖고 boolean 타입이 들어오면 Error가 나온다.

정리하기

이번에는 Typescript만의 Type 종류에 대해 공부를 했다. Tuple, Enum 등의 새로운 타입에 대해 배웠지만, 어떨 때 사용하면 좋을 지를 이해하고 있으면 다음에 코드를 짤 때 유용하게 사용할 수 있을 거 같다. 나머지 타입 같은 경우에는 활용을 잘하면 더 깔끔한 코드를 만들 수 있기 때문에 틈틈히 사용해봐야겠다