[TS] 타입 가드

• 타입스크립트에서 타입 좁히기는 변수 또는 표현식의 타입 범위를 더 작은 범위로 좁혀나가는 과정을 말한다. 타입 좁히기를 통해 더 정확하고 명시적인 타입 추론을 할 수 있게 되고, 복잡한 타입을 작은 범위로 축소하여 타입 안전성을 높일 수 있다.
• 타입 가드는 런타임에 조건문을 사용하여 타입을 검사하고 타입 범위를 좁혀주는 기능을 말한다.

typeof 연산자로 원시 타입 추론

• typeof 는 자바스크립트 타입 시스템만 대응할 수 있다. 자바스크립트 동작 방식으로 인해 null 과 배열 타입 등이 object 타입으로 판별되는 등 복잡한 타입을 검증하기에는 한계가 있다. 따라서 typeof 연산자는 주로 원시 타입을 좁히는 용도로 사용하는게 좋다.
• string, number, boolean, undefined, object, function, bigint, symbol 를 검사할 수 있다.

const replaceHyphen: (date: string | Date) => string | Date = (date) => {
  if (typeof date === "string") {
    return date.replace(/-/g, '/');
  }
 
  return date;
}

instanceof 연산자로 인스턴스화된 객체 타입 판별

• A instanceof B 형태로 사용하며 A에는 타입을 검사할 대상 변수, B에는 특정 객체의 생성자가 들어간다. A의 프로토타입 체인에 생성자 B가 존재하는지 검사하며 true/false 를 반환한다.
• instanceof 연산자는 인스턴스화된 객체 타입을 판별하는 타입 가드로 사용할 수 있다.

interface Range {
  start: Date;
  end: Date;
}
 
interface DatePickerProps {
  selectedDates?: Date | Range;
}
 
function convertToRange(selected?: Date | Range): Range | undefined {
  return selected instanceof Date
    ? { start: selected, end: selected } as Range
    : selected;
}
 
const DatePicker = ({ selectedDates }: DatePickerProps) => {
  convertToRange(selectedDates)
}

• 어떤 Element의 인스턴스인지 검사할 수도 있다.

const onKeyDown = (event: KeyboardEvent) => {
  if (event.target instanceof HTMLInputElement && event.key === 'Enter') {
    event.target.blur();
  }
}

in 연산자로 객체의 속성 여부 확인

• A in B 형태로 사용하는데 이름 그대로 A라는 속성이 B 객체에 존재하는지를 검사하여 true/false 를 반환한다. 프로토타입 체인으로 접근할 수 있는 속성이면 전부 true 이다.
• 주의할 점은 B 객체에 존재하는 A 속성에 undefined 를 할당한다고 해서 false 를 반환하지 않는다. delete 연산자를 사용하여 객체 내부에서 해당 속성을 제거해야만 false 를 반환한다.
• 객체로 이루어진 유니온 타입이 있을 때 in 연산자를 통해 분기 처리해줄 수 있다.

interface BasicNoticeDialogProps {
  noticeTitle: string;
  noticeBody: string;
}
 
interface NoticeDialogWithCookieProps extends BasicNoticeDialogProps {
  cookieKey: string;
  noForADay?: boolean;
  neverAgain?: boolean;
}
 
type NoticeDialogProps =
  | BasicNoticeDialogProps
  | NoticeDialogWithCookieProps;
 
const noticeDialog = (dialog: NoticeDialogProps) => {
  if ('cookieKey' in dialog) {
    return dialog.neverAgain;
  }
 
  return dialog.noticeTitle;
}

is 연산자로 사용자 정의 타입 가드 만들기

• 반환 타입이 타입 명제인 함수를 정의하여 타입 가드로 사용할 수 있다.
• 타입 명제는 A is B 형식으로 작성한다. A는 매개변수 이름이고 B는 타입이다. boolean 을 반환하면서 반환 타입을 타입 명제로 지정하게 되면 반환 값이 참일 때 A 매개변수의 타입을 B 타입으로 취급한다.
• 사용자 정의 타입 가드 함수를 통해 특정 타입으로 타입을 좁힐 수 있다.

const codeList = ['code1'];
const arr: Code[] = [];
 
type Code = `code${string}`;
 
const isCode = (x: string): x is Code => codeList.includes(x);
 
const fn = (code: string) => {
  if (isCode(code)) {
    arr.push(code);
  }
}