What is the process of generating a new type in TypeScript based on another type with a distinct property of a different type?

Question

What is the process of generating a new type in TypeScript based on another type with a distinct property of a different type?

I am defining a type as follows:

type Period = 'Monthly' | 'Yearly'
type Cycle = {
    period: Period,
    price: number
}

Now, I am looking to modify this type so that the 'period' property can also accept an empty string:

type Period = 'Monthly' | 'Yearly'
type EditableCycle = {
    period: Period | '',
    price: number
}

My initial idea was to use this hypothetical syntax:

type EditableCycle = Extend<Cycle, { period: '' }>

Can anyone provide guidance on how to implement this change?

The rationale behind this modification is to allow users to leave the 'period' field empty during editing, while ensuring that a valid Period will be assigned after validation.

Please note that the actual type structure is more intricate than Cycle, involving arrays and other complex elements. This is just a simplified example.

typescript types

Answer 1

Answer №1

One way to modify the period field is by using the Omit utility type:

type Period = 'Monthly' | 'Yearly'
type Cycle = {
    period: Period,
    price: number
}

type EditableCycle = Omit<Cycle, "period"> & {
  period: Period | ''
}

const editableCycle: EditableCycle = {
  period: '',
  price: 5
}

If you want to take it a step further, consider creating your own Override type:

type Period = 'Monthly' | 'Yearly'
type Cycle = {
    period: Period,
    price: number
}

type Override<T, K> = Omit<T, keyof K> & K

type EditableCycle = Override<Cycle, {
  period: Period | ''
}>

const editableCycle: EditableCycle = {
  period: '',
  price: 5
}

I trust this information proves to be beneficial to you.

Regards, François

Answer 2

One way to modify the period field is by using the Omit utility type:

type Period = 'Monthly' | 'Yearly'
type Cycle = {
    period: Period,
    price: number
}

type EditableCycle = Omit<Cycle, "period"> & {
  period: Period | ''
}

const editableCycle: EditableCycle = {
  period: '',
  price: 5
}

If you want to take it a step further, consider creating your own Override type:

type Period = 'Monthly' | 'Yearly'
type Cycle = {
    period: Period,
    price: number
}

type Override<T, K> = Omit<T, keyof K> & K

type EditableCycle = Override<Cycle, {
  period: Period | ''
}>

const editableCycle: EditableCycle = {
  period: '',
  price: 5
}

I trust this information proves to be beneficial to you.

Regards, François

Answer 3

Answer №2

Would you consider defining it like this instead:

const PeriodType = 'Monthly' | 'Yearly'
const CycleType = {
    period: PeriodType,
    price: number
}

const EditableType<T> =  {
  [Key in keyof T]: T[Key] extends string? (T[Key] | '') : T[Key];
};

const EditableCycleType = EditableType<CycleType>; // -->  period: "" | PeriodType;

Answer 4

Would you consider defining it like this instead:

const PeriodType = 'Monthly' | 'Yearly'
const CycleType = {
    period: PeriodType,
    price: number
}

const EditableType<T> =  {
  [Key in keyof T]: T[Key] extends string? (T[Key] | '') : T[Key];
};

const EditableCycleType = EditableType<CycleType>; // -->  period: "" | PeriodType;

Answer 5

Answer №3

Learn how to utilize the Extend tool in your code (I've rebranded it as UnifyProps to merge properties from two parameters, creating a unified type with shared names):

TS Playground link

type UnifyProps<T1, T2> = {
  [K in keyof T1]: K extends keyof T2 ? (T1[K] | T2[K]) : T1[K];
} & {
  [K in keyof T2]: K extends keyof T1 ? (T1[K] | T2[K]) : T2[K];
};

type Period = 'Monthly' | 'Yearly';

type Cycle = {
  period: Period;
  price: number;
};

type EditableCycle = UnifyProps<Cycle, { period: '' }>;

declare const ec: EditableCycle;
ec.period = 'Monthly'; // ok
ec.period = 'Yearly'; // ok
ec.period = ''; // ok
ec.period = 'another string'; /*
^^^^^^^^^
Type '"another string"' is not assignable to type '"" | Period'. (2322) */

Answer 6

Learn how to utilize the Extend tool in your code (I've rebranded it as UnifyProps to merge properties from two parameters, creating a unified type with shared names):

TS Playground link

type UnifyProps<T1, T2> = {
  [K in keyof T1]: K extends keyof T2 ? (T1[K] | T2[K]) : T1[K];
} & {
  [K in keyof T2]: K extends keyof T1 ? (T1[K] | T2[K]) : T2[K];
};

type Period = 'Monthly' | 'Yearly';

type Cycle = {
  period: Period;
  price: number;
};

type EditableCycle = UnifyProps<Cycle, { period: '' }>;

declare const ec: EditableCycle;
ec.period = 'Monthly'; // ok
ec.period = 'Yearly'; // ok
ec.period = ''; // ok
ec.period = 'another string'; /*
^^^^^^^^^
Type '"another string"' is not assignable to type '"" | Period'. (2322) */

What is the process of generating a new type in TypeScript based on another type with a distinct property of a different type?

Answer №1

Answer №2

Answer №3

Similar questions

Using TypeScript import statements instead of the <reference path...> in an ASP.NET Core web application: A step-by-step guide

"Perform an upsert operation with TypeORM to create a new entry if it

Coverage of code in Angular2 using Qunit

Guide on obtaining Elastic search documents in the specified order of identifiers

Creating objects based on interfaces

Error: UserService (?) is missing parameters and cannot be resolved

Tips for writing an async function using TypeScript

Separate an array in TypeScript based on the sign of each number, and then replace the empty spaces with null objects

Creating a constant.ts file to define universal constantsWould you like assistance with anything else

The production build encountered an issue as it was anticipating 3 arguments, however, it only received

"Ionic 3: Utilizing the If Statement within the subscribe() Function for Increased Results

Guide on utilizing the h function in Vue3 for seamless binding and passing of properties and events from parent to child components

Is it possible that a declaration file for module 'material-ui/styles/MuiThemeProvider' is missing?

What is the best way to clear a token from SessionStorage upon exiting an Angular application?

Ways to establish the relationship between two fields within an object

Validating nested objects in YUP with the potential for zero or multiple properties present

Using Typescript to define the type for React's useState() setter function whenever

Testing vue-router's useRoute() function in Jest tests on Vue 3

You cannot assign type 'Node | null' to type 'Node' when attempting to loop through HTML elements in TypeScript

It is possible that the object may be null, as indicated by TS2531 error