What is the correct way to invoke a function that accepts a combination of specific string values when all I have is a regular string?

Within the TypeScript function declaration provided below, the parameter type alignment consists of unioned literals.

function printText(s: string, alignment: "left" | "right" | "center") {
  // ...
}

As per the documentation on literals, a variable of type string cannot be assigned to alignment directly because it strictly needs to match one of "left", "right", or "center".

The docs suggest using a type assertion, for example:

printText("Test", printerConfig.textAlignment as "left");

An alternative approach could be:

const printerConfig = { textAlignment: "left" } as const;

printText("Test", printerConfig.textAlignment);

Now consider this scenario:

  1. The printText function is part of a library and its source code cannot be modified.
  2. I receive a printerConfig object as input or need to extract it from a JSON configuration file.
  3. The textAlignment property in printerConfig is of type string.

How would I go about invoking the printText function?

typescript

Answer №1

It would be prudent to validate the textAlignment before calling printText, especially in cases where the alignment value may not make sense or the input data is unreliable.

Prior to passing the textAlignment parameter, ensure that it meets the required criteria and throw an error if it does not.

// Check the validity of textAlignment before proceeding
const { textAlignment } = printerConfig;
if (textAlignment !== 'left' && textAlignment !== 'right' && textAlignment !== 'center') {
  throw new Error(`Invalid textAlignment: ${textAlignment}`);
}
printText("Test", textAlignment);

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

Can anyone tell me the best way to access the name attribute of an HTML element in TypeScript?

Currently, my code is utilizing the name attribute to verify whether the user has entered information in a specific field and validating the input. However, I am facing an issue where the submit button remains active even if there are empty fields presen ...

javascripthtmlangulartypescript

What is the process for declaring a set in typescript?

In the documentation on basic types for Typescript, it explains using Arrays as a primitive type I am interested in the syntax: const numbers: string[] = [] How can I achieve the same with a set? ...

typescript

Trigger the rowContextMenu in Tabulator Table by clicking a Button

Is there a way to add a button at the end of a table that, when clicked, opens a rowContextMenu below the button? Additionally, can the rowContextMenu pop up when right-clicking anywhere on the row? I have attempted some solutions without success. Here is ...

javascripttypescripttabulator

Extending State Interface in ReactJs and Typescript: A Step-by-Step Guide

