Unexpected behavior of TypeScript optional object key functionality

Question

Unexpected behavior of TypeScript optional object key functionality

I am facing an issue with an object that has conditional keys. For example:

const headers: RequestHeaders = {};

if (...) {
  headers.foo = 'foo';
}

if (...) {
  headers.bar = 'bar';
}

As a newcomer to TS, I initially thought this would work:

type RequestHeaders = {
  foo?: string,
  bar?: string,
};

However, when passing this to fetch, the type definition for fetch's headers is { [key: string]: string }. This results in the error message:

Type 'RequestHeaders' is not assignable to type '{ [key: string]: string; }'.
  Property 'foo' is incompatible with index signature.
    Type 'string | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.

To make it work, I had to use

type RequestHeaders = { [key: string]: string };

. Is there a way to restrict the keys to a predefined set of strings?

javascript typescript

Answer 1

Answer №1

The fetch API has a restriction where it does not accept headers with keys that have undefined values. The compiler rejects optional types that can be either string | undefined for this reason.

To work around this issue, you can filter the headers to remove those with undefined values using a type predicate (is) as shown below:

const buildHeaders = (requestHeaders: RequestHeaders): HeadersInit =>
  Object.entries(requestHeaders).filter(
    (entry): entry is [string, string] => entry[1] !== undefined
  );

const headers: RequestHeaders = {};

type RequestHeaders = {
  foo?: string; // optional
  bar?: string; // optional
  baz: string; // required!
};

fetch("Some Data", {
  headers: buildHeaders(headers)
});

This method allows you to define a set of predefined strings for keys and specify whether each key is required or optional.

Answer 2

The fetch API has a restriction where it does not accept headers with keys that have undefined values. The compiler rejects optional types that can be either string | undefined for this reason.

To work around this issue, you can filter the headers to remove those with undefined values using a type predicate (is) as shown below:

const buildHeaders = (requestHeaders: RequestHeaders): HeadersInit =>
  Object.entries(requestHeaders).filter(
    (entry): entry is [string, string] => entry[1] !== undefined
  );

const headers: RequestHeaders = {};

type RequestHeaders = {
  foo?: string; // optional
  bar?: string; // optional
  baz: string; // required!
};

fetch("Some Data", {
  headers: buildHeaders(headers)
});

This method allows you to define a set of predefined strings for keys and specify whether each key is required or optional.

Answer 3

Answer №2

When using the fetch method, it is important that the header data is of a specific type.

type HeadersInit = Headers | string[][] | Record<string, string>;

In your scenario, I recommend defining the headers type as an alias of Record<string, string>. To configure keys (foo, bar), consider using fixed header keys. You can define all header keys in a type like this:

type HeaderKeys = 'foo' | 'bar';

type RequestHeaders = Record<HeaderKeys, string>; // alternatively: type RequestHeaders = Record<'foo' | 'bar', string>;

const headers: RequestHeaders = {} as RequestHeaders; // casting for enforcement

Answer 4

When using the fetch method, it is important that the header data is of a specific type.

type HeadersInit = Headers | string[][] | Record<string, string>;

In your scenario, I recommend defining the headers type as an alias of Record<string, string>. To configure keys (foo, bar), consider using fixed header keys. You can define all header keys in a type like this:

type HeaderKeys = 'foo' | 'bar';

type RequestHeaders = Record<HeaderKeys, string>; // alternatively: type RequestHeaders = Record<'foo' | 'bar', string>;

const headers: RequestHeaders = {} as RequestHeaders; // casting for enforcement

Answer 5

Answer №3

By using TypeScript, the compiler ensures your protection.
The RequestHeaders is accurately not a valid type of Record<string,string>.
It's beneficial that fetch() does not accept RequestHeaders, as certain headers could potentially cause errors in different fetch implementations.

/** 
 * The usage of question marks implies that the key
 * may not be present 
 * OR
 * The key is present with a string value
 * OR
 * The key is present and the value is undefined
 */
type RequestHeaders = {
  foo?: string,
  bar?: string,
};

/*
{ [k in 'foo' | 'bar']: string };
<=>
{ foo: string; bar: string; };

This isn't a workaround but a distinct type from RequestHeaders.
Substituting this for RequestHeaders will result in compilation errors.

/**
 * An implementation of fetch that throws an error if passed
 * an object containing properties with undefined values
 */
function fetch(requestHeaders: { [key: string]: string; }): string{
  return Object.keys(requestHeaders)
    .map(key => `${key} => ${requestHeaders[key].toUpperCase()}`)
    .join(" --- ")
    ;
}

