초보자를 위한 TypeScript 객체 간소화

객체는 JavaScript와 TypeScript의 기본적인 부분입니다. 이를 통해 관련 데이터와 함수를 그룹화하여 코드에서 실제 엔티티를 모델링할 수 있습니다. TypeScript는 JavaScript 객체에 유형 안전성을 강화하여 코드를 더 예측 가능하고 유지 관리하기 쉽게 만듭니다. 이 가이드는 초보자를 위한 TypeScript 객체의 개념을 단순화합니다.

TypeScript에서 객체란 무엇인가?

object는 키-값 쌍의 컬렉션으로, 키는 문자열(또는 심볼)이고 값은 모든 유형일 수 있습니다. TypeScript에서는 유형이나 인터페이스를 사용하여 객체의 모양을 정의하여 객체가 특정 구조를 따르도록 할 수 있습니다.

TypeScript에서 간단한 객체 정의하기

TypeScript에서 간단한 객체를 정의하는 것으로 시작해 보겠습니다. 이는 JavaScript에서 객체를 정의하는 방식과 비슷하지만 유형 안전성이라는 이점이 더 있습니다.

기본 객체 예제

TypeScript에서 간단한 객체를 정의하는 방법은 다음과 같습니다.

const person: { name: string; age: number } = {
  name: "Alice",
  age: 25
};

console.log(person.name); // Output: Alice
console.log(person.age);  // Output: 25

이 예에서 person 객체는 두 개의 속성을 갖습니다. name(유형 string) 및 age(유형 number)입니다. TypeScript는 객체가 이 구조를 준수하도록 보장합니다.

인터페이스를 사용하여 객체 구조 정의

interface는 TypeScript의 강력한 기능으로, 객체의 모양을 정의합니다. 인터페이스는 코드 내에서 계약을 정의하는 방법을 제공하여 객체가 특정 구조를 준수하도록 합니다.

인터페이스 정의

인터페이스를 사용하여 객체의 구조를 정의하는 방법은 다음과 같습니다.

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Bob",
  age: 30
};

console.log(person.name); // Output: Bob
console.log(person.age);  // Output: 30

이 예에서 Person 인터페이스는 person 객체의 구조를 정의합니다. person 변수는 이 구조를 준수해야 하며, 그렇지 않으면 TypeScript에서 오류가 발생합니다.

객체의 선택적 속성

TypeScript에서는 ? 심볼을 사용하여 객체에서 선택적 속성을 정의할 수 있습니다. 객체를 만들 때 선택적 속성을 생략할 수 있으므로 객체 구조를 정의하는 방법에 유연성이 제공됩니다.

선택적 속성이 있는 예

phoneNumber 속성이 선택 사항인 예는 다음과 같습니다.

interface Employee {
  name: string;
  age: number;
  phoneNumber?: string; // Optional property
}

const employee1: Employee = {
  name: "John",
  age: 28
};

const employee2: Employee = {
  name: "Doe",
  age: 32,
  phoneNumber: "123-456-7890"
};

console.log(employee1.phoneNumber); // Output: undefined
console.log(employee2.phoneNumber); // Output: 123-456-7890

이 예에서 employee1에는 phoneNumber 속성이 없지만 employee2에는 있습니다. 둘 다 Employee 인터페이스에 따라 유효합니다.

객체의 읽기 전용 속성

TypeScript를 사용하면 속성을 readonly로 만들어 객체가 생성된 후 수정되지 않도록 할 수 있습니다. 이는 변경 불가능한 객체를 만드는 데 유용합니다.

읽기 전용 속성이 있는 예

읽기 전용 속성을 정의하는 방법은 다음과 같습니다.

interface Car {
  readonly brand: string;
  model: string;
}

const car: Car = {
  brand: "Toyota",
  model: "Camry"
};

// car.brand = "Honda"; // Error: Cannot assign to 'brand' because it is a read-only property

car.model = "Corolla"; // Valid
console.log(car.model); // Output: Corolla

이 예에서 brand 속성은 readonly으로 표시됩니다. 이를 수정하려고 하면 컴파일 타임 오류가 발생합니다.

TypeScript의 중첩 객체

TypeScript 객체는 중첩될 수 있는데, 이는 객체가 다른 객체를 속성으로 포함할 수 있다는 것을 의미합니다. 이는 복잡한 데이터 구조에서 일반적입니다.

중첩된 객체의 예

중첩된 객체의 예는 다음과 같습니다.

interface Address {
  street: string;
  city: string;
  zipCode: string;
}

interface User {
  name: string;
  age: number;
  address: Address; // Nested object
}

const user: User = {
  name: "Emily",
  age: 27,
  address: {
    street: "123 Main St",
    city: "New York",
    zipCode: "10001"
  }
};

console.log(user.address.city); // Output: New York

이 예에서 User 인터페이스에는 중첩된 Address 개체가 있습니다. user 개체는 이 구조를 따르므로 중첩된 속성에 액세스할 수 있습니다.

결론

TypeScript의 객체는 유형 정의, 선택적 속성, 읽기 전용 속성 및 중첩 구조로 인해 일반 JavaScript 객체보다 더 강력하고 유연합니다. 인터페이스를 사용하여 객체를 정의하면 더 견고하고 오류 없는 코드를 만들 수 있습니다. 프로젝트에서 TypeScript 객체를 사용하여 유형 안전성과 구조화된 데이터의 모든 기능을 활용하세요.