코딩하는라민

[TypeScript] 객체의 선택적 속성(Optional Properties, 옵셔널 프로퍼티) 본문

Core/TypeScript

[TypeScript] 객체의 선택적 속성(Optional Properties, 옵셔널 프로퍼티)

코딩하는라민 2023. 5. 30. 23:46
728x90
반응형

[TypeScript] 객체의 선택적 속성(Optional Properties, 옵셔널 프로퍼티)

 

 

📌 객체의 선택적 속성(Optional Properties)

선택적 속성은 인터페이스나 타입 정의에서 특정 속성이 필수적으로 존재하지 않아도 되는 속성을 의미한다. 즉 해당 속성이 있을 수도 있고 없을 수도 있는 경우에 사용할 수 있다.

이렇게 선택적 속성을 정의하기 위해 속성 이름 뒤에 물음표(?)를 추가할 수 있다.

type Person = {
  name: string;
  age?: number;
}

// Ok
const me: Person = {
  name: "ramin",
}

// Ok
const you: Person = {
  name: "you",
  age: 27,
}

Person 타입은 name 은 필수 속성이지만 age 는 선택적이다. 따라서 Person 타입의 객체를 생성할 때 name 은 반드시 포함되어야 하지만 age 속성은 생략할 수 있다.

이렇게 선택적 속성은 객체의 일부 속성이 필요하지 않은 경우 유용하게 사용될 수 있다!

 

📌 undefined 를 포함한 유니언 타입

위에서 언급한 선택적 속성과 undefined 를 포함한 유니언 타입은 확실히 다르다.

유니언 타입의 경우에는 타입이 반드시 존재해야 하지만 선택적 속성인 ? 는 존재하지 않아도 된다.

type Person = {
    name: string | undefined;
    age?: number;
};

// Ok
const hasName: Person = {
    name: undefined,
};

// Error
const hasNotName: Person = {};

 

📌 함수의 선택적 매개변수

함수 정의에서 매개변수를 선언할 때 일부 매개변수를 생략할 수 있다.

함수를 호출할 때 선택적 매개변수를 제공하지 않으면 해당 매개변수는 undefined로 설정된다.

function sayHi(name: string, age?: number) {
  console.log(`Hi, ${name}!`);
  if (age) {
    console.log(`You are ${age} years old.`);
  }
}

sayHi('ramin'); // 선택적 매개변수를 생략하여 호출
sayHi('ramin', 25); // 선택적 매개변수를 포함하여 호출

 

 

 


참고 : 참고 : 러닝 타입스크립트를 읽고, ChatGPT의 도움을 받아 학습한 내용을 간단하게 정리한 내용입니다.
잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.

 

728x90
반응형