/**
 * A function to transform a record with potentially undefined values
 * into a record where each key has a corresponding string value.
 */
const toStringRecord= (
  partialStringRecord: { [key: string]: string | undefined; }
): { [key: string]: string; }=> {

    const out: { [key: string]: string; } = {};

    Object.keys(partialStringRecord)
        .filter(key=> typeof partialStringRecord[key] === "string")
        .forEach(key=> out[key] = partialStringRecord[key]!)
    ;

    return out;

}

const headers: RequestHeaders = {};

const cond1= true;
const cond2= false;

{

    const requestHeaders: RequestHeaders= {};

    // You can make an assignment even when cond is false
    requestHeaders.foo = cond1 ? "foo" : undefined;

    requestHeaders.bar = cond2 ? "bar" : undefined;

    try{

      // Ensuring that fetch doesn't throw an error by restricting the input
      fetch(requestHeaders as any);

    }catch(error){

      console.log(error.message);
    }

    // Output is as expected, str === "foo => FOO"
    const str= fetch(
      toStringRecord(requestHeaders)
    );

    console.log(str);

}

Playground Link

Stackblitz link.

Please note that the Stackblitz environment is set up with permissive TypeScript configurations, so warnings may not appear as they do in the TypeScript playground.

Answer 6

By using TypeScript, the compiler ensures your protection.
The RequestHeaders is accurately not a valid type of Record<string,string>.
It's beneficial that fetch() does not accept RequestHeaders, as certain headers could potentially cause errors in different fetch implementations.

/** 
 * The usage of question marks implies that the key
 * may not be present 
 * OR
 * The key is present with a string value
 * OR
 * The key is present and the value is undefined
 */
type RequestHeaders = {
  foo?: string,
  bar?: string,
};

/*
{ [k in 'foo' | 'bar']: string };
<=>
{ foo: string; bar: string; };

This isn't a workaround but a distinct type from RequestHeaders.
Substituting this for RequestHeaders will result in compilation errors.

/**
 * An implementation of fetch that throws an error if passed
 * an object containing properties with undefined values
 */
function fetch(requestHeaders: { [key: string]: string; }): string{
  return Object.keys(requestHeaders)
    .map(key => `${key} => ${requestHeaders[key].toUpperCase()}`)
    .join(" --- ")
    ;
}

/**
 * A function to transform a record with potentially undefined values
 * into a record where each key has a corresponding string value.
 */
const toStringRecord= (
  partialStringRecord: { [key: string]: string | undefined; }
): { [key: string]: string; }=> {

    const out: { [key: string]: string; } = {};

    Object.keys(partialStringRecord)
        .filter(key=> typeof partialStringRecord[key] === "string")
        .forEach(key=> out[key] = partialStringRecord[key]!)
    ;

    return out;

}

const headers: RequestHeaders = {};

const cond1= true;
const cond2= false;

{

    const requestHeaders: RequestHeaders= {};

    // You can make an assignment even when cond is false
    requestHeaders.foo = cond1 ? "foo" : undefined;

    requestHeaders.bar = cond2 ? "bar" : undefined;

    try{

      // Ensuring that fetch doesn't throw an error by restricting the input
      fetch(requestHeaders as any);

    }catch(error){

      console.log(error.message);
    }

    // Output is as expected, str === "foo => FOO"
    const str= fetch(
      toStringRecord(requestHeaders)
    );

    console.log(str);

}

Playground Link

Stackblitz link.

Please note that the Stackblitz environment is set up with permissive TypeScript configurations, so warnings may not appear as they do in the TypeScript playground.

Answer 7

Answer №4

From my experience, transitioning from well-defined optional attributes to flexible but required key-value attributes requires manual casting. This can be achieved through various strategies:

Implementing a For Loop that Accepts Any Value

type RequestHeaders = {
  foo?: string,
  bar?: string,
};

type FetchResult = {
  [key: string]: string;
}

let headers: RequestHeaders = {};
const i = 2
if (i > 1) {
  headers.foo = 'foo-value';
}
if (i > 0) {
  headers.bar = 'bar-value';
}

const fetchResult: FetchResult = {};
for (let key in headers) {
  let value = headers[key] // <==== This will be of the type Any
  if (value) {
    fetchResult[key] = "" + value;
  }
}
console.log(fetchResult);

Setting Explicit Attributes

type RequestHeaders = {
  foo?: string,
  bar?: string,
};

type FetchResult = {
  [key: string]: string;
}