I have the following: interface EditViewState<T> { entity?: T; } abstract class EditView<T, P, S> extends React.Component<P, EditViewState<T> & S> { constructor(props: P, ctx: any) { super(props, ctx); this. ...

javascriptreactjstypescript

Can HTML variables be accessed in lines of code before they are declared in HTML?

In line 1 of my code, I am trying to access the rowData variable which is declared in the second HTML line. However, I keep getting the error message "Property 'rowData' does not exist on type 'AppComponent'" for that line. Strangely, t ...

htmlangulartypescriptprimeng

Ensure that the query value remains constant in Express.js

Issue: The query value is changing unexpectedly. // url: "http://localhost:4000/sr?q=%C3%BCt%C3%BC" export const search = async (req: Request, res: Response) => { try { const query = String(req.query.q) console.log("query: &quo ...

node.jstypescriptexpress

Typescript issue when a value is possibly a function or null

I have defined a type called StateProps with the following properties type StateProps = { isPending: boolean, asyncFn: (...args: any[]) => void | null } To initialize, I set up an initialState variable where the asyncFn property is initially s ...

typescript

Encountering: error TS1128 - Expecting declaration or statement in a ReactJS and TypeScript application

My current code for the new component I created is causing this error to be thrown. Error: Failed to compile ./src/components/Hello.tsx (5,1): error TS1128: Declaration or statement expected. I've reviewed other solutions but haven't pinpointed ...

javascriptreactjstypescript

Exploring Angular routing with parameters and extracting parameter values

In an email, a user will click on a link that looks like this: do-something/doSomething?thing=XXXXXXXXXXX I'm trying to figure out how to define the route in the router and subscribe to get params. Here's what I currently have set up in the rout ...

angulartypescriptangular-router

Deactivating PrimeNG checkbox

I am currently facing an issue with disabling a PrimeNG checkbox under certain conditions by setting the disabled property to true. However, whenever I click on the disabled checkbox, it refreshes the page and redirects me to the rootpage /#. To troublesh ...

angulartypescriptcheckboxprimengprimeng-checkbox

Is the autoIncrement property missing from the IDBObjectStore Interface in Typescript 1.8 lib.d.ts file?

Upon examining the specifications on various pages, it is evident that there is a specified read-only property named "autoIncrement" within the IDBObjectStore: https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore https://developer.mozilla.org/ ...

typescriptindexeddb

Intellisense from @reduxjs/toolkit is not showing up in my VS Code editor

My experience with vscode is that intellisense does not recognize @reduxjs/toolkit, even though the code itself is functioning correctly. I have already installed the ES7+ React/Redux/React-Native snippets extension from here. Here are a couple of issues ...

reactjstypescriptvisual-studio-codeautocompleteintellisense

An effective approach to positioning HTML elements at specific X and Y coordinates

I have an innovative project idea! The concept is to enable users to create points by clicking on the display. They can then connect these points by clicking again. However, I am facing a challenge when it comes to creating HTML elements at the exact loc ...

javascripthtmltypescriptmouseevent

The functionality for jest mocking with the Google Secret Manager client is currently not working as

i am currently working on retrieving secrets from GCP Secret Manager using the code snippet below: import { SecretManagerServiceClient } from '@google-cloud/secret-manager'; const getSecrets = async (storeId) => { try { const client = n ...

node.jstypescriptunit-testingjestjsgoogle-secret-manager

Creating a unified environment variable for Angular 2 and ASP.NET Core MVC: A comprehensive guide

In my ASP.NET Core MVC project, I am utilizing an Angular 2 application. Both the Angular 2 app and the Startup.cs file contain code that is specific to different environments. For example, using http://localhost as the web service URL during development ...

angulartypescriptenvironment-variablesasp.net-core-mvcvisual-studio-2017

Setting angular variables by assigning form values

My current reactive form setup looks like this: this.editform = new FormGroup({ 'username' : new FormControl(null,[Validators.required]), 'password' : new FormControl(null,[Validators.required]), 'full_name' : ne ...

angulartypescriptangular-reactive-forms

Error TS2488 in React TypeScript: The data type 'IStateTypes' is required to have a method called '[Symbol.iterator]()' that returns an iterator

At the moment, I am working on implementing a global state in React Hooks but have run into an issue. https://i.stack.imgur.com/DN83K.png The current problem I'm facing is with [Symbol.iterator](. I am uncertain about how to resolve this as I am in ...

reactjstypescriptreact-hooks

Generate a fresh array from the existing array and extract various properties to form a child object or sub-array

I am dealing with an array of Responses that contain multiple IDs along with different question answers. Responses = [0:{Id : 1,Name : John, QuestionId :1,Answer :8}, 1:{Id : 1,Name : John, QuestionId :2,Answer :9}, 2:{Id : 1,Name : John, QuestionId :3,An ...

javascriptjqueryarraystypescriptspfx

Navigating session discrepancies: Combining various social media platforms using Next.js and NextAuth

Recently, I ran into a problem where, upon logging in with Google, I found myself needing access tokens for Twitter and LinkedIn to send out API requests. The issue came about when NextAuth modified my session data to be from either Twitter or LinkedIn ins ...

typescriptnext.jsnext-auth

Unable to resolve external modules in TypeScript when using node.js

I wanted to integrate moment.js into my node application, so I proceeded by installing it using npm: npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adc0c2c0c8c3d9ed9f8399839d">[email protected]</a> J ...

node.jstypescriptmomentjscommonjs