In Typescript, you can build ultra-strict type definitions for your

If I define a custom type like this:

type SmallCapsString = string

And then utilize it in a function as shown below:

function displaySmallCapsString(input: SmallCapsString) {
  ...
}

displaySmallCapsString('UPPERCASE')

The code above compiles without issues and runs successfully, because 'UPPERCASE' is of type string, which matches SmallCapsString

I am wondering if there is a way to trigger a TypeScript error that says

type string does not match SmallCapsString
This would require me to convert every string input using a function similar to the one below before passing it to displaySmallCapsString:

function stringToSmallCaps(input: string): SmallCapsString {
  return input.toLowerCase() as SmallCapsString
}

Answer №1

Utilize a custom branded type:

type LowercaseString = string & { __brand: 'lower' };


function stringToLowercase(input: string): LowercaseString {
  return input.toLowerCase() as LowercaseString
}

function displayLowercaseString(input: LowercaseString) {
}

const uppercaseString = 'UPPERCASE';
displayLowercaseString(uppercaseString) // incorrect 
displayLowercaseString(stringToLowercase(uppercaseString)) // correct

Playground

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

Having issues with my *ngFor loop in Angular 11. Any assistance in resolving this problem would be greatly appreciated

Utilizing *ngFor, I am sending an array from typescript to the HTML page. kitUser: any=[]; constructor(private service: AdminService) { } ngOnInit() { this.service.getKSignUps().subscribe(res=>{ this.kitUser=res; console.log(this. ...

Vetur is experiencing issues with template functionality, such as not properly checking data and methods

I have incorporated the vetur extension into my Visual Studio Code for a Vue project using TypeScript. I recently discovered that vetur has the capability to perform type checks within the template tag for props, methods, and even variables. However, in ...

Error in TypeScript: The type 'Color' cannot be assigned to the type '"default" | "primary" | "secondary"'

Currently, I am utilizing MUI along with typescript and encountering the following issue. It seems like I may be overlooking a fundamental concept here but unfortunately cannot pinpoint it. Error: Type 'Color' is not assignable to type '&quo ...

When I try to install dependencies with Hardhat, the "Typechain" folder does not appear in the directory

After installing all the dependencies, I noticed that the "typechain" folder was missing in the typescript hardhat. How can I retrieve it? Try running npm init Then, do npm install --save-dev hardhat Next, run npx hardaht You should see an option to se ...

What is the proper way to specify the type for a <video> element reference in React when utilizing Typescript?

I have been experimenting with controlling the play/pause state of a video in React.js using ref's. My code functions correctly but I am encountering tslint errors that I am currently trying to diagnose: function App() { const playVideo = (event:a ...

Incorporate any enum value into a Typescript interface

I'm working with a Typescript interface export interface MyInterface { valid: boolean; resourceType: MyEnum; message: string; } As well as an enum enum MyEnum { 'a', 'b', 'c' } Is there a way to allow the ...

Methods for populating an object with Interface type and returning it

This is my function that populates an object based on interface type: public _fillAddModel<T>(lessonId: number, studyPeriodId: number, confirmed: boolean = false): T { let data: T; data = { lesson: this.substitution.lessonNumber, ...

How to instantiate an object in Angular 4 without any parameters

Currently, I am still getting the hang of Angular 4 Framework. I encountered a problem in creating an object within a component and initializing it as a new instance of a class. Despite importing the class into the component.ts file, I keep receiving an er ...

What sets apart calling an async function from within another async function? Are there any distinctions between the two methods?

Consider a scenario where I have a generic function designed to perform an upsert operation in a realmjs database: export const doAddLocalObject = async <T>( name: string, data: T ) => { // The client must provide the id if (!data._id) thr ...

Sending data from parent component to change MUI Button color (React with typescript)

Recently, I've been integrating MUI (v5) into a create-React-App with typescript. I have a custom theme set up as well. My goal is to develop a MyButton Component that accepts a buttonType prop (of type string), which corresponds to my theme.palette, ...

how to retain the state value as a number and enable decimal input in a TextField component in React

Currently working on a project using React, Material UI, and TypeScript. I need to enable decimal values in a TextField while ensuring that my state value remains a number type instead of a string. export default function BasicTextFields() { const [value ...

Angular's custom reactive form validator fails to function as intended

Struggling to incorporate a customized angular validator to check for date ranges. The validator is functioning correctly and throwing a validation error. However, the issue lies in the fact that nothing is being displayed on the client side - there are n ...

Completely turn off type checking for all files within the *.test.* extension, including imported components

"exclude": ["*.test.ts", "*.test.tsx"] in the tsconfig file only stops type checking for test-specific types like describe, it, expect, etc. However, errors still appear for imported Components in every test file in vscode. The only way to remove these err ...

How to Halt or Keep Running a For Loop in Angular 2/4?

for (let index = 0; index < this.selectedFileType[i].count; index++) { this.modal.show(); } My goal is to display the modal each time it enters the loop, and then proceed with the loop after closing the modal. ...

Is there a way to extract data from a single line?

In my code, I have a simple object retrieved like this: getSelectedRecipients(event) { this.aliasesService.getRecipients(event.nr) .subscribe( res => { this.recipients = res; this.isVisible = true; }, err =&g ...

Is it possible to retrieve the precise key currently indexed within type declaration?

I am currently working on developing a simple type that would require a nested object key to reference the outer level. For better understanding, let's take an example: const obj = { foo: { name: 'bar', ref: 'foo' // & ...

Tips for ensuring that functions can pass arguments with uniform overloads

I need to create a function that passes its arguments to another function, both with the same overloads. function original (a: number): boolean; function original (a: string, b: string): boolean; function original (a: number | string, b?: string): boolean ...

"An issue arises as the variable this.results.rulesFired is not properly

I am faced with a set of table rows <tr *ngFor="let firedRule of splitRules(results.rulesFired); let rowNumber = index" [class.added]="isAdd(firedRule)" [class.removed]="isRemove(firedRule)" ...

When the variable type is an interface, should generics be included in the implementation of the constructor?

Here is a code snippet for you to consider: //LINE 1 private result: Map<EventType<any>, number> = new HashMap<EventType<any>, number>(); //LINE 2 private result: Map<EventType<any>, number> = new HashMap(); When the ...

Challenges with importing and using jspdf and autotable-jspdf in Angular 8

Issue with Generating PDF Using Angular 8, JSPDF, and JSPDF-AutoTable I am facing a challenge with exporting/generating a PDF based on an HTML grid. I need to make some DOM changes with CSS, remove toggle buttons, alter the header, etc. However, all the s ...