Can you use `keyof` to create a template literal type?

Defined a form schema type example:

type FormSchema = { username: string; settings: { theme: string; language: string } }

Now, trying to define the Form Input type like this:

type FormInput = { id: keyof FormSchema | `${keyof FormSchema}.${string}` }

Encountering an error when setting the template literal part:

Type 'symbol' is not assignable to type 'string'

UPDATE:

Made a syntax error in my initial post apologies for that. Here is the actual code with the issue:

export type FormSection<
  FormSchema = { [key: string]: any | { [key: string]: any } }
> = {
  id: string;
  elements: FormElementGeneric<
    keyof FormSchema | `${keyof FormSchema}.${string}`,
    FormInputTypes,
    FormInputTypesProps
  >[];
};

https://i.sstatic.net/Gneoy.png

Running Typescript version 5.2.2

Answer №1

Not sure which version of TypeScript you're using, but this is compatible with 4.1 and newer.

Here's how you can define the FormInput type:

type FormSchema = { username: string; settings: { theme: string; language: string } }
type FormInput = `${keyof FormSchema & string}` | `${`${keyof FormSchema & string}`}.${string}`;

The FormInput type in this snippet includes the main keys from FormSchema (such as "username" or "settings") and also merged keys (like "settings.theme" or "settings.language"). These concatenated keys are generated using template literal types feature in TypeScript.

You can employ this type by doing the following:

const input1: FormInput = "username"; // Valid
const input2: FormInput = "settings.theme"; // Valid
const input3: FormInput = "invalid"; // Invalid, since "invalid" isn't a valid key

Each of these input variables is given a string that matches a key in FormSchema or a combined string of keys.

Note: If the string doesn't align with any of these scenarios, TypeScript will issue an error to ensure your code's type safety.

For more information, check out the Documentation

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 trouble deleting a component from an array in React?

I am facing an issue with my array and component functions. Each component has a handleRemove function that is supposed to remove the selected component from the array. However, the function is not working as expected. Instead of deleting just the selected ...

The distinction between <Type>function and function name():Type in TypeScript is essential to understand the various ways

function retrieveCounter(): Counter { let counter = <Counter>function (start: number) { }; counter.interval = 123; return counter; } Upon inspection of line 2 in the code snippet above, I am left wondering why I am unable to use function ...

Tips for ensuring session token verification remains intact upon reloading

I am currently in the process of developing a website using the Next.js framework and I am seeking advice on how to prevent the reload effect that occurs when transitioning from the login page back to the main page for just a fraction of a second. Below i ...

Redux - a method of updating state through actions

Hello, I am currently working on developing a lottery system and I have a question regarding the best approach to modify state using action payloads. Let's consider the initial state: type initialCartState = { productsFromPreviousSession: Product[ ...

Turn off TypeScript's type validation during production builds

For my petite project, I am utilizing Next.js with TypeScript. A thought has been lingering in my mind lately: is there a way to turn off the types validity checks while executing npm run build? Since the type checking occurs during npm run dev, it seems ...

Ways to develop a dynamic Promise-returning Function

I find myself in a situation where I am aware of the type of data that will be returned when making a request to an API. Here is the function I have: const fetchData = async (url: string, options?: Object): Promise<any> => { const res = await f ...

Tips for building an effective delete function in Angular for eliminating a single record from a table

I've been working on creating a method to delete an employee by their ID, and I've tried various approaches in my VS Code. Unfortunately, all of them have resulted in errors except for this specific method. Whenever I click on the delete button, ...

"Navigating through events with confidence: the power of event

Imagine I am developing an event manager for a chat application. Having had success with event maps in the past, I have decided to use them again. This is the structure of the event map: interface ChatEventMap { incomingMessage: string; newUser: { ...

Having trouble with Angular 2's Output/emit() function not functioning properly

Struggling to understand why I am unable to send or receive some data. The toggleNavigation() function is triggering, but unsure if the .emit() method is actually functioning as intended. My end goal is to collapse and expand the navigation menu, but for ...

Inserting a pause between a trio of separate phrases

I am dealing with three string variables that are stacked on top of each other without any spacing. Is there a way to add something similar to a tag in the ts file instead of the template? Alternatively, can I input multiple values into my angular compo ...

Angular loop is unable to detect changes in the updated list

My Angular application is facing a peculiar issue that I can't seem to figure out. // Here are the class attributes causing trouble tenants: any[] = []; @Input() onTenantListChange: EventEmitter<Tenant[]>; ngOnInit(): void { this. ...

The Angular4 HTTP POST method fails to send data to the web API

Whenever I make a http post request, it keeps returning an error message saying "data does not pass correctly". I have tried passing the data through the body and also attempted using json.stringify(). Additionally, I experimented with setting the content ...

Issue with ngClass not updating during Route Event

I am using a bottomNavigation component that changes its style to indicate which route we are currently on. Below is the template for the bottom-navigation: class="menu-icon" [ngClass]="{ 'active-item': buttonActivated.value == '/my-goa ...

Customizing page layout for pages wrapped with higher-order components in TypeScript

Looking to add a layout to my page similar to the one in this link: layouts#per-page-layouts The difference is that my page is wrapped with a HOC, so I tried applying getLayout to the higher order component itself like this: PageWithAuth.getLayout Howev ...

Is there a way to modify the id parameter in the URL using Angular 2's ActivatedRoute?

How can I modify a parameter in the URL without altering the overall address? https://i.stack.imgur.com/LOd4T.png This is the TypeScript code that I currently have: onRowClicked(event: any) { let currentIdPerson = event.data.IdPerson; } I am trying ...

Tips for iterating through nested objects with a for loop

Struggling with validations in an Angular 5 application? If you have a form with name, email, gender, and address grouped under city, state, country using FormGroupname, you might find this code snippet helpful: export class RegistrationComponent implemen ...

Avoid automatic restart of NestJS server upon modifying specific directories

When running my application in watch mode using the nest start --watch command, the server automatically restarts whenever a source file is changed. While this behavior is expected, I am looking for a way to exclude certain directories or files from trigg ...

Ensuring data types for an array or rest parameter with multiple function arguments at once

I am looking for a way to store various functions that each take a single parameter, along with the argument for that parameter. So far, I have managed to implement type checking for one type of function at a time. However, I am seeking a solution that al ...

Pausing repetitive HTTP requests in an Angular 6 project within a do while loop

While waiting for the completion of one API call, I am recursively consuming an external API. The http calls are being made using import {HttpClient} from '@angular/common/http' As a newcomer to the framework, there may be something wrong in the ...

Delete element from the array upon removal from the AutoComplete component

I am facing a challenge with the Material UI AutoComplete component in my project. The issue arises when I try to update the state of the associateList after clearing a TextField. Additionally, I would appreciate any guidance on how to handle removing an ...