What is the best way to utilize derived types in TypeScript?

Question

What is the best way to utilize derived types in TypeScript?

Given object A:

interface A {
   boolProp: boolean,
   stringProp: string,
   numberProp: number,
   ...other props/methods...
}

Now, I need objects that contain one of the properties from A and set a default value for it, with other properties being irrelevant to this context.

interface B {
    prop: keyof A,
    default: typeof keyof A,
   ...other props/methods...
}

The goal is to trigger a TypeScript error when attempting to assign a default value of a different type.

const b: B = {
  prop: 'stringProp',
  default: true, // An error should be raised since true cannot be assigned to a string
};

Thank you in advance for any assistance 🙏

typescript typescript-typings

Answer 1

Answer №1

Creating a union type that encompasses all valid combinations of prop/default is the goal here. This can be achieved by utilizing a mapped type that iterates over the keys of A and is accessed using keyof A.

type B = {
    [K in keyof A]: {
        prop: K
        default: A[K]
    }
}[keyof A] & {
    /* ... include any additional props for B here */ 
}

Interactive Play Area

Answer 2

Creating a union type that encompasses all valid combinations of prop/default is the goal here. This can be achieved by utilizing a mapped type that iterates over the keys of A and is accessed using keyof A.

type B = {
    [K in keyof A]: {
        prop: K
        default: A[K]
    }
}[keyof A] & {
    /* ... include any additional props for B here */ 
}

Interactive Play Area

Answer 3

Answer №2

One alternative method involves utilizing a generic to avoid creating a union type:

interface B<T extends keyof A> {
    prop: T,
    default: A[T]
//    ...other props/methods...
}

const b: B<'stringProp'> = {
  prop: 'stringProp',
  default: true, // error
};

The repetitive use of 'stringProp' can be bothersome. To address this issue, consider using a function or a class constructor to handle the arguments passed to it, as demonstrated below:

const createB = <T extends keyof A>(prop: T, defaultVal: A[T]) => ({ prop, default: defaultVal });

const b = createB('stringProp', true);
// error                        ----

Answer 4

One alternative method involves utilizing a generic to avoid creating a union type:

interface B<T extends keyof A> {
    prop: T,
    default: A[T]
//    ...other props/methods...
}

const b: B<'stringProp'> = {
  prop: 'stringProp',
  default: true, // error
};

The repetitive use of 'stringProp' can be bothersome. To address this issue, consider using a function or a class constructor to handle the arguments passed to it, as demonstrated below:

const createB = <T extends keyof A>(prop: T, defaultVal: A[T]) => ({ prop, default: defaultVal });

const b = createB('stringProp', true);
// error                        ----

What is the best way to utilize derived types in TypeScript?

Answer №1

Answer №2

Similar questions

Searching in Vue based on the selected option is only possible by the selected criteria and not by id, regardless of the

Error: Namespace declaration does not have a type annotation - TypeScript/Babel

What could be the reason for my function throwing a TypeError with the message "<function> is not a function"?

This phrase cannot be invoked

Adjust the size of an Angular component or directive based on the variable being passed in

What is the best way to incorporate a module from an external 'include' folder in your code?

Ensuring Type Compatibility Between Classes and Object Literals in TypeScript

SplitChunks in Webpack 4 helps to cache modules so they do not need to be reprocessed

The error message "Unable to access property MyToast.java as it is not

What is the reason behind being able to assign unidentified properties to a literal object in TypeScript?

Switching templates based on elementRef width adjustments

Tips for preventing a promise from being executed more than once within an observable while being subscribed to a BehaviorSubject

Is it possible for TypeScript to convert objects while preserving type annotations?

In TypeScript, the 'as const' syntax results in a syntax error due to the missing semicolon

Store the selected checkbox values in an array when submitting in Ionic

Restricting HTTP requests to once every 200 milliseconds in Angular 4 with filtering in place

Typescript and Apollo Client return types intertwined

Troubles arise when trying to compile Typescript and React with esbuild

Troubleshooting Issue: Relative Paths Fail to Work with routerLink in Angular 6

Troubleshooting Next.js 14 JWT Session Error in Conjunction with Next Auth - addressing a type