TypeScript Array filter 타입 좁히기

TypeScript에서 배열의 .filter() 메서드는 타입을 필터링하지 않는다.

복사
interface Bird {
  type: "bird";
  flyingSpeed: number;
}

interface Fish {
  type: "fish";
  swimmingSpeed: number;
}

type Animal = Bird | Fish;

const animals: Animal[] = [
  { type: "bird", flyingSpeed: 10 },
  { type: "fish", swimmingSpeed: 15 },
];

const isBirdWithoutTypePredicate = (animal: Animal) => animal.type === "bird";
const isBird = (animal: Animal): animal is Bird => animal.type === "bird";

const birds1 = animals.filter(isBirdWithoutTypePredicate);
const birds2 = animals.filter(isBird);
const birds3 = animals.filter((animal) => isBird(animal));

• birds1의 경우 타입 가드 함수를 사용하지 않아 Bird[]가 아닌 Animal[]로 추론되는 것을 확인할 수 있다.

• birds2의 경우 타입 가드 함수를 사용하여 Bird[]로 추론되는 것을 확인할 수 있다.

• birds3의 경우 화살표 함수 내에서 타입 가드 함수를 사용하지만, 화살표 함수 자체는 타입 가드 함수가 아니므로 Animal[]로 추론되는 것을 확인할 수 있다.

.filter(Boolean)의 경우

복사
const array = ["item1", "item2", null, undefined];

const isNonNullable = <T extends unknown>(v: T): v is NonNullable<T> => Boolean(v);

const filteredArray = array.filter(isNonNullable);