Creating a TypeScript map with conditional items

Question

Creating a TypeScript map with conditional items

I encountered an error while trying to add an item conditionally to a Map using .filter, receiving the message

Type 'null' is not assignable to type 'readonly [string, Book]'.(2769)

. This issue seems to arise only when adding items conditionally and using .filter. How can I successfully construct a Map with conditional items?

type Book = {
  author: string,
  publishedDate: string,
}

const random = Math.random();

const booksMap = new Map<string, Book>([
  ['1', {
    author: 'Test',
    publishedDate: '2024-04-05'
  }],
  random > 0.5 ? ['1', {
    author: 'Test2',
    publishedDate: '2023-03-06'
  }] : null,
].filter(Boolean))

Demo

I have also attempted to filter the tuples outside the Map before passing them into the Map, but this has not resolved the issue.

typescript filter

Answer 1

Answer №1

Using the filter function .filter(Boolean)) may lead to issues in TypeScript as it struggles to narrow down types when comparing against values like undefined and null.

An alternative approach is to use .filter(b => b !== null):

type Book = {
  author: string,
  publishedDate: string,
}

const random = Math.random();

const books: (null|[string, Book])[] = [
  ['1', {
    author: 'Test',
    publishedDate: '2024-04-05'
  }],
  random > 0.5 ? ['2', {
    author: 'Test2',
    publishedDate: '2023-03-06'
  }] : null,
];

// Narrowing down (null|[string, Book])[] to [string, Book][]
const filteredBooks = books.filter(b => b !== null); 

const booksMap = new Map<string, Book>(filteredBooks);

In TypeScript version 5.5, this approach works effectively thanks to the introduction of Inferred Type Predicates. For more information on Inferred Type Predicates, check out this link.

Answer 2

Using the filter function .filter(Boolean)) may lead to issues in TypeScript as it struggles to narrow down types when comparing against values like undefined and null.

An alternative approach is to use .filter(b => b !== null):

type Book = {
  author: string,
  publishedDate: string,
}

const random = Math.random();

const books: (null|[string, Book])[] = [
  ['1', {
    author: 'Test',
    publishedDate: '2024-04-05'
  }],
  random > 0.5 ? ['2', {
    author: 'Test2',
    publishedDate: '2023-03-06'
  }] : null,
];

// Narrowing down (null|[string, Book])[] to [string, Book][]
const filteredBooks = books.filter(b => b !== null); 

const booksMap = new Map<string, Book>(filteredBooks);

In TypeScript version 5.5, this approach works effectively thanks to the introduction of Inferred Type Predicates. For more information on Inferred Type Predicates, check out this link.

Creating a TypeScript map with conditional items

Answer №1

Similar questions

Make sure to always include a trailing comma when defining a single type parameter T. Here's an example: `<T,>`

How to effectively manage errors in TypeScript using RxJS?

How can I utilize identical cucumber steps for both mobile and web tests while evaluating the same functionality?

Guide on accessing an element from a predicate object in Typescript while using Angular

What is the proper syntax for specifying a specific field in a generic class?

Angular Form customizable field

I am interested in retrieving a particular item from the data() function in Firestore

Ways to implement distinct values for model and input field in Angular 5

Encountered an issue when attempting to include the "for" attribute to a label within an angular 2.0 template

Using Handlebars.js with Angular CLI versions 6 and above: A Step-by-Step Guide

Why are my class data types not aligning with JSON objects?

Transfer dynamically generated table data to the following page

When combining React with Typescript, you may encounter errors like: "The type 'never[]' cannot be assigned to the type 'StateProperties | (() => StateProperties)'. Make sure you are passing the correct argument types in

Learn how to implement React Redux using React Hooks and correctly use the useDispatch function while ensuring type-checking

Reduce the size of a container element without using jquery

Having difficulty transferring data between components using @Input syntax

What steps do I need to take in order to obtain the value for insertion into a form for editing, so that the record

Creating a cutting-edge object using Angular 4 class - The power of dynamism

Using Node.js with Typescript and RedisJSON allows for a powerful and efficient

Arrange an array of objects by making a nested API call in Angular