When passing an invalid value to the Props in TypeScript, no errors are being thrown

Question

When passing an invalid value to the Props in TypeScript, no errors are being thrown

const enum ColumnValues {
  one = 1,
  two = 2,
  three = 3,
}

interface Props {
  style?: StyleProp<ViewStyle>;
  title?: string;
  titleContainerStyle?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  textInputStyle?: StyleProp<TextStyle>;
  column?: ColumnValues.one | ColumnValues.two | ColumnValues.three;
}

const DynPut: FC<Props> = Props => {
...
return(
...
)

I have integrated this DynPut into another component and input the value of 10 to the Column Prop, however Typescript is not generating any errors. How can I configure Typescript to throw an error when a value greater than 3 is supplied to the Column Prop?

  <DynPut
    title="Add Items"
    style={{backgroundColor: 'yellow'}}
    titleStyle={{backgroundColor: 'green'}}
    titleContainerStyle={{backgroundColor: 'green'}}
    textInputStyle={{borderWidth: 5}}
    column={10}
  />

typescript react-native

Answer 1

Answer №1

This issue bears resemblance to a similar problem discussed here. However, the previous solution needs slight adjustments to address this specific problem. If you believe it's a duplicate, please flag it for review.

The primary issue at hand is that the `number` type in TypeScript can be assigned to a numeric enum even if it doesn't align with the enum values or requirements. For more context, refer to this answer.

To validate the provided number, we have to convert all enum numbers and the given `column` number into strings. Only then can we safely validate them.

Here's an example to consider:

enum ColumnValues {
    one = 1,
    two = 2,
    three = 3,
}

// Convert each enum numeric value into a string.
// Example: 3 -> "3"
type Enumerate<Enum> = Enum extends number | string ? keyof {
    [Prop in `${Enum}`]: Prop
} : never

// Get the stringified enum values
type Result = Enumerate<ColumnValues> // "0" | "1"

// Get a union of object values
type Values<T> = T[keyof T]

// Check if the provided initial value matches a stringified enum value
// If yes, allow the value and return the initial value
// If not, return 'never' to trigger a TypeScript error
type IsKeyValid<InitialValue extends number, Enum> =
    `${InitialValue}` extends Enumerate<Enum> ? InitialValue : never

type Props<Count extends number> = {
    column: IsKeyValid<Count, ColumnValues>;
}
const DynPut = <Count extends number>(props: Props<Count>) => { }

DynPut({ column: 1 }) // ok
DynPut({ column: 5 }) // error

my article as well.

Answer 2

This issue bears resemblance to a similar problem discussed here. However, the previous solution needs slight adjustments to address this specific problem. If you believe it's a duplicate, please flag it for review.

The primary issue at hand is that the `number` type in TypeScript can be assigned to a numeric enum even if it doesn't align with the enum values or requirements. For more context, refer to this answer.

To validate the provided number, we have to convert all enum numbers and the given `column` number into strings. Only then can we safely validate them.

Here's an example to consider:

enum ColumnValues {
    one = 1,
    two = 2,
    three = 3,
}

// Convert each enum numeric value into a string.
// Example: 3 -> "3"
type Enumerate<Enum> = Enum extends number | string ? keyof {
    [Prop in `${Enum}`]: Prop
} : never

// Get the stringified enum values
type Result = Enumerate<ColumnValues> // "0" | "1"

// Get a union of object values
type Values<T> = T[keyof T]

// Check if the provided initial value matches a stringified enum value
// If yes, allow the value and return the initial value
// If not, return 'never' to trigger a TypeScript error
type IsKeyValid<InitialValue extends number, Enum> =
    `${InitialValue}` extends Enumerate<Enum> ? InitialValue : never

type Props<Count extends number> = {
    column: IsKeyValid<Count, ColumnValues>;
}
const DynPut = <Count extends number>(props: Props<Count>) => { }

DynPut({ column: 1 }) // ok
DynPut({ column: 5 }) // error

my article as well.

When passing an invalid value to the Props in TypeScript, no errors are being thrown

Answer №1

Similar questions

An error should not be thrown if the object is potentially 'undefined', as there is a filter in place from rxjs

Encapsulate the module function and modify its output

Transform current JSON data into formatted JSON format using JavaScript or TypeScript

Is there a way to extract a specific item from a ListView by tapping on it in Nativescript?

Avoid using `@typescript-eslint/no-floating-promises` when using a `const` function

Despite declaring a default export, the code does not include one

The functionality of React setState seems to be malfunctioning when activated

Does an AsyncMethod().Result equivalent exist in typescript?

Currently in the process of creating a carousel displaying images, I have encountered an issue stating: "An optional property access cannot be on the left-hand side of an assignment expression."

Expanding the range of colors in the palette leads to the error message: "Object is possibly 'undefined'. TS2532"

Converting HTML to PDF with rtl support using the JavaScript library jsPDF

Is Angular CLI incorrectly flagging circular dependencies for nested Material Dialogs?

HTML code for adding a dropdown menu inside a table cell

Looking to retrieve the AssetLoadedFunc properties in the LoadAssets function? Wondering if you should use TypeScript or JavaScript

Is it possible to incorporate React-Native components into a React.js project?

I'm perplexed as to why my array remains empty despite assigning a value to it in my controller. (Just to clarify, I am working with AngularJS, not Angular)

When a function is transferred from a parent component to a child component's Input() property, losing context is a common issue

Tips for maintaining type information when using generics in constructors

Angular 14: Deleting an item from a FormArray triggers unintended form submission due to Angular animation

Retrieving the key from an object using an indexed signature in Typescript