타입스크립트의 객체 타입

1. 객체 타입 지정(명시)

• 객체 타입 정의 시 {}(중괄호)를 사용하여 표현
• 객체 타입의 경우 타입끼리의 구분 시 세미콜론(;) 사용을 권장!

객체 타입 정의와 객체의 차이점

• 콜론의 우변에는 값 대신 해당 속성값의 타입을 명시(지정)
• 구분자로 콤마(,) 뿐만 아니라 세미콜론(;)도 사용 가능

객체 타입 명시

• 변수 명 뒤에 콜론을 사용하여 명시
• 콜론 뒤 중괄호를 사용
• 객체 타입 예시

const user: { name: string; age: number } = {
  name: '테드',
  age: 50,
  height: 169, // Error - 객체의 경우 타입으로 명시되지 않은 속성은 정의할 수 없음
};

+) 객체의 경우 타입으로 명시된 값은 반드시 정의되어 있어야 함! 만약 위 코드에서 age를 주석 처리를 한다면 아래와 같은 에러가 발생

 

2. 객체의 선택 속성(선택적 프로퍼티)

• 속성명 뒤에 물음표(?)를 붙여 해당 속성이 존재하지 않을 수도 있음을 표현
• 객체 타입에 지정된 형식 그대로를 객체로 작성
  >>> BUT! 선택적으로 값을 생략하고 싶은 경우 선택적 프로퍼티를 사용

const nameAndBirthday: {
  name: string;
  birthday?: number;
} = {
  name: '테드',
  birthday: 818,
};

 

3. 읽기 전용 속성

• 속성명 앞에 readonly 키워드를 사용하여 해당 속성의 재할당을 금지
• 해당 키워드가 붙은 속성은 const 키워드를 이용한 변수 정의와 유사
• 객체의 속성값에 접근하는 방법 - 점 연산자를 사용하여 접근
• readonly 키워드 작성 시 속성명과 띄어쓰기 작성 필수

const readonlyName: {
  readonly name: string;
  age: number;
} = {
  name: '테드',
  age: 30,
};

readonlyName.name = '테드 블루'; // Error - 에러 메세지는 아래 사진 참고
console.log(readonlyName.name);

readonlyName.age = 29;
console.log(readonlyName.age);

 

4. 연습문제

문제1

다음 객체 타입을 정의하고, 해당 타입을 가진 객체를 하나 생성 person: 객체는 name(문자열), age(숫자), hobby(문자열, 선택적) 속성을 가져야 한다.

정답

const person: { name: string; age: number; hobby?: string } = {
  name: '테드',
  age: 30,
  hobby: '코딩',
};

 

문제2

readonly를 사용하여 car 객체 타입을 정의하고, model(읽기 전용, 문자열)과 year(숫자) 속성을 포함하는 객체를 생성 model 속성에 다른 값을 할당하려고 할 때 발생하는 오류를 설명

정답

const car: { readonly model: string; year: number } = {
  model: 'Sonata',
  year: 2024,
};
car.model = 'Hyundai'; // Error - model은 readonly 속성임

 

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/d23d0a17ca1e4c2abc8fcfa4dee68d95?pvs=4

타입스크립트의 객체 타입 | Notion