Breaking down an object using rest syntax and type annotations

Question

Breaking down an object using rest syntax and type annotations

The interpreter mentions that the humanProps is expected to be of type {humanProps: IHumanProps}.

How can I properly set the type for the spread operation so that humanPros has the correct type IHumanProps?

Here's an example:

interface IName {
  name: string
}

interface IHumanProps {
  hobby: string,
  age: number
}

interface IHuman extends IName, IHumanProps {}

const human: IHuman = {
  name: 'Linda',
  hobby: 'reading',
  age: 99
}

const { name, ...humanProps }: { name: string, humanProps: IHumanProps } = human;

console.log(name);
console.log(humanProps);

How can I destructure an object using the spread operator and specify types? I couldn't find much information on this particular scenario online.

[Edit]: I encountered an error where VSCode (or possibly the linter) was indicating that the deconstructed humanProps did not match the expected type IHumanProps, instead suggesting a type of

{humanProps: {humanProps: IHumanProps}}

, which was incorrect. This might have been an issue with VSCode/ESLint. Thank you all for the quick responses!

typescript types spread

Answer 1

Answer №1

To improve clarity, I recommend revising the data types in the following way:


type PersonName = {
  firstName: string;
}

type PersonDetails = {
  interest: string;
  years: number;
}

type Person = PersonName & PersonDetails;

const person: Person = {
  firstName: 'Linda',
  interest: 'reading',
  years: 99
}

Now, to destructure the person object, you can simply use the code below:

const {firstName, ...personInfo} = person

Answer 2

To improve clarity, I recommend revising the data types in the following way:


type PersonName = {
  firstName: string;
}

type PersonDetails = {
  interest: string;
  years: number;
}

type Person = PersonName & PersonDetails;

const person: Person = {
  firstName: 'Linda',
  interest: 'reading',
  years: 99
}

Now, to destructure the person object, you can simply use the code below:

const {firstName, ...personInfo} = person

Breaking down an object using rest syntax and type annotations

Answer №1

Similar questions

Filtering an array of objects based on another array of objects in Angular2 through the use of pipes

Try skipping ahead to the following spec file even if the initial spec has not been completed yet

Navigating VSCode for Correct Import Setup

Determining the Clicked Button in ReactJS

Currently attempting to ensure the type safety of my bespoke event system within UnityTiny

The variable is currently undefined because it has an array assigned to it

Issue with e2e.js file format in Cypress Support

Guide to inserting an Angular routerLink within a cell in ag-Grid

Receiving contextual information from Microsoft Teams within an Angular application integrated as a tab

Execute a grandchild function in Angular that triggers its grandparent function

TypeScript is throwing an error about a missing property, even though it has been defined

What steps can be taken for TypeScript to identify unsafe destructuring situations?

Quickest method for sorting an array of objects based on the property of another object's array

Mastering Inter-Composable Communication in Vue 3: A Guide

Exploring the Possibilities of Nipplejs Integration in Vue with Quasar

Webpack is having trouble identifying Node's process module

Encountering a GitHub REST API CORS issue while attempting to fetch a public repository's git archive

Angular with NX has encountered a project extension that has an invalid name

Guide to automatically closing the calendar once a date has been chosen using owl-date-time

Discovering the bottom scroll position in an Angular application