New interface based on an interface's keys

Question

I am trying to create yet another interface from the ImportAccountsState but this time omitting the StateVariable interface. I want to do it the TypeScript way without defining it manually again.

interface StateVariable<T> {
  value: T;
  setValue: (value: T) => void;
}

interface ImportAccountsState {
  isDialogOpen: StateVariable<boolean>;
  organization: StateVariable<string>;
  isOrganizationValid: StateVariable<boolean>;
}

I want my end result to be like so

interface ImportAccountsState {
  isDialogOpen: boolean;
  organization: string;
  isOrganizationValid: boolean;
}

I kind of made a start with keyof ImportAccountsState but couldn't figure out how to map it to whatever type is inside the angle brackets <>.

captain-yossarian from Ukraine · Accepted Answer · 2021-07-26 09:18:55Z

1

You can use mapped types for this purpose

interface StateVariable<T> {
    value: T;
    setValue: (value: T) => void;
}

interface ImportAccountsState {
    isDialogOpen: StateVariable<boolean>;
    organization: StateVariable<string>;
    isOrganizationValid: StateVariable<boolean>;
}


type Result = {
    [Prop in keyof ImportAccountsState]: ImportAccountsState[Prop]['value']
}

Docs

Would it be far more complex if ImportAccountsState was generic?

interface StateVariable<T> {
    value: T;
    setValue: (value: T) => void;
}
// not sure where you want to use T generic
interface ImportAccountsState {
    isDialogOpen: StateVariable<boolean>;
    organization: StateVariable<string>;
    isOrganizationValid: StateVariable<boolean>;
}


type Result<T extends Record<PropertyKey, { value: unknown }>> = {
    [Prop in keyof T]: T[Prop]['value']
}

I am getting an error when using Result Just use type instead of interface:

// not sure where you want to use T generic
type ImportAccountsState = {
    isDialogOpen: StateVariable<boolean>;
    organization: StateVariable<string>;
    isOrganizationValid: StateVariable<boolean>;
}

types have index signature if you want to constraint it

OR move constraint inside the iteration:

interface StateVariable<T> {
    value: T;
    setValue: (value: T) => void;
}
// not sure where you want to use T generic
interface ImportAccountsState {
    isDialogOpen: StateVariable<boolean>;
    organization: StateVariable<string>;
    isOrganizationValid: StateVariable<boolean>;
}


type Util<T> = {
    [Prop in keyof T]: T[Prop] extends { value: unknown } ? T[Prop]['value'] : never
}

type Result = Util<ImportAccountsState> // ok

edited Jul 26, 2021 at 9:18

answered Jul 14, 2021 at 11:47

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

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

5 Comments

LazioTibijczyk Over a year ago

Would it be far more complex if ImportAccountsState was generic?

captain-yossarian from Ukraine Over a year ago

Updated. Not complex. You just have to add generic everywhere where you are using ImportAccountsState

LazioTibijczyk Over a year ago

Sorry, I wasn't clear enough. I meant if I wasn't using ImportAccountState but an interface with different keys but having StateVariable as values too.

LazioTibijczyk Over a year ago

Something like [Prop in keyof T]: T[Prop][...]

LazioTibijczyk Over a year ago

I am getting an error when using Result<ImportAccountsState> - Type 'ImportAccountsState' does not satisfy the constraint 'Record<PropertyKey, { value: unknown; }>'. Index signature is missing in type 'ImportAccountsState'.

spender · Accepted Answer · 2021-07-14 12:11:40Z

1

You can create a type to extract the generic type from StateVariable<T>:

type ExtractGeneric<T extends StateVariable<any>> = 
    T extends StateVariable<infer TT> ? TT : never;

Here, we can be sure that because T is constrained to be of type StateVariable<any> that the never branch above will never happen because the type-checker will spew.

Now we can create a mapped type that makes use of the ExtractGeneric type:

type MappedStateVariableRecord<T extends Record<keyof T, StateVariable<any>>> = {
  [P in keyof T]: ExtractGeneric<T[P]>
}

then use this type on your ImportAccountsState:

type MappedImportAccountsState = MappedStateVariableRecord<ImportAccountsState>

See Playground Link

edited Jul 14, 2021 at 12:11

answered Jul 14, 2021 at 11:57

spender

121k36 gold badges245 silver badges369 bronze badges

Collectives™ on Stack Overflow

New interface based on an interface's keys

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related