[TypeScript]타입스크립트 물음표(?), 선택적 프로퍼티, 옵셔널 체이닝

타입스크립트(TypeScript)는 타입에 엄격한 프로그래밍 언어이므로 객체 프로퍼티의 타입을 정의했으나 값을 할당하지 않는 경우 에러가 발생합니다.

 

이러한 경우 선택적 프로퍼티(Optional Properties) 문법을 사용하여 해결할 수 있습니다.

 

선택적 프로퍼티로 구현된 프로퍼티는 값을 할당하지 않아도 문제가 없습니다.

 

물음표(?)는 선택적 프로퍼티뿐만 아니라 옵셔널 체이닝(Optional Chaning)에도 사용 가능합니다.

 

프로퍼티가 null 또는 undefined인 경우 undefined를 반환하는 문법입니다.

 

이번 포스팅에서는 물음표(?)가 사용되는 선택적 프로퍼티(Optional Properties)와 옵셔널 체이닝(Optional Chaning)에 대해 정리하였습니다.

---

선택적 프로퍼티(Optional Properties)

아래 코드는 선택적 프로퍼티를 사용하지 않았을 경우 문제가 발생하는 코드입니다.

interface ICompanyInfo {
  name: string;
  chairman: string;
}

let obj: ICompanyInfo = {
  name: 'FaceBook'
};

ICompanyInfo라는 인터페이스를 구현하였으며, ICompanyInfo 타입의 객체 obj를 생성합니다.

 

하지만, ICompanyInfo 인터페이스에는 chairman이라는 프로퍼티가 존재하며, chairman 프로퍼티에 값을 할당하지 않았기 때문에 위 사진처럼 문제가 발생합니다.

 

이러한 경우 선택적 프로퍼티 문법을 사용하여 해결합니다.

interface ICompanyInfo {
  name: string;
  chairman?: string;
}

let obj: ICompanyInfo = {
  name: 'FaceBook'
};

chairman 프로퍼티명 뒤에 물음표(?)를 추가합니다. 그러면, ICompanyInfo 인터페이스를 타입으로 하는 객체를 생성할 때, chairman 프로퍼티의 값을 생략할 수 있습니다.

 

즉, 프로퍼티의 값이 필수가 아닌 경우 선택적 프로퍼티 문법을 사용하여 값을 생략할 수 있습니다.

반응형

---

옵셔널 체이닝(Optional Chaining)

옵셔널 체이닝은 프로퍼티의 타입이 null 또는 undefined가 올 수 있는 경우 사용됩니다.

interface ICompanyInfo {
  name: string | null | undefined;
}

let obj: ICompanyInfo = {
  name: "FaceBook"
};

console.log(obj.name.length);

ICompanyInfo 인터페이스의 name 프로퍼티의 타입을 string, null, undefined으로 정의하였습니다.

 

obj.name에 length 프로퍼티를 사용하는 경우 name 프로퍼티의 값이 unll 또는 undefined가 가능하다고 문제가 발생합니다.

 

이러한 경우 옵셔널 체이닝 문법을 사용하여 해결합니다.

interface ICompanyInfo {
  name: string | null | undefined;
}

let obj: ICompanyInfo = {
  name: "FaceBook"
};

console.log(obj.name?.length);

프로퍼티명 뒤에 물음표(?)를 추가합니다. 그러면, obj.name이 null 또는 undefined인데, length 프로퍼티를 호출하는 경우 undefined를 리턴합니다.

 

아래 코드는 name 프로퍼티의 값이 null인데, length 프로퍼티를 호출하는 경우입니다.

interface ICompanyInfo {
  name: string | null | undefined;
}

let obj: ICompanyInfo = {
  name: null
};

console.log(`obj.name?.length : ${obj.name?.length}`);

실행 결과

코드가 정상적으로 실행되었으며, obj.name이 null이므로 obj.name?.length는 undefined를 반환하였습니다.