frontend - Typescript-fel ts(2769) i arrayens filterfunktion när det är i en if-sats som tidigare kontrollerar typ

Jag skulle vilja veta varför TypeScript klagar på att egenskapen moveInDate möjligen är string | undefined när den är inbäddad i ett if-block som kontrollerar om egenskapen är sanningsenlig eller inte. I koden nedan kan du se att när man använder console.log är typen string, men när man loopar igenom en array med .filter-funktionen läses den som string | undefined.

Jag vet att det finns flera sätt att komma runt detta, t.ex. new Date(filters.moveInDate!); eller new Date(filters.moveInDate as string);. Även genom att definiera en ny variabel const date=filters.moveInDate ovanför .filter-blocket och sedan använda den inuti .filter som return new Date(date). Men jag vill förstå varför detta fel uppstår från början?

Koden i fråga

export interface IStateFilters {
  moveInDate?: string;
}

const arr = [1, 2, 3];

export const filter = (filters: IStateFilters) => {
  if (filters.moveInDate) {
    console.log(filters.moveInDate); // <- it is string over here

    return arr.filter((apt) => {
      return new Date(filters.moveInDate); // why is it string | undefined here?
    });
  }

  return arr;
};

Länk till sandlåda

Svar #1

Det verkar som att TypeScript tappar typförminskningen när du använder filter:

export interface IStateFilters {
  moveInDate?: string;
}

const arr = [1, 2, 3];

export const filter = (filters: IStateFilters) => {
  if (typeof filters.moveInDate === 'undefined') return arr;
  const moveIndate: string = filters.moveInDate;
  return arr.filter((apt: number) => new Date(moveIndate)); // just string now
};

Möjligen kan detta hjälpa till att besvara det mer:

TypeScript: Varför kan inte min filtermetod begränsa typen och ta bort undefined och false från arrayen

https://github.com/microsoft/TypeScript/issues/16069