Using TypeScript - Implementing Reduce function with a return type containing optional fields

Question

Using TypeScript - Implementing Reduce function with a return type containing optional fields

I am facing challenges in satisfying the TypeScript compiler with my code.

I define a type that includes only optional fields, for example:

interface UserData {
  email?: string;
  phone?: string;
  //...
}

and I have a reduction function that transforms some data into the format of UserData:

type FieldValue = string | number | boolean;

interface RawData {
 fieldName: string;
 fieldValue: FieldValue;
}

function formatField(value: FieldValue): string {
  // Format the value and return it as a string
  return `formatted-${value}`;
}

function format(rawDataList: RawData[]): UserData {
  return rawDataList.reduce<UserData>((userData, rawData) => {
      // Compiler error - Type 'string' is not assignable to type 'undefined'
      userData[rawData.fieldName as keyof UserData] = formatField(rawData.fieldValue);

      return userData;
    },
    {}
  );

Despite this, the field assignment consistently raises an issue stating

Type 'string' is not assignable to type 'undefined'

. What could be causing this problem?

typescript types reduce

Answer 1

Answer №1

rawData.fieldName is a string and it cannot serve as an index for UserData. Since UserData only allows the use of either email or phone.

You have the option to follow this approach:

interface UserData {
  email?: string;
  phone?: string;
  //...
}

type FieldValue = string | number | boolean;

interface RawData {
  fieldName: 'email' | 'phone'; // <--------------------- correction
  fieldValue: FieldValue;
}

function formatField(value: FieldValue): string {
  // Format the value and return it as a string
  return `formatted-${value}`;
}

function format(rawDataList: RawData[]): UserData {
  return rawDataList.reduce<UserData>((userData, rawData) => {
    userData[rawData.fieldName] = formatField(rawData.fieldValue);
    return userData;
  }, {})
}

Interactive Script

Answer 2

rawData.fieldName is a string and it cannot serve as an index for UserData. Since UserData only allows the use of either email or phone.

You have the option to follow this approach:

interface UserData {
  email?: string;
  phone?: string;
  //...
}

type FieldValue = string | number | boolean;

interface RawData {
  fieldName: 'email' | 'phone'; // <--------------------- correction
  fieldValue: FieldValue;
}

function formatField(value: FieldValue): string {
  // Format the value and return it as a string
  return `formatted-${value}`;
}

function format(rawDataList: RawData[]): UserData {
  return rawDataList.reduce<UserData>((userData, rawData) => {
    userData[rawData.fieldName] = formatField(rawData.fieldValue);
    return userData;
  }, {})
}

Interactive Script

Using TypeScript - Implementing Reduce function with a return type containing optional fields

Answer №1

Similar questions

Angular: Material Button that Adjusts According to Header Size

Navigating through different components within a single page

Is it possible to use Date as a key in a Typescript Map?

Storing data locally in Angular applications within the client-side environment

retrieve the checkbox formgroup using the Response API

Indeed, conditional validation is essential

Is there a way to make a peer dependency optional in a project?

Utilizing Typescript for Efficient Autocomplete in React with Google's API

Typescript has a knack for uncovering non-existent errors

Sequelize.js: Using the Model.build method will create a new empty object

Tips for iterating over an array that implements either of two interfaces in TypeScript

Where can I find the Cypress.json file for Angular integration with Cypress using Cucumber?

The error message "@graphql-eslint/eslint-plugin: problem with the "parserOptions.schema" configuration"

What to do when calling disabled() on a FormControlName causes all form fields to become invalid?

Creating an interface for React props

Frontend Will Not Be Able to Access Cloud Run Environment Variables when in Production

Validating Components that Adhere to an Interface

React Native is throwing an error message saying that the Component cannot be used as a JSX component. It mentions that the Type '{}' is not assignable to type 'ReactNode'

Building a custom Angular 6 pipe for generating a summary of a text snippet

The code breaks when the lodash version is updated to 4.17.4