Is it possible to utilize types as constants in a switch statement?

Question

Is it possible to utilize types as constants in a switch statement?

In my file called checkoutTypes.ts, I have defined some checkout types like this:

export type CheckoutInvoiceAddressSection = "InvoiceAddress";
export type CheckoutDeliveryAddressSection = "DeliveryAddress";
export type CheckoutDeliveryAndReviewSection = "DeliveryAndReview";

export type CheckoutSection = CheckoutInvoiceAddressSection | CheckoutDeliveryAddressSection | CheckoutDeliveryAndReviewSection;

In a function within a different file, I intend to utilize these types for matching cases in a switch() statement:

import type { CheckoutInvoiceAddressSection, CheckoutDeliveryAddressSection, CheckoutDeliveryAndReviewSection, CheckoutSection } from "~/types/checkoutTypes";

interface Props {
  identifier: CheckoutSection,
}
const props = defineProps<Props>();

const isSectionCompleted = computed(() => {
  switch (props.identifier) {
    case CheckoutInvoiceAddressSection:
      return checkoutStore.getActiveSection !== CheckoutInvoiceAddressSection;
    case CheckoutDeliveryAddressSection:
      return checkoutStore.getActiveSection === CheckoutDeliveryAndReviewSection;
  }
});

However, an error is appearing:

ReferenceError: CheckoutInvoiceAddressSection is not defined

. on the line with

case CheckoutInvoiceAddressSection

. Can type definitions not be used for comparison with a variable, or am I overlooking something else?

typescript vue.js

Answer 1

Answer №1

In addition to @jonrsharpe's point, it is important to note that TypeScript does not persist at runtime. One approach you can take is to export your values as constants and extract the desired types from them like so:

export const CheckoutInvoiceAddress = "InvoiceAddress";
export const CheckoutDeliveryAddress = "DeliveryAddress";
export const CheckoutDeliveryAndReview = "DeliveryAndReview";

export type CheckoutInvoiceAddressType = typeof CheckoutInvoiceAddress;
export type CheckoutDeliveryAddressType = typeof CheckoutDeliveryAddress;
export type CheckoutDeliveryAndReviewType = typeof CheckoutDeliveryAndReview;

export type CheckoutSectionType = CheckoutInvoiceAddressType | CheckoutDeliveryAddressType | CheckoutDeliveryAndReviewType;

This enables access to both the values and the associated types.

import { CheckoutInvoiceAddress, CheckoutDeliveryAddress, CheckoutDeliveryAndReview, CheckoutSectionType } from "~/types/checkoutTypes";

interface Props {
  identifier: CheckoutSectionType;
}
const props = defineProps<Props>();

const isSectionComplete = computed(() => {
  switch (props.identifier) {
    case CheckoutInvoiceAddress:
      return checkoutStore.getActiveSection !== CheckoutInvoiceAddress;
    case CheckoutDeliveryAddress:
      return checkoutStore.getActiveSection === CheckoutDeliveryAndReview;
  }
});

If you are interested, you may want to explore enums. The use of a 'const enum' is transpired into constant values, allowing for functionalities such as:

const enum EDirection {
  Up,
  Down,
  Left,
  Right,
}

// Utilizing the enum in a function parameter
function move(direction: EDirection) {}

move(EDirection.Left);

Answer 2

In addition to @jonrsharpe's point, it is important to note that TypeScript does not persist at runtime. One approach you can take is to export your values as constants and extract the desired types from them like so:

export const CheckoutInvoiceAddress = "InvoiceAddress";
export const CheckoutDeliveryAddress = "DeliveryAddress";
export const CheckoutDeliveryAndReview = "DeliveryAndReview";

export type CheckoutInvoiceAddressType = typeof CheckoutInvoiceAddress;
export type CheckoutDeliveryAddressType = typeof CheckoutDeliveryAddress;
export type CheckoutDeliveryAndReviewType = typeof CheckoutDeliveryAndReview;

export type CheckoutSectionType = CheckoutInvoiceAddressType | CheckoutDeliveryAddressType | CheckoutDeliveryAndReviewType;

This enables access to both the values and the associated types.

import { CheckoutInvoiceAddress, CheckoutDeliveryAddress, CheckoutDeliveryAndReview, CheckoutSectionType } from "~/types/checkoutTypes";

interface Props {
  identifier: CheckoutSectionType;
}
const props = defineProps<Props>();

const isSectionComplete = computed(() => {
  switch (props.identifier) {
    case CheckoutInvoiceAddress:
      return checkoutStore.getActiveSection !== CheckoutInvoiceAddress;
    case CheckoutDeliveryAddress:
      return checkoutStore.getActiveSection === CheckoutDeliveryAndReview;
  }
});

If you are interested, you may want to explore enums. The use of a 'const enum' is transpired into constant values, allowing for functionalities such as:

const enum EDirection {
  Up,
  Down,
  Left,
  Right,
}

// Utilizing the enum in a function parameter
function move(direction: EDirection) {}

move(EDirection.Left);

Is it possible to utilize types as constants in a switch statement?

Answer №1

Similar questions

Modify the dropdown menu title dynamically based on the selection made in Angular

Endless cycle of socksjs in vue.js

Lexicaljs utilizes debounce to receive editor state JSON and text content in a React project

Using Vue.js to set and retrieve changes on a range slider with v-model

Guide to configuring the overflow-y property for individual cells or rows in a Bootstrap-Vue table

What is the process for integrating vis.js into a Vue.js application?

"Exploring the possibilities of integrating Typescript into Material-UI themes: A step-by

When it comes to rendering components in React using multiple ternary `if-else` statements, the question arises: How can I properly "end" or "close" the ternary statement?

Previewing images with Dropzone through extending file types

Tips for implementing a condition such as "greater than or equal to" in the filtering search feature in Vue.js

Unpacking objects in Typescript

Issue: Using the command 'typings search' successfully locates a package, however, when attempting to install it using 'typings install', the process fails

Creating a Personalized Color Palette Naming System with Material UI in TypeScript

Communication between child and parent components in Vue.js is an essential feature

Displaying or concealing list elements in Angular 6

Problem with loading image from local path in Angular 7

Angular HttpClient mapping causes the removal of getters from the target object

Link to the Vue Bootstrap Toast Message

Error encountered with laravel and vue.js: Module not found

What are the best ways to integrate markdown into my Vue.js projects?