let headers: RequestHeaders = {};
const i = 2
if (i > 1) {
  headers.foo = 'foo-value';
}
if (i > 0) {
  headers.bar = 'bar-value';
}

const fetchResult: FetchResult = {};
if (headers.foo) {
  fetchResult['foo'] = headers.foo;
}
if (headers.bar) {
  fetchResult['bar'] = headers.bar;
}
console.log(fetchResult);

Using Nullable Casting

In line with the example provided by @ShaunLutin, leveraging the " as " command enables you to verify the result of the cast.

type RequestHeaders = {
  foo?: string,
  bar?: string,
};

type FetchResult = {
  [key: string]: string;
}

let headers: RequestHeaders = {};
const i = 2
if (i > 1) {
  headers.foo = 'foo-value';
}
if (i > 0) {
  headers.bar = 'bar-value';
}

let fetchResultNullable: FetchResult | undefined;
fetchResultNullable = headers as FetchResult;

console.log(fetchResultNullable);

You can view these examples on the Typescript Playground here

Answer 8

From my experience, transitioning from well-defined optional attributes to flexible but required key-value attributes requires manual casting. This can be achieved through various strategies:

Implementing a For Loop that Accepts Any Value

type RequestHeaders = {
  foo?: string,
  bar?: string,
};

type FetchResult = {
  [key: string]: string;
}

let headers: RequestHeaders = {};
const i = 2
if (i > 1) {
  headers.foo = 'foo-value';
}
if (i > 0) {
  headers.bar = 'bar-value';
}

const fetchResult: FetchResult = {};
for (let key in headers) {
  let value = headers[key] // <==== This will be of the type Any
  if (value) {
    fetchResult[key] = "" + value;
  }
}
console.log(fetchResult);

Setting Explicit Attributes

type RequestHeaders = {
  foo?: string,
  bar?: string,
};

type FetchResult = {
  [key: string]: string;
}

let headers: RequestHeaders = {};
const i = 2
if (i > 1) {
  headers.foo = 'foo-value';
}
if (i > 0) {
  headers.bar = 'bar-value';
}

const fetchResult: FetchResult = {};
if (headers.foo) {
  fetchResult['foo'] = headers.foo;
}
if (headers.bar) {
  fetchResult['bar'] = headers.bar;
}
console.log(fetchResult);

Using Nullable Casting

In line with the example provided by @ShaunLutin, leveraging the " as " command enables you to verify the result of the cast.

type RequestHeaders = {
  foo?: string,
  bar?: string,
};

type FetchResult = {
  [key: string]: string;
}

let headers: RequestHeaders = {};
const i = 2
if (i > 1) {
  headers.foo = 'foo-value';
}
if (i > 0) {
  headers.bar = 'bar-value';
}

let fetchResultNullable: FetchResult | undefined;
fetchResultNullable = headers as FetchResult;

console.log(fetchResultNullable);

You can view these examples on the Typescript Playground here

Answer 9

Answer №5

$ npm install -D @types/node @types/express

Simply add express extension

export interface CustomRequest extends express.Request {}

Answer 10

$ npm install -D @types/node @types/express

Simply add express extension

export interface CustomRequest extends express.Request {}

Unexpected behavior of TypeScript optional object key functionality

Answer №1

Answer №2

Answer №3

Answer №4

Implementing a For Loop that Accepts Any Value

Setting Explicit Attributes

Using Nullable Casting

Answer №5

Similar questions

Ways to customize decoration in Material UI TextField

Using ES6 to Compare and Remove Duplicates in an Array of Objects in JavaScript

Looking to showcase an uploaded image next to the upload button in Vue.js using Element.ui?

An issue arose when attempting to access a Mashape web service with JavaScript

Extracting specific attributes from an array to showcase on a single div

Creating custom designs for a HTML button using CSS

A guide on adding two fields together in AngularJS and displaying the output in a label

What is the best way to insert an object at a particular position within an array containing numerous nested objects?

Can someone confirm if a user has administrator privileges?

Detecting race conditions in React functional components promises

understanding the life cycle of components in Ionic

Utilizing the power of dojo/text! directly within a TypeScript class

Error message: Typescript and Styled-Component conflict: GlobalStylesProps does not share any properties with type { theme?: DefaultTheme | undefined; }

Looking to convert this single object into an array of objects within VueJS

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

Ways to boost an array index in JavaScript

What is the best way to update a JSON object in a file using the file system module in Node.js?

Transferring an array from PHP to jQuery through the use of AJAX

Tips for incorporating a plugin and utilizing an external module or file on RT

New button attribute incorporated in AJAX response automatically