TypeScript 객체(Object)와 배열(Array)에서의 타입

객체(Object) 타입 정의

TypeScript에서 객체 타입은 객체의 형태를 정의하여 더욱 안전하고 명확한 코드를 작성할 수 있게 해줍니다. 객체 타입 정의는 주로 다음과 같은 방법을 사용합니다.

객체 타입 기본 정의

객체 타입을 정의하려면 각 속성과 그 타입을 명시합니다.

interface User {
  id: number;
  name: string;
  isActive: boolean;
}

const user: User = {
  id: 1,
  name: '홍길동',
  isActive: true,
};

선택적(Optional) 속성

?를 사용하여 객체의 속성을 선택적으로 만들 수 있습니다.

interface Product {
  id: number;
  name: string;
  description?: string; // 선택적 속성
}

const product1: Product = {
  id: 101,
  name: '키보드',
};

const product2: Product = {
  id: 102,
  name: '마우스',
  description: '무선 마우스',
};

인덱스 시그니처(Index Signature)

객체가 동적으로 속성을 가질 수 있다면 인덱스 시그니처를 사용할 수 있습니다.

interface StringKeyObject {
  [key: string]: string; // 모든 속성 값이 문자열이어야 함
}

const translations: StringKeyObject = {
  hello: '안녕하세요',
  goodbye: '안녕히 가세요',
};

---

배열(Array) 타입 정의

TypeScript에서 배열의 타입은 배열이 포함할 수 있는 요소의 타입을 정의하여 안정성을 보장합니다.

배열 타입 기본 정의

가장 기본적인 배열 타입 정의 방법은 타입[] 또는 Array<타입>을 사용하는 것입니다.

const numbers: number[] = [1, 2, 3, 4, 5];
const fruits: Array<string> = ['사과', '바나나', '포도'];

배열에 특정 타입만 허용

배열 요소의 타입을 명시적으로 지정하여 특정 타입만 포함하도록 제한할 수 있습니다.

interface Task {
  id: number;
  title: string;
  completed: boolean;
}

const tasks: Task[] = [
  { id: 1, title: '코딩하기', completed: false },
  { id: 2, title: '운동하기', completed: true },
];

---

튜플(Tuple)이란?

튜플은 고정된 수의 요소를 가지며, 각 요소의 타입이 다를 수 있는 배열입니다. 일반적인 배열과 다르게 요소의 수와 타입이 고정됩니다.

튜플 정의 및 사용

튜플은 배열과 비슷하지만 각 위치에 특정 타입이 정해져 있습니다.

const tuple: [string, number] = ['홍길동', 30];

튜플을 이용한 여러 값 반환

튜플은 함수에서 여러 값을 반환할 때 유용하게 사용됩니다.

function getUserInfo(): [string, number] {
  return ['홍길동', 30];
}

const [name, age] = getUserInfo();
console.log(name); // 홍길동
console.log(age);  // 30

---

읽기 전용(Readonly) 속성과 배열

readonly 키워드를 사용하면 객체의 속성이나 배열의 요소를 변경할 수 없게 할 수 있습니다.

객체의 읽기 전용 속성

readonly를 사용해 특정 속성을 수정하지 못하도록 설정합니다.

interface Profile {
  readonly id: number;
  name: string;
}

const profile: Profile = {
  id: 1,
  name: '김철수',
};

// profile.id = 2; // 오류 발생: 읽기 전용 속성은 수정할 수 없음
profile.name = '김영희';

읽기 전용 배열

ReadonlyArray 타입을 사용하면 배열을 읽기 전용으로 만들 수 있습니다.

const readonlyNumbers: ReadonlyArray<number> = [10, 20, 30];
// readonlyNumbers[0] = 40; // 오류 발생: 읽기 전용 배열은 수정할 수 없음

ReadonlyArray를 일반 배열로 변환하려면 as 키워드를 사용할 수 있습니다.

const mutableNumbers = readonlyNumbers as number[];
mutableNumbers[0] = 40;