Utilizing the index of a generic type within TypeScript

Question

Utilizing the index of a generic type within TypeScript

I am attempting to design generic message types that become increasingly specific, with the most precise type being inferred during the function call or class creation.

Consider the following code snippet:

type MessageHeaderType = 'REQUEST'|'RESPONSE'|'UPDATE'|'ERROR'|'EVENT'

type UnknownRecord = object

interface Message<MessageBody = UnknownRecord> {

  header: {
    id?: string
    type: MessageHeaderType
  },
  body: MessageBody

}

interface MessageUpdate<MessageBody = MessageUpdateBody> extends Message<MessageBody> {

  header: {
    id: string
    type: 'UPDATE'
  }
}

interface MessageUpdateBody {

  code: string
  data?: UnknownRecord

}

This setup works smoothly and allows for easy creation of a MessageUpdate:

const ExampleMessageUpdate: MessageUpdate = {

  header: {
    id: '123',
    type: 'UPDATE'
  },
  body: {
    code: 'SOME_UPDATE',
    data: {
      foo: 'bar'
    }
  }
} // <== All good!

The issue arises when giving users the ability to generate their custom message update body "on the fly" (still at compile-time, obviously!). The code below does not permit indexing the generically passed implementation in a specific MessageUpdate type:

function createMessage<ThisMessageUpdateBody>(code: string, data?: ThisMessageUpdateBody['data']): MessageUpdate<ThisMessageUpdateBody> {

  const message: MessageUpdate<ThisMessageUpdateBody> = {
    header: {
      id: '123',
      type: 'UPDATE'
    },
    body: {
      code,
      data
    }
  }

  return message
  
}

An error is triggered regarding the function parameters:

Type '"data"' cannot be used to index type 'ThisMessageUpdateBody'

Is there a way to further narrow down this type without encountering an error?

javascript typescript type-inference typescript-generics

Answer 1

Answer №1

Update

Here's a slightly modified version to adjust to OP's comment.

If utilizing an object as the sole parameter of the function is not feasible, I would suggest using type aliases for safety and steering clear of string indexes.

type BodyCodeType = string;
type BodyDataType = UnknownRecord;

interface MessageUpdateBody {
  code: BodyCodeType;
  data?: BodyDataType;
}

interface MessageUpdate<MessageBody = MessageUpdateBody>
  extends Message<MessageBody> {
  header: {
    id: string;
    type: 'UPDATE';
  };
}

function createMessage<ThisMessageUpdateBody extends MessageUpdateBody>(
  code: BodyCodeType,
  data: BodyDataType
): MessageUpdate<ThisMessageUpdateBody> {
  const message: MessageUpdate<ThisMessageUpdateBody> = {
    header: {
      id: '123',
      type: 'UPDATE',
    },
    body: {
      code,
      data,
    } as ThisMessageUpdateBody,
  };

  return message;
}

const customMsg = createMessage('test_code', { foo: 'bar' });

console.log(customMsg); // OK

By the way, remember to include the as ThisMessageUpdateBody cast to prevent confusion during compilation on the body:

https://i.sstatic.net/H9nJH.png

Personally, I prefer relying on data inference from the template type and therefore opt for utilizing an object for the function parameter. For example:

function createMessage<ThisMessageUpdateBody extends MessageUpdateBody>({
  code,
  data,
}: ThisMessageUpdateBody): MessageUpdate<ThisMessageUpdateBody> {
  const message: MessageUpdate<ThisMessageUpdateBody> = {
    header: {
      id: '123',
      type: 'UPDATE',
    },
    body: {
      code,
      data,
    } as ThisMessageUpdateBody,
  };

  return message;
}

const customMsg = createMessage({
  code: 'test_code',
  data: { foo: 'bar' },
});

Avoiding strings for indexing also provides benefits since changing from data to payload within MessageUpdateBody will result in a clear compile-time error.

Answer 2

Update

