The Typescript interface requires that one prop representing a number is expected to be less than another number prop

Question

The Typescript interface requires that one prop representing a number is expected to be less than another number prop

Is there a way to create a TypeScript interface that enforces a condition where a number property must always be less than another number property in the interface?

For instance, if I have a numberOfFiles property and a currentFileIndex property, and I want to ensure that the value of currentFileIndex is always less than numberOfFiles, can I define this in the interface?

Would something like this be valid:

interface IProps {
  numberOfFiles: number;
  currentFileIndex: number<less than numberOfFiles>;
}

If it's not feasible, that's okay, but it would be helpful to know if it can be done.

typescript types interface numbers

Answer 1

Answer №1

Unfortunately, there is no direct way to achieve this in TypeScript, as the language lacks the capability to define such constraints.

However, you can enforce validation checks early on by employing branded types, as demonstrated in this example

interface IProps {
    numberOfItems: number;
    currentItemIndex: number & { mustBeLessThanNumberOfItems: true };
}

type Omit<T, TKeys extends keyof T> = Pick<T, Exclude<keyof T, TKeys>>
function createProps(p: Omit<IProps, 'currentItemIndex'> & {
    currentItemIndex: number 
}) {
    if(p.currentItemIndex > p.numberOfItems) throw "Error!";
    return p as IProps;
}

//valid
createProps({
    numberOfItems: 10,
    currentItemIndex: 5
});

//compiles successfully but throws a runtime error when props are created
createProps({
    numberOfItems: 10,
    currentItemIndex: 15
});

//error
let p : IProps = {
    numberOfItems: 10,
    currentItemIndex: 5 //error - missing validation check
}

Answer 2

Unfortunately, there is no direct way to achieve this in TypeScript, as the language lacks the capability to define such constraints.

However, you can enforce validation checks early on by employing branded types, as demonstrated in this example

interface IProps {
    numberOfItems: number;
    currentItemIndex: number & { mustBeLessThanNumberOfItems: true };
}

type Omit<T, TKeys extends keyof T> = Pick<T, Exclude<keyof T, TKeys>>
function createProps(p: Omit<IProps, 'currentItemIndex'> & {
    currentItemIndex: number 
}) {
    if(p.currentItemIndex > p.numberOfItems) throw "Error!";
    return p as IProps;
}

//valid
createProps({
    numberOfItems: 10,
    currentItemIndex: 5
});

//compiles successfully but throws a runtime error when props are created
createProps({
    numberOfItems: 10,
    currentItemIndex: 15
});

//error
let p : IProps = {
    numberOfItems: 10,
    currentItemIndex: 5 //error - missing validation check
}

The Typescript interface requires that one prop representing a number is expected to be less than another number prop

Answer №1

Similar questions

Angular 16 routing not loading content

Leveraging React's state to enable temporary invalid numeric input handling

An error is anticipated when () is added, but surprisingly, I still encounter an error as well. This issue arises in React-Native and Typescript

New Requirement for Angular Service: Subclass Constructor Must Be Provided or Unable to Resolve all Parameters for ClassName (?)

What is the best way to integrate qrcode-generator into an Angular 2 application?

Tips for sending a parameter to an onClick handler function in a component generated using array.map()

The requested property does not exist within the 'CommonStore' type in mobx-react library

Utilizing ngx-translate in Angular6 to dynamically load translations by making an API request to the backend

Find all objects in an array that have a date property greater than today's date and return them

What is the best way to transfer information from one column to another column with Office Scripts?

Angular 2/4 throws an Error when a Promise is rejected

The async pipe is failing to function properly when used with the same observable

Retrieve a mapping of keys from a generic object structure in TypeScript

Enhancing the loading speed of hefty Angular components

Extending Vue components with TypeScript for enhanced styling features

Expanding function parameter types using intersection type in Typescript

Angular-4: Exploring Component Reference on Click Event

The TypeScript type for a versatile onChange handler in a form

Setting up Webpack for Node applications

Utilizing the index of the .map function in conjunction with internal methods