Comparison between Destructuring in TypeScript and JavaScript

Question

Comparison between Destructuring in TypeScript and JavaScript

Starting my journey with TypeScript after a background in JavaScript.

In the realm of modern JavaScript, one can easily destructure objects like this:

 let {n,s} = {n:42, s:'test'};
 console.log(n, s); // 42 test

Assuming TypeScript follows suit, I tried to apply the same concept. According to the documentation, both declarations and assignments support destructuring. However, my attempt to mimic the JavaScript syntax failed as shown in this sample code:

let {n:number, s:string} = {n:42, s:'test'}; // All destructured elements are unused.
console.log(n, s); // Cannot find name 'n' (nor 's')

What am I overlooking here?

typescript destructuring

Answer 1

Answer №1

The syntax used above may not be valid. Upon testing it on the TypeScript playground, you'll see that it is invalid. In TypeScript, destructuring behaves just like JavaScript.

It's advisable to define proper typings (such as an interface) for your object before using destructuring.

interface Item {
  n: number;
  s: string;
}

const item: Item = {
  n: 42, 
  s: 'test',
}

let { n, s } = item;
console.log(n, s);

The types of the destructured elements will be automatically inferred from the original object.

Answer 2

The syntax used above may not be valid. Upon testing it on the TypeScript playground, you'll see that it is invalid. In TypeScript, destructuring behaves just like JavaScript.

It's advisable to define proper typings (such as an interface) for your object before using destructuring.

interface Item {
  n: number;
  s: string;
}

const item: Item = {
  n: 42, 
  s: 'test',
}

let { n, s } = item;
console.log(n, s);

The types of the destructured elements will be automatically inferred from the original object.

Comparison between Destructuring in TypeScript and JavaScript

Answer №1

Similar questions

Properly passing props to child components in React with TypeScript. Resolve Error ts(2322)

What is the proper way to specify the interface as Dispatch<Action>?

I am having trouble with the Primeng password template suggestions not appearing as expected

What is the best way to retrieve the value of an input field in React when incorporating Material UI components?

Encountering difficulty when determining the total cost in the shopping cart

Can sweetalert2 be used as a tooltip?

Is there a way to include values in the body of an HTTP GET request using Angular?

Experiencing difficulty creating query files for the apollo-graphql client

The process of incorporating types into Node.js and TypeScript for handling req and res objects

Struggling to integrate a JavaScript sdk with an Angular2 application due to missing dependencies

Transferring data to a different module

Building an Angular 4 app featuring a customized default landing page and URL parameters functionality

Integrating HTTP JSON responses into HTML using Ionic 2, Angular 2, TypeScript, and PHP: A comprehensive guide

The component 'ProtectRoute' cannot be utilized within JSX

There is an issue with the hook call while trying to establish a context with a reducer

Ways to implement logging in an NPM package without the need for a specific logging library

I am experiencing difficulties with implementing Angular material components in my project

TypeError thrown by Mapbox markers

Create a custom button in Material-UI using Styled-components, and integrate it with React

Testing TypeScript using Jasmine and Chutzpah within Visual Studio 2015