How to use enum values as a type

Question

I have an enum

export enum AudioActionTypes {
  UpdateMusicData = 'UPDATE_MUSIC_DATA',
  UpdateVoiceData = 'UPDATE_VOICE_DATA',
  UpdateSoundData = 'UPDATE_SOUND_DATA',
}

And a function that is dispatching an event to update the global context.

  const onVolumeChange = (value: number, audioActionType: AudioActionTypes[keyof typeof AudioActionTypes]) => {
    audioDispatch({
      type: audioActionType,
      payload: { volume: value / 100 },
    });
  };

I want to make typescript understand that I am passing only the AudioActionTypes. If I am setting the type for audioTypeto be the enum itself ( AudioActionTypes ) ( audioActionType: AudioActionTypes ) typescript complains and throws this error.

Argument of type '{ type: AudioActionTypes; payload: { volume: number; }; }' is not assignable to parameter of type 'AudioActions'.
  Type '{ type: AudioActionTypes; payload: { volume: number; }; }' is not assignable to type '{ type: AudioActionTypes.UpdateSoundData; payload: ISoundSettings; }'.
    Types of property 'type' are incompatible.
      Type 'AudioActionTypes' is not assignable to type 'AudioActionTypes.UpdateSoundData'.

audioDispatch has this types.

type AudioActions = {
  type: AudioActionTypes.UpdateMusicData;
  payload: IMusicSettings;
} | {
  type: AudioActionTypes.UpdateVoiceData;
  payload: IVoiceSettings;
} | {
  type: AudioActionTypes.UpdateSoundData;
  payload: ISoundSettings;
}
const audioDispatch: React.Dispatch<AudioActions>;

How should I manage the types for the audioActionType parameter so I can call the function with this argument and don't have any type error?

onVolumeChange(4, AudioActionTypes.UpdateVoiceData);

Not sure I understand what you are trying to do exactly, but you are passing a string into onVolumeChange (AudioActionTypes.UpdateVoiceData) and trying to use this as a Type. Maybe you want to set types for your enum values (eg: UPDATE_MUSIC_DATA) and use these instead of strings? — Joao Jesus, May 18 '22 at 11:25
@WhiT3Kr0w I am using enums for action types to get both the types and values. In the reducers, there are separate type of action types that are mapping a certain function to the core reducer.The `type` for `audioDispatch` can be `AudioActionTypes.UpdateSoundData | AudioActionTypes.UpdateVoiceData | AudioActionTypes.UpdateMusicData`.And I am passing those enum values as an argument for `onVolumeChange`.I just can't set a proper type for `audioActionType `.Hope I made it clear as much as possible. — Norayr Ghukasyan, May 18 '22 at 11:36
Gotcha. Try checking this question out: https://stackoverflow.com/questions/55142177/how-to-build-a-type-from-enum-values-in-typescript — Joao Jesus, May 18 '22 at 11:38

score 0 · Answer 1 · answered May 18 '22 at 16:47

0

You can just use AudioActionTypes as a type for your parameter.

const onVolumeChange = (value: number, audioActionType: AudioActionTypes) => { }

answered May 18 '22 at 16:47

axtck

3,707
2
10
26

You haven't read the question properly, I have mentioned there that I have already used it and typescript throws an error and also error is written in the question. – Norayr Ghukasyan May 18 '22 at 20:13

How to use enum values as a type

1 Answers1