Implement interface inside interface dynamically TS

Question

I have this typescript interface, that works as a common structure for api calls in my react app.

export interface ICommonApiState {
    loading: boolean;
    data: any;
    serverError: string;
}

As you can see, data type is any, but i want that type to be dynamic, because, i'm going to use this same interface in multiple places, but i don't want to create a new interface every time i use it, so, how can i pase a type to data depending on what i need ?

For example, if i'm making an api call to this server that will give me an array of user names, how can i pass that type to data using same interface ? Like..


const [userNames, setUserNames] = useState<ICommonApiState<IUserNames>>(
{
 loading: false,
 serverError: '',
 data: [] -> **This receives inferred types from IUserNames**
}
)

Rikin · Accepted Answer · 2022-05-04 14:42:15Z

5

One solution is to make it generic like below:

export interface ICommonApiState<T> {
    loading: boolean;
    data: T;
    serverError: string;
}

That way you are controlling what gets inferred in individual components that you are using.

You already have that example usage in your code: ICommonApiState<IUserNames>

answered May 4, 2022 at 14:42

Rikin

5,4842 gold badges17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Diego Over a year ago

Thank you, i'll give it a try, it seems quite basic, but i just didn't know how to do it );

Collectives™ on Stack Overflow

Implement interface inside interface dynamically TS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related