Making sure a value is a specific string in TypeScript

Question

Making sure a value is a specific string in TypeScript

Here is what I currently have:

type AppDisplay = "MainMenu" | "Game" | "GameOver";

interface AppState {
  appDisplay: AppDisplay
}

const initialAppState : AppState = {
  appDisplay: "MainMenu"
}

type ActionType = {
  type: "DisplayMenu" | "DisplayGame" | "DisplayGameOver";
}

const appStateReducer = (state : AppState, action : ActionType) => {
  switch (action.type) {
    case "DisplayMenu":
      return {
        appDisplay: "MainMenu"
      }
    case "DisplayGame":
      return {
        appDisplay: "Game"
      }
    case "DisplayGameOver":
      return {
        appDisplay: "GameOver"
      }
  }
}

The issue with the code above arises from the fact that the assignments in appStateReducer are treated as type String instead of being recognized as type AppDisplay by TypeScript. How can I enforce that appDisplay can only be assigned values of "Game", "GameOver", or "MainMenu"?

typescript

Answer 1

Answer №1

In addition to Oles' suggestion of specifying the return type for your function, there are ways to streamline your code further:

Start by creating an enum with your preferred values:

enum AppDisplay {
    MAIN_MENU,
    GAME,
    GAME_OVER
}

Utilize this enum in defining the AppState interface:

interface AppState {
    appState: AppDisplay
}

A similar approach can be taken with the ActionType:

enum ActionType {
    DIPLAY_MENU,
    DISPLAY_GAME,
    DISPLAY_GAME_OVER
}

Implementing enums allows you to set specific values without concerning yourself with the data type (string, number, etc.).

For your reducer function, consider something along these lines (note that the state parameter appears unused in your existing code):

const appStateReducer = (action: ActionType): AppDisplay => {
    switch(action) {
        case ActionType.DISPLAY_MENU: 
            return AppDisplay.MAIN_MENU;

        case ActionType.DISPLAY_GAME: 
            return AppDisplay.GAME;

        case ActionType.GAME_OVER: 
            return AppDisplay.DISPLAY_GAME_OVER;

    }
}

We hope you find these suggestions valuable. Best wishes.

Answer 2

In addition to Oles' suggestion of specifying the return type for your function, there are ways to streamline your code further:

Start by creating an enum with your preferred values:

enum AppDisplay {
    MAIN_MENU,
    GAME,
    GAME_OVER
}

Utilize this enum in defining the AppState interface:

interface AppState {
    appState: AppDisplay
}

A similar approach can be taken with the ActionType:

enum ActionType {
    DIPLAY_MENU,
    DISPLAY_GAME,
    DISPLAY_GAME_OVER
}

Implementing enums allows you to set specific values without concerning yourself with the data type (string, number, etc.).

For your reducer function, consider something along these lines (note that the state parameter appears unused in your existing code):

const appStateReducer = (action: ActionType): AppDisplay => {
    switch(action) {
        case ActionType.DISPLAY_MENU: 
            return AppDisplay.MAIN_MENU;

        case ActionType.DISPLAY_GAME: 
            return AppDisplay.GAME;

        case ActionType.GAME_OVER: 
            return AppDisplay.DISPLAY_GAME_OVER;

    }
}

We hope you find these suggestions valuable. Best wishes.

Answer 3

Answer №2

To properly implement this function, make sure to specify the return type:

const appStateReducer = (state : AppState, action : ActionType): AppState => {
  ...
}

Another option is to declare the return object type as const:

return { ... } as const

Answer 4

To properly implement this function, make sure to specify the return type:

const appStateReducer = (state : AppState, action : ActionType): AppState => {
  ...
}

Another option is to declare the return object type as const:

return { ... } as const

Making sure a value is a specific string in TypeScript

Answer №1

Answer №2

Similar questions

Removing a field from a collection using firebase-admin: Tips and tricks

Understanding the significance of an exclamation point preceding a period

Display captions on react-player videos using an .srt file

Utilize the index of a for loop to manipulate an Angular string

The issue of `Console.log` displaying as undefined arises after subscribing to a provider in Ionic3

typescript is throwing an error because it cannot read the property 'filter' of an undefined variable

Regular expression for the validation of emails using a delimiter

Ensure that the JSON file containing translations is fully loaded prior to proceeding with the loading of the Angular application

The ngOnChanges method fails to exhibit the anticipated modifications in a variable

How to efficiently fetch Redux state through reducers with an action-based approach

creating a JSON array within a function

Building a table with Next.js

Exploring the functionality of window.matchmedia in React while incorporating Typescript

Unfortunately, the utilization of an import statement outside a module is restricted when working with Electron

Traverse the elements of a BehaviorSubject named Layer_Template

Converting <reference path/> directive to ESM import: A step-by-step guide

Function exported as default in Typescript

Transform OKTA Observable into a practical string variable

TS2339: The attribute 'size' is not present on the 'string' data type

Create a Typescript type extension specifically designed for objects with nested arrays of objects