Customizable features depending on the generic type

Question

Customizable features depending on the generic type

Is there a way to make a property optional based on the generic type in TypeScript? I've attempted the following:

interface Option<T extends 'text' | 'audio' | 'video'> {
    id: string;
    type: T;
    text: T extends 'text' ? string : undefined;
    media: T extends 'audio' | 'video' ? T : undefined;
}

const option: Option<'text'> = { text: "test", type: "text", id: "opt1" };

Basically, the goal is to have the text property only for Option<'text'> and the media property only for Option<'audio' | 'video'>.

However, when compiling, an error is thrown by the TypeScript compiler:

Property 'media' is missing in type '{ text: string; type: "text"; id: string; }' 
but required in type 'Option<"text">'.ts(2741)

What would be a good workaround for this situation?

typescript typescript-generics

Answer 1

Answer №1

When it comes to having the optionality of a property depend on a generic type parameter within an interface, there is a workaround using a type alias and intersections:

type Option<T extends 'text' | 'audio' | 'video'> = {
    id: string;
    type: T;
} 
& (T extends 'text' ? { text: string } : {})
& (T extends 'audio' | 'video' ? { media: T }: {});


const option: Option<'text'> = { text: "test", type: "text", id: "opt1" };

Check this out

If you prefer a more streamlined approach, consider utilizing a discriminated union:

type Option = 
| { id: string; type: 'text'; text: string }
| { id: string; type: 'audio' | 'video'; media: 'audio' | 'video' };


const option: Extract<Option, {type: 'text' }> = { text: "test", type: "text", id: "opt1" };

function withOption(o: Option) {
    switch(o.type) {
        case 'text': console.log(o.text); break;
        default: console.log(o.media); break;
    }
}

Try it out here

Answer 2

When it comes to having the optionality of a property depend on a generic type parameter within an interface, there is a workaround using a type alias and intersections:

type Option<T extends 'text' | 'audio' | 'video'> = {
    id: string;
    type: T;
} 
& (T extends 'text' ? { text: string } : {})
& (T extends 'audio' | 'video' ? { media: T }: {});


const option: Option<'text'> = { text: "test", type: "text", id: "opt1" };

Check this out

If you prefer a more streamlined approach, consider utilizing a discriminated union:

type Option = 
| { id: string; type: 'text'; text: string }
| { id: string; type: 'audio' | 'video'; media: 'audio' | 'video' };


const option: Extract<Option, {type: 'text' }> = { text: "test", type: "text", id: "opt1" };

function withOption(o: Option) {
    switch(o.type) {
        case 'text': console.log(o.text); break;
        default: console.log(o.media); break;
    }
}

Try it out here

Answer 3

Answer №2

One way to achieve this is by using a union:

type Option<T extends 'text' | 'audio' | 'video'> =
    {
        id: string;
        type: T;
    }
    &
    (
        T extends 'text'
        ? {text: string}
        : {media: T}
    );

const option: Option<'text'> = { text: "test", type: "text", id: "opt1" };

Link to Playground

Answer 4

One way to achieve this is by using a union:

type Option<T extends 'text' | 'audio' | 'video'> =
    {
        id: string;
        type: T;
    }
    &
    (
        T extends 'text'
        ? {text: string}
        : {media: T}
    );

const option: Option<'text'> = { text: "test", type: "text", id: "opt1" };

Link to Playground

Answer 5

Answer №3

Creating a generic type with string values like the one you mentioned,

interface Option<T extends 'text' | 'audio' | 'video'>

, is not feasible.

However, if you wish to achieve something similar, you can follow these steps:

option.ts

interface Option {
    id: string;
    type: 'text' | 'audio' | 'video' | undefined;
}

media-option.ts

interface MediaOption extends Option {
    media: string;
}

text-option.ts

interface TextOption extends Option {
    text: string;
}

When utilizing these types, you will need to cast to a specific type depending on whether it's a media or text option, based on its type.

let option: Option = {id:'1',type: 'audio'}

if(option.type === 'audio'){
let media = option as MediaOption
}

Answer 6

Creating a generic type with string values like the one you mentioned,

interface Option<T extends 'text' | 'audio' | 'video'>

, is not feasible.

However, if you wish to achieve something similar, you can follow these steps:

option.ts

interface Option {
    id: string;
    type: 'text' | 'audio' | 'video' | undefined;
}

media-option.ts

interface MediaOption extends Option {
    media: string;
}

text-option.ts

interface TextOption extends Option {
    text: string;
}

When utilizing these types, you will need to cast to a specific type depending on whether it's a media or text option, based on its type.

let option: Option = {id:'1',type: 'audio'}

if(option.type === 'audio'){
let media = option as MediaOption
}

Customizable features depending on the generic type

Answer №1

Answer №2

Answer №3

Similar questions

Comparing Node.JS using Typescript versus Javascript to Ruby On Rails

angular Struggling with @Input and data interpolation functionality within web components

Definition of TypeScript array properties

When attempting to publish an index.d.ts file using npm, the module is

Send an API request using an Angular interceptor before making another call

Upgrade to Typescript version 3.2 and exploring the Response body within lib.dom.d.ts

"Transferring a C# dictionary into a TypeScript Map: A step-by-step

A foundational NodeJS program in TypeScript featuring a structured client-utility-definition setup with adherence to stringent coding guidelines

Excluding certain source files in Typescript's tsconfig is a common practice to

What is the proper data structure for an array containing a generic interface?

I desire to exclude the final attribute of the object and instead assign its value to the preceding property

Angular styling and form error issue

Modify the selection in one dropdown menu based on the selection in another dropdown menu using Angular 8

Issue with Vue router - Multiple calls to the "next" callback were detected within one navigation guard

Angular 11 throws an error stating that the argument of type 'null' cannot be assigned to a parameter of type 'HttpClient'

The logic behind regular expressions

Change the class properties to UpperCamelCase

Retrieve information from a service in Angular to populate a form

Display a React component according to the user's input

Deactivating PrimeNG checkbox