Detecting if a string is in sentence or title case with a typeguard

When setting the sameSite property of a cookie, it must be either Strict, Lax, or None. However, the package I'm using uses lowercase values for this attribute. Therefore, I need to adjust the first letter of the string:

let sentenceCaseSameSite: "None" | "Lax" | "Strict" | undefined
if (
    (sessionCookie.attributes.sameSite &&
        sessionCookie.attributes.sameSite === "strict") ||
        sessionCookie.attributes.sameSite === "lax" ||
        sessionCookie.attributes.sameSite === "none"
    ) {
        const firstLetter =
            sessionCookie.attributes.sameSite[0].toUpperCase()
        const sentenceCaseSameSite = (firstLetter +
            sessionCookie.attributes.sameSite.slice(1)) as
            | "None"
            | "Lax"
            | "Strict"
    }

This approach involves using 

as | "None" | "Lax" | "Strict"
, but it doesn't feel like the optimal solution.

Is there a method to capitalize the initial letter of the string while maintaining type safety?

typescript

Answer №1

When working with the code below, it is important to note that Capitalize must be utilized within the cap function in order for TypeScript to recognize that x[0].toUpperCase() + x.slice(1) returns a capitalized type. The intention of TypeScript developers was for users to create a function like cap, which would then require a Captialize utility to define the return type.

A typeguard for L has been implemented on x.sameSite, enabling it to be passed safely to the cap function, resulting in the correct typing for sessionCookie.

TypeScriptPlayground

