[TypeScript] Type of Array, Union, Tuple and Enum

suno·2023년 1월 18일
post-thumbnail

개인적인 공부 내용을 정리한 글입니다.
정확한 정보는 공식 사이트에서 얻으시길 권장 드립니다.


Array

두가지 형태로 타입을 표시할 수 있다.

// 모든 원소가 boolean 타입인 배열
const bools1: boolean[] = [];
const bools2: Array<boolean> = [];

Multi-dimensional Array

다차원 배열의 타입을 지정할 수 있다.

// 모든 원소가 string 타입인 2차원 배열
const board: string[][] = [
  ['X', 'O', 'X'],
  ['X', 'O', 'X'],
  ['X', 'O', 'X'],
];

// 모든 원소가 number 타입인 3차원 배열
const demo: number[][][] = [[[1]]];

Union

여러 타입을 가질 수 있다.

let age: number | string = 21;
age = '23';

Union Alias

Alias 타입을 여러개 가질 수 있다.

type Point = {
  x: number;
  y: number;
};

type Loc = {
  lat: number;
  long: number;
};

let coordinates: Point | Loc = { x: 1, y: 34 };
coordinates = { lat: 1, long: 2 };

Type Narrowing

Union 타입을 사용하는 경우, 타입을 좁히는 작업이 필요하다.

(아래 함수에서 조건문 없이 parseFloat 또는 replace 메소드를 사용하면 에러가 발생한다.)

function calculateTax(price: number | string, tax: number) {
  if (typeof price === 'string') {
    price = parseFloat(price.replace('$', ''));
  }
  return price * tax;
}

Union Array

모든 원소가 두가지 타입 중 하나인 배열

const something: (number | string)[] = ['as', 12];

Literal

특정한 원소를 타입으로 가질 수 있다.

type DayOfWeek = 'Mon' | 'Tue' | 'Wed' | 'Thu' | 'Fri' |

Tuple

Tuple은 순서가 보장되는 고정 타입의 배열을 표현한다.

type HTTPResponse = [number, string];
const goodRes: HTTPResponse = [200, 'OK'];
goodRes[0] = '200' // 에러가 발생함

Tuple의 한계

Tuple은 JavaScript에 실제로 존재하지 않는 타입이고, TypeScript 백그라운드에서 실행된다.

따라서 Tuple이 생성된 이후에 배열의 요소를 추가하거나 삭제해도 오류가 발생하지 않는다.

// 에러가 발생하지 않음
goodRes.push(0);
goodRes.pop();

Enum

Enum은 명명된 상수의 집합이다.

값을 지정하지 않으면 각 원소의 인덱스가 값이 된다.

enum OrderStatus {
  PENDING, // 0
  SHIPPED, // 1
  DELIVERED, // 2
  RETURNED, // 3
}
const status = OrderStatus.DELIVERED; // 2

기본값을 지정할 수 있다.

첫 번째 요소에 기본값을 지정하면, 다음 요소는 1씩 증가한다.

enum alphabets {
  A = 10,
  B, // 11
  C, // 12
  D, // 13
}

Const Enum

기본적으로 enum 키워드로 선언된 enum은 JavaScript 런타임에도 존재한다. (즉시실행 함수로 감싸져 객체로 변환된다.)

const enum으로 선언된 enum은 컴파일 시점에 값이 결정되어 JavaScript 런타임에서 제거된다.

profile
Software Engineer 🍊

0개의 댓글