학습 공간 개념 · 판단 · 실험

Frontend Performance Lab

TypeScript

객체의 모양에 이름 붙이기

type으로 프로퍼티의 이름과 값의 종류를 묶어 표현합니다.

이럴 때 필요해요

좌석 정보에 어떤 항목이 필요한지 코드로 공유합니다.

어떻게 동작하나요?

객체마다 어떤 프로퍼티가 있는지 반복해서 기억하기는 어렵습니다. type Seat처럼 객체의 모양에 이름을 붙이면 여러 함수에서 같은 구조를 사용할 수 있습니다.

아래 Seat는 id라는 문자열과 price라는 숫자가 필요합니다. 값에 이 타입을 붙이면 필요한 항목이 빠졌는지, 항목의 타입이 맞는지 검사할 수 있습니다.

타입 이름이 같다고 객체가 자동으로 만들어지는 것은 아닙니다. 객체 값은 별도로 작성해야 합니다. interface와의 차이, 선택적 프로퍼티는 기초 모양을 익힌 뒤 확장하세요.

코드 예제

동작을 설명하는 읽기 전용 예제입니다.

example.ts
type Seat = { id: string; price: number };
const seat: Seat = { id: "A1", price: 5000 };
console.log(seat.id);
typescript · 읽기 전용3줄

Seat는 구조를 설명하고 seat는 실제 값을 담습니다.

자주 헷갈리는 포인트

  • 타입 선언만으로 런타임 객체가 생기지 않습니다.
  • JSON 응답을 as Seat로 단언해도 실제 데이터 검사가 수행되지 않습니다.

내 말로 설명해 보기

Seat 선언만 작성하면 A1 좌석 객체가 만들어질까요?

생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.

예시 답변 확인

설명에 들어갈 핵심

  • type으로 프로퍼티의 이름과 값의 종류를 묶어 표현합니다.
  • Seat는 구조를 설명하고 seat는 실제 값을 담습니다.

예시 답변

아닙니다. Seat는 타입 정보이고 실제 값은 객체 리터럴이나 다른 코드로 만들어야 합니다.

문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.

함께 읽으면 좋은 개념

공식 참고 자료

← TypeScript