Here's a slightly modified version to adjust to OP's comment.

If utilizing an object as the sole parameter of the function is not feasible, I would suggest using type aliases for safety and steering clear of string indexes.

type BodyCodeType = string;
type BodyDataType = UnknownRecord;

interface MessageUpdateBody {
  code: BodyCodeType;
  data?: BodyDataType;
}

interface MessageUpdate<MessageBody = MessageUpdateBody>
  extends Message<MessageBody> {
  header: {
    id: string;
    type: 'UPDATE';
  };
}

function createMessage<ThisMessageUpdateBody extends MessageUpdateBody>(
  code: BodyCodeType,
  data: BodyDataType
): MessageUpdate<ThisMessageUpdateBody> {
  const message: MessageUpdate<ThisMessageUpdateBody> = {
    header: {
      id: '123',
      type: 'UPDATE',
    },
    body: {
      code,
      data,
    } as ThisMessageUpdateBody,
  };

  return message;
}

const customMsg = createMessage('test_code', { foo: 'bar' });

console.log(customMsg); // OK

By the way, remember to include the as ThisMessageUpdateBody cast to prevent confusion during compilation on the body:

https://i.sstatic.net/H9nJH.png

Personally, I prefer relying on data inference from the template type and therefore opt for utilizing an object for the function parameter. For example:

function createMessage<ThisMessageUpdateBody extends MessageUpdateBody>({
  code,
  data,
}: ThisMessageUpdateBody): MessageUpdate<ThisMessageUpdateBody> {
  const message: MessageUpdate<ThisMessageUpdateBody> = {
    header: {
      id: '123',
      type: 'UPDATE',
    },
    body: {
      code,
      data,
    } as ThisMessageUpdateBody,
  };

  return message;
}

const customMsg = createMessage({
  code: 'test_code',
  data: { foo: 'bar' },
});

Avoiding strings for indexing also provides benefits since changing from data to payload within MessageUpdateBody will result in a clear compile-time error.

Answer 3

Answer №2

To retrieve the index of a generic type, one approach is to define another generic and set this generic as the type. For instance, in your scenario, it could look something like this:

function createMessage<ThisMessageUpdateBody extends MessageUpdateBody, Data extends ThisMessageUpdateBody['data']>(code: string, data?: Data): MessageUpdate<ThisMessageUpdateBody> {
    const body = {
        code,
        data
    };
  const message = {
    header: {
      id: '123',
      type: UPDATE as typeof UPDATE
    },
    body
  }

  return message
  
}

However, the above code snippet still triggers an error because ThisMessageUpdateBody could be any subtype of MessageUpdateBody and may contain properties other than just code & data (as shown in the error below).

Type '{ code: string; data: Data | undefined; }' is not assignable to type 'ThisMessageUpdateBody'.
      '{ code: string; data: Data | undefined; }' is assignable to the constraint of type 'ThisMessageUpdateBody', but 'ThisMessageUpdateBody' could be instantiated with a different subtype of constraint 'MessageUpdateBody'.(2322)

Suggestion 1:

Instead of using parameters code and data, modify createMessage to take a single parameter named body.

function createMessage<ThisMessageUpdateBody extends MessageUpdateBody= MessageUpdateBody>(body: ThisMessageUpdateBody): MessageUpdate<ThisMessageUpdateBody> {
  const message = {
    header: {
      id: '123',
      type: UPDATE as typeof UPDATE
    },
    body
  }

  return message
  
}

Suggestion 2:

Rather than defining the generic type for messageBody in createMessage, declare the generic type for data in the body. This ensures that the message body always has two specific properties (code: string & data: CustomData)

// Declare generic for "body.data" type within MessageBody
interface MessageUpdateBody<MessageBodyData = UnknownRecord> {

  code: string
  data?: MessageBodyData

}

