Can one deduce the generic type from within a string template literal?

Question

Can one deduce the generic type from within a string template literal?

I have a piece of code that achieves my desired outcome, but I want to avoid explicitly specifying the generic it requires.

type EventGroup = {
  actions: "run" | "save"
  other: "bla"
}

export type EventType<T extends keyof EventGroup> = `${T}/${EventGroup[T]}`

const t: EventType<"actions"> = "actions/run"

I am hoping that Typescript can automatically infer the following:

`actions/run` -> valid
`actions/save` -> valid
`actions/bla` -> NOT valid
`other/bla` -> valid

The code currently accomplishes this, but I would like to eliminate the need for an explicit generic.

javascript typescript generics typescript-generics type-inference

Answer 1

Answer №1

To achieve this, you can utilize a mapped type to combine the values:

export type EventType = {
    [K in keyof EventGroup]: `${K}/${EventGroup[K]}`
}[keyof EventGroup];

Here is a test of the type's validity:

const t1: EventType = "actions/run";  // valid
const t2: EventType = "actions/save"; // valid
const t3: EventType = "actions/bla";  // NOT valid
const t4: EventType = "other/bla";    // valid

Interactive example

This process involves two components, starting with the mapped type:

type EventType = {
    [K in keyof EventGroup]: `${K}/${EventGroup[K]}`
}

which results in:

type EventType = {
    actions: "actions/run" | "actions/save";
    other: "other/bla";
}

Lastly, we use [keyof EventGroup] to extract only the values from actions and other as a union.

Answer 2

To achieve this, you can utilize a mapped type to combine the values:

export type EventType = {
    [K in keyof EventGroup]: `${K}/${EventGroup[K]}`
}[keyof EventGroup];

Here is a test of the type's validity:

const t1: EventType = "actions/run";  // valid
const t2: EventType = "actions/save"; // valid
const t3: EventType = "actions/bla";  // NOT valid
const t4: EventType = "other/bla";    // valid

Interactive example

This process involves two components, starting with the mapped type:

type EventType = {
    [K in keyof EventGroup]: `${K}/${EventGroup[K]}`
}

which results in:

type EventType = {
    actions: "actions/run" | "actions/save";
    other: "other/bla";
}

Lastly, we use [keyof EventGroup] to extract only the values from actions and other as a union.

Can one deduce the generic type from within a string template literal?

Answer №1

Similar questions

The functionality of the MVC jQuery grid is currently malfunctioning

What is the reason file inputs do not trigger 'input' events, while 'change' events do fire?

Why am I unable to utilize res of type NextResponse in my API endpoint?

Using Javascript to swap out elements sharing the same classname with distinct contents

outputting javascript within php

What is the best approach for defining variables in typescript?

Guide on sending a PUT request using express.js

What is the most effective way to accurately identify the mobile platform of a user using JavaScript?

Tips for maintaining accessibility to data while concealing input information

Encountering a 404 error for .ts files: The mystery of the missing

Creating a custom route in Node.js using Express for posting content and adding it to a specific user's page

What is the best way to extract a value from an input within a filter?

The issue persists with the ajax.reload() function in DataTables

Node.js is a versatile platform that allows users to efficiently download zip files into a folder and extract its contents. Discovering the optimal time to commence unzipping the file can be

Using JavaScript to post data to a PHP script, then triggering the execution of another

Ajax is working effectively as the first post is successful and the second post is able to retrieve data

How do I connect with the global error handling in Vue?

Altering the JavaScript variable by selecting an option from a dropdown list

Tips for creating a unique identifier for each component when initializing the useState() function

Retrieve the parent jQuery object of the element that was clicked using jQuery