String literal types with React Typescript

I want to use String literal types in my component and I want to able to select any of those strings in my story using Storybook.

The component can only receive 3 types of strings: LATER | IMMEDIATELY | FCFS

But, I have this error:

Type 'string' is not assignable to type '"LATER" | "INMEDIATELY" | "FCFS"'.ts(2322) index.tsx(4, 3): The expected type comes from property 'type' which is declared here on type 'IntrinsicAttributes & LotteryCardInterface & { children?: ReactNode; }'

Component:

interface LotteryCardInterface {
  type: 'LATER' | 'INMEDIATELY' | 'FCFS'
}

const LotteryCard: React.FC<LotteryCardInterface> = (props: LotteryCardInterface) => 
(<p>
    {props.type}
  </p>)

export default LotteryCard;

Story:

export default {
  title: 'organism|LotteryCard',
  component: LotteryCard,
  decorators: [withKnobs]
}

const label = 'type';
const options = {
  LATER: 'LATER',
  INMEDIATELY: 'INMEDIATELY',
  FCPS: 'FCPS',
};
const defaultValue = 'LATER';

export const Summary = () => {
  const value = radios(label, options, defaultValue);
  return (
    <LotteryCard
      type={value}
    />
  )
}

Any idea how to fix it?

Thanks

[marie-maxime]

Sorry, kinda busy today so I don’t have much time to explain, but this should look something like this:

To have a variable match a series of string in Typescript, you have to use enum. The enum value can then be used directly in your code.

enum CardStatus {  // placeholder name
  LATER = "LATER",
  INMEDIATELY = "INMEDIATELY",
  FCFS = "FCFS",
}

interface LotteryCardInterface {
  type: CardStatus
}

const options = CardStatus
const defaultValue = CardStatus.LATER

export const Summary = () => {
  const value = radios(label, options, defaultValue);
  return (
    <LotteryCard
      type={value}
    />
)

I’m not sure what is the radio methods doing, so you might need to change it a bit, but this should probably works.

[Alfrex92]

thanks 😃, is working.