Dynamic property Key in TypeScript

Question

Dynamic property Key in TypeScript

Imagine receiving data from a search engine in the following format:

const resultDe = { details_de: "Ein paar Informationen", foo_de:{bar:"barDe"}, code: "1C60" }
const resultEn = { details_en: "Some information", foo_en:{bar:"barEn"} code: "1C60" }

You may be aware of the property names, but some properties have language-specific suffixes like _de or _en. Is there a way to define such data types using TypeScript?

For instance, can we do something like this:

type Result = {
  `details_${lang}`: string;
}

typescript

Answer 1

Answer №1

If you're looking to implement dynamic types in TypeScript, you can utilize mapped types:

type Language = 'de' | 'en'
type Details = {
    [Key in `details_${Language}`]: string
}

const details: Details = { details_en: 'foo', details_de: 'bar' }

Answer 2

If you're looking to implement dynamic types in TypeScript, you can utilize mapped types:

type Language = 'de' | 'en'
type Details = {
    [Key in `details_${Language}`]: string
}

const details: Details = { details_en: 'foo', details_de: 'bar' }

Answer 3

Answer №2

Utilize template literals in Typescript to define types like this:

type LanguageResult<LangCode extends string> = Record<`details_${LangCode}`, string>;

const enResults: LanguageResult<'en'> = {
  details_en: 'test',
};

const enResults: LanguageResult<'de'> = {
  details_en: 'test', // <- Error
};

TypeScript Playground

If the specific strings are unknown, use the broadest type - string - to allow any codes. Example:

type LanguageResult<LangCode extends string = string> = Record<`details_${LangCode}`, string>;

const anyResults: LanguageResult = {
  details_en: 'test',
  details_de: 'test',
};

TypeScript Playground

Answer 4

Utilize template literals in Typescript to define types like this:

type LanguageResult<LangCode extends string> = Record<`details_${LangCode}`, string>;

const enResults: LanguageResult<'en'> = {
  details_en: 'test',
};

const enResults: LanguageResult<'de'> = {
  details_en: 'test', // <- Error
};

TypeScript Playground

If the specific strings are unknown, use the broadest type - string - to allow any codes. Example:

type LanguageResult<LangCode extends string = string> = Record<`details_${LangCode}`, string>;

const anyResults: LanguageResult = {
  details_en: 'test',
  details_de: 'test',
};

TypeScript Playground

Dynamic property Key in TypeScript

Answer №1

Answer №2

Similar questions

Leveraging interfaces with the logical OR operator

Protected class, yet not transferable

How to Use a For Each Loop with Google Maps DrawingManager to Create Polygons?

Issues with type errors in authentication wrapper for getServerSideProps

Efficiently process and handle the responses from Promise.all for every API call, then save the retrieved data

Create a combined string from a structure resembling a tree

Utilizing conditional types for type narrowing within a function's body: A comprehensive guide

To switch to desktop mode, double click; for mobile view, just tap once

Using Typescript: Defining a function parameter that can be either of two interfaces

Create Angular file structures effortlessly using a tool similar to Rails scaffold

I'm currently endeavoring to integrate SignalR into my Vue project and encountering an issue

What is the process for importing the TokenExpiredError that is thrown by the verify function in jsonwebtoken?

Tips for leveraging the functions service in Next.js for better code reusability

I'm having trouble with the calculator, unable to identify the issue (Typescript)

Defining a type with limited knowledge: if you only have one key in the object

The cucumber_report.json file will not update to reflect the most recent test steps

A unique column in the Foundry system that utilizes function-backed technology to calculate the monthly usage of engines over a

Challenges encountered while using TypeScript to implement the CSS breakpoint mixin

My worker threads seem to be flying under the radar

Is it possible to utilize instanceof to verify whether a certain variable is of a class constructor type in TypeScript?