Is it possible to utilize a template literal with a variable as an object key?

Question

Is it possible to utilize a template literal with a variable as an object key?

I tried to run the following code snippet but encountered an unexpected error:

interface Person {
  firstName: string
}

const property: 'Name' = 'Name'

const zack: Person = {
  [`first${property}`]: 'Zack'
}

An error is thrown when creating zack:

Property 'firstName' is missing in type '{ [x: string]: string; }' but required in type 'Person'.

Further exploration revealed that any string concatenation seems to cause issues:

type EqualsFirstName = 'firstName'

const value: EqualsFirstName = 'first' + 'Name'

Unfortunately, that approach doesn't work either.

typescript template-literals

Answer 1

Answer №1

The TypeScript compiler is known for its strict evaluation of mapped types, and there are certain limitations to be aware of. One workaround is to assert the type explicitly:

const zack: Person = {
    [`first${property}` as 'firstName']: 'Zack'
}

However, this approach can lead to runtime failures, as demonstrated in the following code snippet:

const property: 'Foo' = 'Foo'

const zack: Person = {
  [`first${property}` as 'firstName']: 'Zack'
}

An alternative, albeit somewhat cumbersome, option is to assert the type Person using as, with an intermediate assertion to unknown:

const zack = {
  [`first${property}`]: 'Zack'
} as unknown as Person

It is advisable to avoid relying on this notation and instead opt for a more TS compiler friendly approach. While technically valid, this construct may introduce unnecessary complexity and potential issues at runtime.

Answer 2

The TypeScript compiler is known for its strict evaluation of mapped types, and there are certain limitations to be aware of. One workaround is to assert the type explicitly:

const zack: Person = {
    [`first${property}` as 'firstName']: 'Zack'
}

However, this approach can lead to runtime failures, as demonstrated in the following code snippet:

const property: 'Foo' = 'Foo'

const zack: Person = {
  [`first${property}` as 'firstName']: 'Zack'
}

An alternative, albeit somewhat cumbersome, option is to assert the type Person using as, with an intermediate assertion to unknown:

const zack = {
  [`first${property}`]: 'Zack'
} as unknown as Person

It is advisable to avoid relying on this notation and instead opt for a more TS compiler friendly approach. While technically valid, this construct may introduce unnecessary complexity and potential issues at runtime.

Answer 3

Answer №2

Perhaps this clever workaround will succeed

interface Individual {
  firstName: string
}

const attribute: 'Name' = 'Name'
type SameAsFirstName = 'firstName'

const individual1: Individual = {
  [`first${attribute}` as SameAsFirstName]: 'Individual1'
}

Answer 4

Perhaps this clever workaround will succeed

interface Individual {
  firstName: string
}

const attribute: 'Name' = 'Name'
type SameAsFirstName = 'firstName'

const individual1: Individual = {
  [`first${attribute}` as SameAsFirstName]: 'Individual1'
}

Is it possible to utilize a template literal with a variable as an object key?

Answer №1

Answer №2

Similar questions

Checking the interceptor response in NestJs testing

What is the best way to retrieve data from MySQL for the current month using JavaScript?

Tips for obtaining the "inner type" of a particular "instance" in TypeScript's generics

Retrieve a collection of Firestore documents based on an array of unique identifiers

The functionality of provideRouter and RouterConfig cannot be located in the updated @angular/router version 3.0.0-alpha.3^

Concerning the utilization of the <mat-toolbar> element within Angular

Enhancing supertest functionality with Typescript

The current version of Firebase functions is not reflecting the most recent modifications when running "firebase serve"

Send the function to the directive

Unable to retrieve the specific value associated with a key from JSON data

Can you explain the distinction between Reflect.getMetadata and Reflect.getOwnMetadata?

Utilize ServersideProps to input data into the server-side

Unable to capture Metamask Errors

Reacting to the surprise of TS/JS async function behaving differently than anticipated

Updating a behavior object array in Angular 5 by appending data to the end

Issue with handsontable numbro library occurs exclusively in the production build

Node.js built-ins require shims, while global variable names are absent

Pause and anticipate the subscription within the corresponding function

The module "node_modules/puppeteer/lib/types" does not contain the export "Cookie"

The 'src' properties in nextjs/image are of different types and therefore cannot be used interchangeably