reactjs - Skicka ett tal inom ett intervall som en prop i React med Typescript

Jag har följande props-gränssnitt i min komponent:

export interface ComponentProps {
  title: string;
  value: number;
}

Jag behöver dock verifiera att detta värde är ett tal i intervallet från 0 till 24.

Det enda sättet jag har kunnat hitta för att göra det hittills är att använda en unionstyp:

value: 0 | 1 | 2 ... | 24;

Ser ful ut... Finns det ett mer elegant sätt att göra det på?

Svar #1

Den tekniska termen för den här typen av sak (ett nummer som är inom ett specifikt intervall) är "dependent types", vilket inte är något som TypeScript försöker göra.

Även om du skapar en union (antingen manuellt eller med rekursion), kommer det förmodligen inte vara särskilt roligt, eftersom TypeScript inte försöker spåra invarianta värden.

// Error: Type 'number' is not assignable to type 'Hour'.
const q: Hour = 21 + 1;

Du kan själv lägga till enkel intervallvalidering:

function MyComponent({value}: ComponentProps) {
  assert(value >= 0 && value <= 24);

Du skulle kunna genomdriva detta mer strikt med en newtype, liknande @Lucas Maracaipe:s förslag:

type Hour = number & { readonly __tag: unique symbol };
function validateHour(value: number): Hour {
  if (value < 0 || value > 24) {
    throw new Error('Hour must be between 0 and 24');
  }
  return value as Hour;
}

export interface ComponentProps {
  title: string;
  value: Hour;
}

Slutligen, om du verkligen ville, skulle du kunna använda Reacts prop-typer. Prop-typer är nästan helt föråldrade av TypeScript, och jag skulle inte rekommendera dem, men deras förmåga att göra godtycklig körningstid-validering är något som TypeScripts typ-system inte kan göra.

Svar #2

Du skulle kunna skapa någon överlägsen/underlägsen villkor :

if ( value >= 0 && value < 25 ){
   ...doSomething
}

Hoppas jag kunde hjälpa till!