[TypeScript] 문자열 key 검증하기

그저께 실무에서 고민했던 부분 정리...

 

type Flag = {
  name: string;
  age: number;
}

const myFlag: Flag = {
  name: "doringri",
  age: 10
};

const getValue = (key: string): number | null => {
  return myFlag[key] ?? null;
}

const val = getValue("age") as number ?? 20;

위의 코드는 as number로 타입을 단언해주고 있다.

하지만 타입 단언은 대부분의 경우에서 타입 안전성이 낮다.

getValue()에서 null을 체킹할 필요 없이 컴파일 단계에서부터 올바른 key인지 체크할 수 있다면 DX가 더 향상될 것이다.

 

const getValue = (key: keyof Flag, flags: Flag) => {
  return flags[key];
};

getValue()에 인수를 넘길 때, Flag의 필드명이 아니라면 IDE에서 에러가 표시된다.

 

const getValue = <K extends keyof Flag>(
  key: K,
  flags: Flag
) => {
  return flags[key];
};

만약 위와 같이 제네릭을 이용해 getValue()를 정의하면 flags[key]의 타입을 자동으로 추론해준다.

 

const isFlagKey = (key: string): key is keyof Flag => {
  return key in myFlag;
};

만약 인수가 사용자 입력값 등 동적으로 들어오는 값이라면 위와 같이 런타임 시점에서도 타입을 보장할 수 있도록 하는 검증 단계를 추가한다.

 

반환 타입인 key is keyof Flag는 boolean과 비슷하지만 차이가 있다.

반환값(key in myFlag)가 true라면 key가 Flag의 필드라는 것을 보장해주는 역할을 하기 때문이다.

 

if (isFlagKey(key)) {
  myFlag[key];  // 타입 에러가 나지 않음
}

만약 boolean을 리턴하면 타입을 보장할 수 없어 타입 에러가 나지만, 반환 타입을 변경하니 타입 에러가 나지 않는다.