javascript - filter in typescript got error of '(string | null)[]' is not assignable - Stack Overflow

admin管理员组

文章数量:1344975

I have an array of object, one of the property has a null value, I used filter to remove it, but typescript give me warning null is not assignable? since filter will never return null why typescript give me such an error?

const data = [
  {
    id: "123"
  },
  {
    id: "456"
  },
  {
    id: null
  }
];

const d2: string[] = data.map((d) => d.id).filter((o) => o);

console.log(d2);

demo =/src/index.ts:0-165

I have an array of object, one of the property has a null value, I used filter to remove it, but typescript give me warning null is not assignable? since filter will never return null why typescript give me such an error?

const data = [
  {
    id: "123"
  },
  {
    id: "456"
  },
  {
    id: null
  }
];

const d2: string[] = data.map((d) => d.id).filter((o) => o);

console.log(d2);

demo https://codesandbox.io/s/gallant-water-vio56?file=/src/index.ts:0-165

• javascript
• typescript

Share Improve this question Follow asked Dec 29, 2020 at 3:53 Nadiely JadeNadiely Jade 25533 silver badges1010 bronze badges 2

• TS isn't smart enough to recognize this. You'll have to use a type assertion. – CertainPerformance Commented Dec 29, 2020 at 3:54
• data is ing from api, why would I still need to declare type on d2 since null won't exist coz I've used filter? – Nadiely Jade Commented Dec 29, 2020 at 4:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

UPDATE SEPTEMBER 2024:

As of typescript 5.5, typescript is now able to infer type predicates.

However, the code in the question would still not work, and the reason for this is that the function might return an empty string. This possibility of an empty string means there's still a possibility you made a mistake, and so typescript keeps the error to force you to take a look.

You can either add an explicit return type (See the original answer below), or you can change the code so the empty string is no longer filtered out:

const d2: string[] = data.map((d) => d.id).filter((o) => o !== null);

Playground link

---

ORIGINAL ANSWER:

Typescript can't figure out that .filter((o) => o) will narrow the types of the array, not without some help. You can define a custom type guard and use that though. For example:

function notNull<T>(val: T | null): val is T {
    return val !== null;
}

const d2 = data.map((d) => d.id).filter(notNull); // d2 is a string[]

Or an inline version that only works with strings:

const d2 = data.map(d => d.id).filter((o): o is string => !!o);

Playground link

Using filter won't narrow down types for you. map transforms the data into an array of string | null data, and TypeScript doesn't know that d2 won't contain null after filtering (TypeScript isn't exceptionally bright, I guess…).

There are a couple of solutions — one of them is plicated, and the other is plicated (though not as plicated) pared to your original code.

Use type guarding

We can explicitly use types in the filter function itself so that TypeScript knows the output will not contain null:

const data = [
  { id: "123" },
  { id: "456" },
  { id: null }
];

// Type guard to filter out null values
const d2: string[] = data.map((d) => d.id).filter((o): o is string => o !== null);

console.log(d2);

Link to code

Cast the result, after filtering

We can also just cast the result after the filter is run instead of assigning the type beforehand. Just add as string[] to the end of your line:

const data = [
  {
    id: "123"
  },
  {
    id: "456"
  },
  {
    id: null
  }
];

const d2 = data.map((d) => d.id).filter((o) => o) as string[];

console.log(d2);

Note: It would be a good practice to include !== null as well, like this:

const d2 = data.map((d) => d.id).filter((o) => o !== null) as string[];

But it isn't necessary, and I was going for simplicity in the second solution…

Link to code

本文标签： javascriptfilter in typescript got error of 39(stringnull)39 is not assignableStack Overflow