옵셔널 체이닝은 JavaScript와 TypeScript에서 속성을 안전하게 접근하는 방법으로 널 또는 언디파인트 값의 속성을 연속적으로 접근할 때 유용합니다. 그러나 옵셔널 체이닝을 사용할 때 타입스크립트에서는 해당 속성이 존재하는지 여부를 확인하기 위해 타입 가드를 사용해야 합니다.

옵셔널 체이닝이란?

옵셔널 체이닝은 ?. 연산자를 사용하여 속성 또는 메소드를 연속적으로 안전하게 호출하는 방법입니다. 이 연산자는 해당 속성 또는 메소드가 정의되어 있을 때에만 호출하며, 그렇지 않은 경우에는 에러를 발생시키지 않고 undefined를 반환합니다.

const data = {
  user: {
    name: 'Jane',
    age: 30,
  },
};

const userName = data.user?.name; // "Jane"
const userAddress = data.user?.address; // undefined

타입 가드를 사용한 옵셔널 체이닝

위의 예제에서 data.user의 속성이 존재하지 않는 경우에는 userName과 userAddress의 값은 각각 이름과 주소 값을 갖게 됩니다. 그러나 만약 이 값들을 접근할 때 타입을 확신할 수 없는 경우, 타입스크립트에서는 타입 가드를 사용하여 이를 보장할 수 있습니다.

다음은 타입스크립트에서 in 연산자를 사용한 타입 가드의 예제입니다.

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

const data: {
  user?: User;
} = {};

function isUser(obj: any): obj is User {
  return 'name' in obj && 'age' in obj;
}

if (isUser(data.user)) {
  console.log(data.user.name); // 타입스크립트에서 data.user의 속성을 안전하게 접근할 수 있음
}

위의 예제에서 isUser 함수는 name과 age 속성이 obj에 존재하는지를 확인하고, obj is User 문법을 통해 타입 가드를 정의하고 있습니다.

결론

옵셔널 체이닝은 TypeScript에서 안전하게 객체 속성에 접근하는 방법으로, 타입 가드를 사용하여 해당 속성이 정의되어 있는지 여부를 확인할 수 있습니다. 이를 통해 더 안전하고 확실한 코드를 작성할 수 있습니다.