TypeScript type assertions doesn't fail on incorrect value

Question

We're using the library msal and are trying to convert our javaScript code to TypeScript.

The following picture indicates that TS correctly knows the type expected for cacheLocation . This can be either the string localStorage , the string sessionStorage or undefined . However, when trying to wire this together with a variable that holds one of the expected values it fails:

The issue would be fixed by using the following syntax. The only problem in this case is that a wrong value is not flagged as incorrect:

When reading the TS docs on Type Assertions it says that this is by design and the developer knows that the type will be correct. I did however expect TS to throw an error if an unknown value would've been used.

Is there a better way for doing this? Or is this simply how it's done? Sorry if this is a stupid question, I'm still learning TS.

Code

import * as config from 'src/app-config.json'
import { Configuration, CacheLocation } from 'msal'

const test = 'wrongValue'

export function MSALConfigFactory(): Configuration {
  return {
    auth: {
      clientId: config.auth.clientId,
      authority: config.auth.authority,
      validateAuthority: true,
      redirectUri: config.auth.redirectUri,
      postLogoutRedirectUri: config.auth.postLogoutRedirectUri,
      navigateToLoginRequestUrl: true,
    },
    cache: {
      cacheLocation: test as CacheLocation,
      storeAuthStateInCookie: false,
    },
  }
}

Answer 1

I think it's just a typo: in your first image you have LocalStora n ge (note the extra n)

Answer 2

Type '"localStorange"' is not assignable to type '"localStorage" | "sessionStorage" | undefined'

Storange

TypeScript is very good at catching simple typos, but not so good at telling you what exactly is wrong.