What is the purpose of declaring a variable within a class and then assigning it to "this" in the constructor?

The following code snippet demonstrates the declaration of a variable constObj within the Test class. The object constObj is then assigned to this in the constructor.

Why must we declare the variable again when it is already being assigned to this in the constructor?

When using the webstorm IDE, an error stating

doesn't have the property constObj
is thrown if this.constObj is not declared. However, the code works without any issues.

Is declaring the variable necessary even though it is being assigned to this?

const constObj = {
  a: function() {
    console.log("sivakumar");
  }
};

class Test {
  constObj: any; // Is this line mandatory? I mean declaring it???

  constructor() {
    Object.assign(this, {
      constObj
    });
  }

  callMethod() {
    this.constObj.a();
  }
}

new Test().callMethod();

Please explain what would happen if we do not declare the variable.

Answer №1

Is it necessary to declare the variable...

It's not considered a variable, but rather a property.

The answer pertaining to TypeScript: Indeed, declaring it is required for TypeScript to recognize that Test possesses that property and conduct static type checks accordingly. (Please note that while there are different ways to declare the property, it must be done in some form.)

The response related to JavaScript: No, it is not compulsory¹, as JavaScript does not engage in static type checking.


¹ (and currently not feasible per the existing specification, although this feature will soon be available and can be transpiled using tools like Babel)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving all rows from a table using Laravel API and Vue.js

<template> <div class="container"> <div class="row mt-5 mb-3"> <div class="col-md-10"> <h3>Gallery</h3> </div> <div class="col-md-2"> <button class="btn btn-success" ...

Is there an issue preventing Three.js from rendering properly?

I created a simple file to experiment with the Three.js library, however I encountered an issue when trying to add the renderer (an element) to the $container (which is defined as $('#container')). <!DOCTYPE html> <html lang='en&ap ...

What is the best way to access a specific attribute of an object that is within an array in JavaScript or Google Apps Script?

One challenge I'm facing is with a javascript function that generates an array filled with objects. Each object contains various attributes such as id, colour, and size. After the array is created, it is sent to a Google Apps Script for further proces ...

Using HTML as an argument in a JavaScript function

Within a variable, I have stored an entire HTML page. $body = $myhtmlpage; <a onclick="openWin('<?php echo htmlspecialchars(json_encode($body)) ?>');" href="javascript:void(0);"> Click </a> I also have this JavaScript functio ...

The promise is returning an undefined value when attempting to access the array within

I'm currently delving into NodeJS to create some automation scripts, but I've hit a roadblock that's stumping me. By utilizing the Google Spreadsheet API and the "promisify-node" package, I'm trying to fetch data from a spreadsheet and ...

Automatically modify the data types of elements within an array

For a recent project, I created a class using TypeScript and React to handle images. Here is an example of how my class looks: class MyCustomImage extends Image { oriHeight: number; } Once I uploaded two images, I ended up with an array called 'r ...

Angular file upload component with customizable file size limits

I'm currently developing an upload file feature that will transmit the file via nodejs. However, I am encountering an issue related to file size. Whenever the file exceeds a few kilobytes, I encounter the following error: Error: request entity too la ...

When the nestjs interface appears to be missing a defined method

Upon reviewing the code at this link: https://github.com/nestjs/nest/tree/master/packages/common One can see that the interface ArgumentsHost has been defined, but the contents of its methods are not explicitly defined. However, when looking at the foll ...

The compilation of PKG using Axios 1.x encounters an error

Despite attempting numerous strategies, I have not been successful. I developed a Node.js application with API requests managed using axios. However, I am unable to convert it into an executable file. Trying to downgrade Axios to version 0.27.0 resolved th ...

How to prevent text from overflowing outside the Material UI Container/Box?

One issue I'm facing is with an Alert that displays long strings on my website. Here's the code snippet in question: <Container maxWidth="md"> <Box sx={{ mt: 3, border:1}}> <Box> {hasSubmitted ? ...

Tips on saving HTML table information into a .txt document?

Welcome to my Unique HTML Table. <table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email Id</th> <th>Phone Number</th> <th>Prefered C ...

Bring a div box to life using AngularJS

Struggling to animate a div-Box in AngularJS? Despite trying multiple examples, the animation just won't cooperate. I'm aiming to implement a feature where clicking on a button triggers a transition animation to display the search form. I under ...

Encountering an error message when trying to launch an application: Module

Every time I try to launch my react-native app in git-bash, I encounter the following error message. I have already uninstalled and reinstalled node.js, cleared the cache, and attempted various solutions from Stack Overflow and GitHub with no success. ...

What's the best way to establish a victorious player in a game of Tic

I've been struggling to find a solution for determining the winner using WinCombos. Is there a way to compare the elements in my winCombos array with the cells of a 3x3 tic tac toe board to identify the winner? var player1 = "X"; var player2 = "O"; ...

The error message 'Cannot read property 'navigate' of undefined' is displayed because the function '_this.props.navigation.navigate' is not

I'm facing an issue trying to access 'Home' from Form.js. Despite my efforts in arrowF, routes, and other methods, the same error persists. How can I resolve this? In my Form.js file, when I call onPress=(), I have tried using functions, ...

Is the response duplicated in the get request when using request-promise?

I am currently configuring a route on my server that utilizes the following code: //packages const express = require('express'); const router = express.Router(); const rp = require('request-promise'); //date logic var today = n ...

The persistent issue of window.history.pushstate repeatedly pushing the identical value

I need some assistance with my Vue application. I am trying to update the URL when a user clicks on an element: const updateURL = (id: string) => { window.history.pushState({}, '', `email/${id}`); }; The issue I'm facing is th ...

Convert all existing objects to strings

I have a type that consists of properties with different data types type ExampleType = { one: string two: boolean three: 'A' | 'Union' } Is there an easier way to define the same type but with all properties as strings? type Exam ...

Tips for scrolling an element within its parent container as a fixed element moves past it

I'm a bit stuck on this jQuery/javascript challenge and haven't made much progress yet. I need some guidance to help me navigate in the right direction! The issue I'm facing involves a fixed element on my webpage that moves into different w ...

Tips for preventing a table from showing up while scrolling unnecessarily when utilizing a heading with the CSS position property set to 'sticky'

Currently, I am facing an issue with creating a sticky header for my table. The problem arises when the header of the table has rounded edges (top right and top left) along with a box-shadow applied to the entire table. As the user scrolls through the tabl ...