Guide on retrieving the interface property name or key name as a string in Typescript

Question

Guide on retrieving the interface property name or key name as a string in Typescript

Currently, I am utilizing the API of Slack and encountering situations where I send JSON requests containing strings that return as property names later on.

I want to create an interface where I can send one of its property names as a string and receive the returning object with correct typing without relying on "magic strings" or constants that need to stay synchronized with the interface.

Here's a quick example:

// Sending out this request to Slack
const request = {
    actionId: "specialProperty"
};

// Later, Slack might return this object
const incomingWebhook = {
    specialProperty: "Value I want to read"
}

I can easily define typing for this using an interface

interface SpecialPropertyInterface {
  specialProperty: string;
}

My concern is that this interface is tied to the string I send out.

Is there a way for me to extract the key/property "specialProperty" from my SpecialPropertyInterface as a string?

typescript

Answer 1

Answer №1

I was able to find a solution to my problem using the "keyof" method. Although not perfect, it allowed me to obtain a type-safe string based on an interface property.

Since I had two nested keys, I decided to separate them into two interfaces and utilize keyof to retrieve the string representation of each property.

export interface HoursBlock {
  hours: HoursBlockAction;
}

export interface HoursBlockAction {
  hoursAction: {
    // eslint-disable-next-line camelcase
    selected_option: {
      value: string;
    };
  };
}

...

// The following strings will only be valid if they correspond to the property names.
const hoursBlockId: keyof HoursBlock = "hours";
const hoursActionId: keyof HoursBlockAction = "hoursAction";

// Any deviation from the correct string will result in an error.
// Type '"wrong"' is not assignable to type '"hours"'.ts(2322)
const wrongHoursBlockId: keyof HoursBlock = "wrong";

Answer 2

I was able to find a solution to my problem using the "keyof" method. Although not perfect, it allowed me to obtain a type-safe string based on an interface property.

Since I had two nested keys, I decided to separate them into two interfaces and utilize keyof to retrieve the string representation of each property.

export interface HoursBlock {
  hours: HoursBlockAction;
}

export interface HoursBlockAction {
  hoursAction: {
    // eslint-disable-next-line camelcase
    selected_option: {
      value: string;
    };
  };
}

...

// The following strings will only be valid if they correspond to the property names.
const hoursBlockId: keyof HoursBlock = "hours";
const hoursActionId: keyof HoursBlockAction = "hoursAction";

// Any deviation from the correct string will result in an error.
// Type '"wrong"' is not assignable to type '"hours"'.ts(2322)
const wrongHoursBlockId: keyof HoursBlock = "wrong";

Answer 3

Answer №2

Let's give this a shot.

To start, append as const to the declaration of your request object:

const request = {
    actionId: "specialProperty"
} as const;

By doing so, the type of the actionId property becomes a literal ("specialProperty") instead of a regular string:

type RequestActionId = typeof request["actionId"] // "specialProperty"

Now, we can utilize it in a mapped index signature:

type SpecialPropertyInterface = {
  [propName in RequestActionId]: string; // specialProperty: string
}

Playground Link

Answer 4

Let's give this a shot.

To start, append as const to the declaration of your request object:

const request = {
    actionId: "specialProperty"
} as const;

By doing so, the type of the actionId property becomes a literal ("specialProperty") instead of a regular string:

type RequestActionId = typeof request["actionId"] // "specialProperty"

Now, we can utilize it in a mapped index signature:

type SpecialPropertyInterface = {
  [propName in RequestActionId]: string; // specialProperty: string
}

Playground Link

Guide on retrieving the interface property name or key name as a string in Typescript

Answer №1

Answer №2

Similar questions

Managing a project with multiple tsconfig.json files: Best practices and strategies

An error is anticipated when () is added, but surprisingly, I still encounter an error as well. This issue arises in React-Native and Typescript

Merge the values of an object's key with commas

What is the best way to extract and display data from an API response object in my

Troubleshooting Node.js TypeScript breakpoints in Visual Studio Code

Enhance your Angular material datepicker with additional content such as a close button

What is the process for defining the root of a project in ESLint?

Creating a higher order component (HOC) that utilizes both withRouter and connect functions in React

Fixing the forwardRef issue with react-router-dom and material-ui

Visual Studio 2015 does not support compiling typescript files

Creation of source map for Ionic 2 TypeScript not successful

Make sure to call super.onDestroy() in the child component before overriding it

Exploring the realm of Typescript custom decorators: The significance behind context

The best location for storing Typescript files within an ASP.NET Core project

Triggering an event through a shared messaging service to update the content of a component

I encountered TS2300 error stating a duplicate identifier appeared once I transferred my code to Angular CLI

New to React and struggling with updating the DOM

Utilizing TypeScript: Importing a typed module within a d.ts file (from an npm package)

ERROR: The use of @xenova/transformers for importing requires ESM

Angular is giving me an undefined Array, even though I clearly defined it beforehand