What is the process for destructuring an interface in TypeScript?

Question

What is the process for destructuring an interface in TypeScript?

My request is as follows:

const listCompartmentsRequest: identity.requests.ListCompartmentsRequest = {
  compartmentId: id,
  compartmentIdInSubtree: true,
}

I want to shorten the long line

identity.requests.ListCompartmentsRequest

.

I'm looking for something like this:

const { ListCompartmentsRequest } = identity.requests

const listCompartmentsRequest: ListCompartmentsRequest = {
  compartmentId: id,
  compartmentIdInSubtree: true,
}

Even though I have tried it, I'm encountering this error:

ListCompartmentsRequest refers to a value, but is being used as a type here. Did you mean typeof ListCompartmentsRequest?"

typescript

Answer 1

Answer №1

According to the MDN documentation about Destructuring assignment:

The syntax of destructuring assignment in JavaScript allows for unpacking values from arrays or extracting properties from objects into separate variables.

Destructuring applies only to values, not types — TypeScript currently lacks a similar syntax. Alternatively, you can define a new type alias that represents the nested member of the type you described. Here is an example:

TS Playground

type Identity = {
  Requests: {
    ListCompartmentsRequest: {
      compartmentId: string;
      compartmentIdInSubtree: boolean;
    };
  };
};

type ListCompartmentsRequest = Identity['Requests']['ListCompartmentsRequest'];

const id = '123';

const listCompartmentsRequest: ListCompartmentsRequest = {
  compartmentId: id,
  compartmentIdInSubtree: true,
};

If your target type is within a namespace, you can use dot notation to access the nested type.

Answer 2

According to the MDN documentation about Destructuring assignment:

The syntax of destructuring assignment in JavaScript allows for unpacking values from arrays or extracting properties from objects into separate variables.

Destructuring applies only to values, not types — TypeScript currently lacks a similar syntax. Alternatively, you can define a new type alias that represents the nested member of the type you described. Here is an example:

TS Playground

type Identity = {
  Requests: {
    ListCompartmentsRequest: {
      compartmentId: string;
      compartmentIdInSubtree: boolean;
    };
  };
};

type ListCompartmentsRequest = Identity['Requests']['ListCompartmentsRequest'];

const id = '123';

const listCompartmentsRequest: ListCompartmentsRequest = {
  compartmentId: id,
  compartmentIdInSubtree: true,
};

If your target type is within a namespace, you can use dot notation to access the nested type.

What is the process for destructuring an interface in TypeScript?

Answer №1

Similar questions

Retrieving the selected date from mat-datepicker into a FormControl

Tips for showing that every field in a typed form group must be filled out

Tips for integrating Reactjs with Chessboard.js

What method can be used to specify a function of any signature that returns a particular type in programming?

Setting up VSCode to run various tasks

Ensuring Map Safety in Typescript

The specified property 'slug' is not found within the designated type 'ParsedUrlQuery | undefined'

Obtaining the current row index in React MUI Data Grid using React-Context

Adding markers to a map in Angular 2 using ngOnInit after initialization

Using Typescript inject with Vue 3 is currently not functioning as expected. The issue arises when trying to create spread types from object types

What is the best way to send my Array containing Objects to the reducer using dispatch in redux?

Struggling to make Typescript recognize the css prop (emotion) when styling Material-UI components

Is it possible to configure TypeScript (or a tool similar to ESLint) to throw an error when a library returns undefined?

Tips for retrieving an object from an array with Angular and Firestore

Tips for efficiently passing TypeScript constants to Vue templates without triggering excessive reactivity

Arranging a dictionary by its keys using Ramda

TS2559: Type 'String' lacks any common properties with type 'object'

Discovering the file system with window.resolveLocalFileSystemURL in Typescript for Ionic 3

Creating a Typescript interface that includes keys from another interface

Referring to a component type causes a cycle of dependencies