function createMessage<MessageBodyData = UnknownRecord>(code: string, data: MessageBodyData): MessageUpdate<MessageUpdateBody<MessageBodyData>> {
  const message = {
    header: {
      id: '123',
      type: UPDATE as typeof UPDATE
    },
    body: {
        code,
        data
    }
  }

  return message
  
}

Link to TS snippet playground

Answer 4

To retrieve the index of a generic type, one approach is to define another generic and set this generic as the type. For instance, in your scenario, it could look something like this:

function createMessage<ThisMessageUpdateBody extends MessageUpdateBody, Data extends ThisMessageUpdateBody['data']>(code: string, data?: Data): MessageUpdate<ThisMessageUpdateBody> {
    const body = {
        code,
        data
    };
  const message = {
    header: {
      id: '123',
      type: UPDATE as typeof UPDATE
    },
    body
  }

  return message
  
}

However, the above code snippet still triggers an error because ThisMessageUpdateBody could be any subtype of MessageUpdateBody and may contain properties other than just code & data (as shown in the error below).

Type '{ code: string; data: Data | undefined; }' is not assignable to type 'ThisMessageUpdateBody'.
      '{ code: string; data: Data | undefined; }' is assignable to the constraint of type 'ThisMessageUpdateBody', but 'ThisMessageUpdateBody' could be instantiated with a different subtype of constraint 'MessageUpdateBody'.(2322)

Suggestion 1:

Instead of using parameters code and data, modify createMessage to take a single parameter named body.

function createMessage<ThisMessageUpdateBody extends MessageUpdateBody= MessageUpdateBody>(body: ThisMessageUpdateBody): MessageUpdate<ThisMessageUpdateBody> {
  const message = {
    header: {
      id: '123',
      type: UPDATE as typeof UPDATE
    },
    body
  }

  return message
  
}

Suggestion 2:

Rather than defining the generic type for messageBody in createMessage, declare the generic type for data in the body. This ensures that the message body always has two specific properties (code: string & data: CustomData)

// Declare generic for "body.data" type within MessageBody
interface MessageUpdateBody<MessageBodyData = UnknownRecord> {

  code: string
  data?: MessageBodyData

}

function createMessage<MessageBodyData = UnknownRecord>(code: string, data: MessageBodyData): MessageUpdate<MessageUpdateBody<MessageBodyData>> {
  const message = {
    header: {
      id: '123',
      type: UPDATE as typeof UPDATE
    },
    body: {
        code,
        data
    }
  }

  return message
  
}

Link to TS snippet playground

Utilizing the index of a generic type within TypeScript

Answer №1

Answer №2

Suggestion 1:

Suggestion 2:

Similar questions

Utilizing object as props in ReactJS with TypeScript

Encountering an error in Express while attempting to upload an image due to the inability to read the property 'file' of undefined

Multiple occurrences of the cookie found in the document.cookie

Is there a way to include multiple TinyMCE editors with unique configurations for each one?

What is the best approach for creating routes with parameters of varying lengths?

Is Ajax capable of processing and returning JSON data effectively?

Tips for accessing jQuery UI tab elements and adjusting visibility for specific panels

Resolving NestJS Custom Startup Dependencies

Nestjs crashes with "terminated" on an Amazon EC2 instance

Executing a single insert statement in a TypeScript Express application using PostgreSQL is taking over 240 milliseconds to complete

Is it considered inefficient to import every single one of my web components using separate <script> tags?

How can I apply styling to Angular 2 component selector tags?

Testing for expressjs 4 using Mocha revealed unexpected behavior when attempting to spy on a function called within a promise. Despite setting up the

Slider buttons are not appearing in Time Picker

Leveraging functionality from an imported module - NestJS

What is the best way to insert a newline in a shell_exec command in PHP

Styling on Material UI Button disappears upon refreshing the page

Proper method for displaying modifications in QueryList from @ContentChildren

Angular's onreadystatechange event is triggered when the state

Exploring the process of retrieving token expiration in TypeScript using the 'jsonwebtoken' library