KwintenP KwintenP - 1 year ago 109
TypeScript Question

Typescript type safety in switch case statements

I'm working with Redux and I'm trying to make my reducers type safe. I found some code example from the ngrx-store/example app where they perfectly succeed in doing this. (

While integrating this in my own project, I noticed something strange, which I cannot explain. Check the following code sample (some comments inline):

// Action has a type and payload property
interface Action {
type: string;
payload?: any;

// Here I declare the action types as plain strings
const FIRST = "FIRST";
const SECOND = "SECOND";

// I create classes for every action with there respective types
class FirstAction implements Action {
public type = FIRST;
payload: { id: number };

public constructor(id: number) {
this.payload = { id };

class SecondAction implements Action {
public type = SECOND;

public constructor() { }

// Create a union type
type Actions = FirstAction | SecondAction;

// Use the union type as type parameter in my function
function test(action: Actions): void {
switch (action.type) {
case FIRST:
// compiler will complain it cannot find the payload
// property on Actions
let temp =;
case SECOND:
// empty

If I replace the definition of the FIRST and SECOND properties into the following, it does work.

export function type<T>(label: T | ''): T {
return <T>label;

const FIRST = type("FIRST");
const SECOND = type("SECOND");

As far as I can see, the type function only casts the string back to a string. Why does the code work with calling the
function but not when declaring the strings immediately?

Here's a typescript playground example where you can just comment the definitons in or out (first with the working version).

Answer Source

It's because the TSC compiler cannot distinct the 2 values:

const FIRST = "FIRST";
const SECOND = "SECOND";

It's both of type string, thus TSC doesn't know which belongs to what. You have to give it a type, and that's what you're doing by casting it with your type function.

But it's easier if you write it as follows:

const FIRST: "FIRST" = "FIRST";

Typescript playground

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download