type L = "none" | "lax" | "strict";
function isL(s:any): s is L {
    return ["none","lax","strict"].includes(s);
}
function cap(x:L) {
    return x[0].toUpperCase() + x.slice(1) as Capitalize<L>;
}
declare const x: { sameSite: string | undefined };
if (isL(x.sameSite)){
    let sessionCookie = cap(x.sameSite); // type is "None" | "Lax" | "Strict"
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the relationship between Typescript, RxJS, Ajax, undefined values

This particular question stands out due to the fact that despite similar issues being previously addressed, none of the existing solutions have proven effective. The problem at hand is as follows: There's a Typescript class that initiates an RxJS.aja ...

ajaxtypescriptrxjs

Switching cell icon when clicked - A step-by-step guide

I have a situation in ag-grid where I need to update the icon of a button in a cell when it is clicked to indicate progress and then revert back to its original state upon completion of the action. Below is the code snippet: my-custom.component.ts < ...

angulartypescriptag-gridag-grid-angular

Issue with Loosing Focus in React TextInput when typing the letter "S"

My TextInput is acting strangely - it loses focus only when I type the letter s. All other letters work fine. <FormControl key={"1"} sx={{ m: 1 }} variant="outlined" onChange={handleFilterValueChange}> <InputLabel htmlFor=& ...

reactjstypescript

Experimenting with a TypeScript function containing a subscription operation

Currently, I am experimenting with Jasmine/Karma while working on an Angular 4 project. The issue I'm facing involves testing a function that seems to have trouble setting the 'name' property: https://i.stack.imgur.com/3q49i.jpg The assign ...

angulartypescripttestingjasminekarma-jasmine

Property does not exist when dispatching in React Redux within componentDidMount

Currently, I am navigating my way through my initial project using React + Redux and have hit a few roadblocks while attempting to dispatch a function in the componentDidMount section. I tried to emulate the Reddit API example project from the Redux docume ...

reactjstypescriptreduxreact-redux

Angular version 6 allows for specifying input types as numbers and displaying two decimal digits after the comma

How can I format user input to display as currency with thousand separators in Angular? <input type="number" (ngModelChange)="calculateSum()" (change)="calculateAmount(invoiceQuota)" [ngModel]="invoiceQuota.controls.grossAmount.value"> I have attem ...

htmlangulartypescriptangular-pipe

Do not directly change a prop's value as it will be replaced when the parent component re-renders. Use v-form instead

I'm currently in the process of developing an app using nuxt along with vuetify 2.x, and I keep encountering a specific error message: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Inste ...

typescriptvue.jsnuxt.jsvuetify.js

What is the best way to connect a toArray function to an interface property?

Consider the following scenario: interface D { bar: string } interface B { C: Record<string, D> // ... additional properties here } const example: B = { C: { greeting: { bar: "hi" } } // ... additional properties here } Now I would like t ...

node.jstypescript

International replacement of external interface exportation

Currently, I am utilizing the @react-native-firebase/messaging library and invoking the method messaging().onNotificationOpenedApp(remoteMessage => ....) I am aiming to replace the property data within the type of remoteMessage in order to benefit from ...

typescripttypescript-typings

Comparing tsconfig.json and tsconfig.build.json: what sets them apart?

Guides like those found at 1 and 2 often recommend having two separate files - tsconfig.json and tsconfig.build.json - at the root level of an NPM monorepo for TypeScript projects. What are the distinctions between these files? Is it possible to consolida ...

typescriptnpmmonorepo

The input elements fail to register the passed-in value until they are clicked on

I am experiencing an issue with my form element that contains a few input fields. Two of these inputs are set to readOnly and have values passed in from a calendar element. Even though the input elements contain valid dates, they still display an error mes ...

reactjstypescriptnext.jsreact-hook-form

Unable to export Interface in Typescript - the specific module does not offer an export named Settings

I am encountering an issue while trying to export/import an interface in Typescript. The error message I receive is causing confusion as I'm unsure of where I went wrong. Uncaught SyntaxError: The requested module '/src/types/settings.ts' ...

javascripttypescriptvue.jsvuejs3vite

Is it feasible to obtain the userId or userInfo from the Firebase authentication API without requiring a login?

Is it feasible to retrieve the user id from Firebase authentication API "email/password method" without logging in? Imagine a function that takes an email as a parameter and returns the firebase userId. getId(email){ //this is just an example return t ...

angulartypescriptauthenticationfirebase-authentication

Challenges with React Event Listener Types

https://i.sstatic.net/cVlpr.png useEffect(() => { const handleEscClose = (e: KeyboardEvent) => { if (e.key === 'Escape') changeVisibility(); }; if (isVisible) document.addEventListener('keydown', handleEscClos ...

reactjstypescript

Issue with Angular 6 auth guard causing logged-in users to remain on a blank page

I came across this answer and am tweaking it to work with my authentication system: Angular 6 AuthGuard However, I'm facing an issue where after successful authentication, instead of redirecting to the specified URL, the auth guard leads to a blank p ...

angulartypescript

Efficiently Parsing FormData in React with TypeScript for Improved Data Formatting

Recently, I've started working with React and Typescript and one of the challenges I'm facing is managing an editable table with default values that can be updated and submitted. The data format for the parameters is crucial as the fields and va ...

reactjstypescriptformsreact-typescriptreact-tsx

Tips for resolving relative child routes in Angular

Routing Configuration const routes: Routes = [ { path: '', loadChildren: './home/home.module#HomeModule' }, { path: 'admin', loadChildren: './admin/admin.module#AdminModule' } ]; Nested Home Routing const ro ...

angulartypescriptangular-routingangular-router

Angular function is executed ahead of the designated schedule

I am working with Angular components that execute two functions during initialization. The first function populates an array, and the second function takes values from that array and calls a service. The issue I am facing is that the second function execu ...

angulartypescriptrxjs

Unable to bring in Angular2 bootstrap function

I am currently setting up a basic Angular 2 (beta 2) app using TypeScript. I have the code for app.ts file taken from Angular's most recent setup guide import {Component, View, bootstrap} from 'angular2/angular2'; @Component({ selector: ...

typescriptangular

Steps to activate a button once the input field has been completed

https://i.sstatic.net/l6mUu.png It's noticeable that the send offer button is currently disabled, I am looking to enable it only when both input fields are filled. Below, I have shared my code base with you. Please review the code and make necessar ...

angulartypescriptformsbootstrap-4bootstrap-modal