[데브코스] 타입스크립트: 객체 리터럴부터 클래스까지

객체 리터럴 타입

타입스크립트에서는 객체의 구조를 명확히 지정할 수 있으며, 이를 객체 리터럴 타입이라 한다. 객체가 가져야 할 속성과 그 타입을 명시함으로써 타입 안정성을 확보한다.

const user: { id: number; name: string } = {
  id: 1,
  name: "Alice",
};

필요 시 선택적 속성(?)이나 읽기 전용 속성(readonly)도 사용할 수 있다.

const config: { readonly port: number; debug?: boolean } = {
  port: 3000,
};

이 방식은 간단한 객체 구조를 일시적으로 정의할 때 유용하며, 반복 사용이 필요한 경우에는 별도의 타입 별칭이나 인터페이스로 분리하는 것이 좋다.

유니언 타입

유니언 타입은 하나의 값이 여러 타입 중 하나일 수 있음을 의미한다. | 연산자를 통해 정의하며, 서로 다른 타입 간 조건 분기 처리에 활용된다.

let status: "success" | "error" | "loading";
status = "success"; // OK
status = "failure"; // 오류

기본 타입 간에도 유니언을 적용할 수 있다.

let value: string | number;
value = "hello";
value = 42;

유니언 타입을 사용할 경우, 해당 값이 어떤 타입인지를 판단하여 안전하게 다루기 위한 타입 가드가 함께 사용된다.

타입 별칭

타입 별칭(type alias)은 type 키워드를 사용하여 복잡한 타입을 재사용 가능하도록 이름을 부여하는 기능이다. 유니언 타입, 객체 타입, 함수 타입 등 다양한 타입 형태에 사용할 수 있다.

type UserID = string | number;
let uid: UserID = "abc123";

객체 구조에도 활용할 수 있다.

type Product = {
  id: number;
  name: string;
  price: number;
};

별칭은 인터페이스와 유사한 역할을 하지만, 유니언 타입이나 튜플과 같이 더 폭넓은 타입 정의에 적합하다.

타입 가드

타입 가드는 런타임 시점에서 유니언 타입이나 any 타입의 구체적인 타입을 좁히기 위한 조건문이다. 일반적으로 typeof, instanceof, 사용자 정의 함수 등이 사용된다.

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

사용자 정의 타입 가드를 만들 수도 있다.

type Dog = { bark: () => void };
type Cat = { meow: () => void };

function isDog(animal: Dog | Cat): animal is Dog {
  return (animal as Dog).bark !== undefined;
}

이러한 방식은 유니언 타입 처리의 안정성과 가독성을 높이는 데 유용하다.

배열과 튜플

타입스크립트에서는 배열의 요소 타입을 명확히 지정할 수 있다. 일반 배열은 다음과 같이 선언한다.

let names: string[] = ["Alice", "Bob"];
let scores: Array<number> = [100, 95, 80];

튜플(tuple)은 고정된 길이와 각 인덱스에 명확한 타입을 가지는 배열이다. 다양한 데이터를 순서대로 묶을 때 유용하다.

let userInfo: [number, string, boolean] = [1, "Alice", true];

튜플은 인덱스 기반 접근 시 자동으로 해당 타입이 추론되므로, 데이터 포맷이 고정된 경우 사용을 권장한다.

클래스와 객체 생성

타입스크립트의 클래스는 객체지향 프로그래밍을 위한 문법을 지원하며, 생성자(constructor)를 통해 초기화를 수행한다.

class User {
  id: number;
  name: string;

  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}`;
  }
}

const user = new User(1, "Alice");

생성자를 통해 속성을 초기화하고, 메서드를 통해 객체의 행위를 정의할 수 있다.

접근 지정자 (public, private, protected)

타입스크립트는 클래스 멤버에 접근 제어자를 제공한다. public은 어디서나 접근 가능하고, private는 클래스 내부에서만 접근 가능하다. protected는 해당 클래스와 서브 클래스에서만 접근할 수 있다.

class Account {
  public owner: string;
  private balance: number;

  constructor(owner: string, balance: number) {
    this.owner = owner;
    this.balance = balance;
  }

  public getBalance(): number {
    return this.balance;
  }
}

접근 지정자는 객체의 캡슐화를 구현하고, 외부로부터의 의도치 않은 접근을 방지하는 데 유용하다.

Getter와 Setter

타입스크립트는 get과 set 키워드를 통해 프로퍼티 접근자를 정의할 수 있다. 내부 속성에 대한 제어된 접근을 제공하며, 속성처럼 호출할 수 있다.

class Temperature {
  private _celsius: number;

  constructor(celsius: number) {
    this._celsius = celsius;
  }

  get fahrenheit(): number {
    return this._celsius * 1.8 + 32;
  }

  set fahrenheit(value: number) {
    this._celsius = (value - 32) / 1.8;
  }
}

const temp = new Temperature(0);
console.log(temp.fahrenheit); // 32
temp.fahrenheit = 50;

getter/setter는 속성의 유효성 검사, 포맷 변환, 캡슐화된 데이터 접근 등을 구현할 때 유용하다.