Contrasting characteristics of class members in JavaScript versus TypeScript

Question

Contrasting characteristics of class members in JavaScript versus TypeScript

Typescript, a superset of Javascript, requires that Javascript code must function in Typescript. However, when attempting to create class members in a typescript file using the same approach as Javascript, an error is encountered.

CODE :- script.ts (typescript file)

class App{
  constructor(){
        this.name = 'john';
      }     
}
    
let obj = new App();
console.log(obj.name);
    
Output : Property 'name' does not exist on type 'App'

Interestingly, this exact code works perfectly fine in a javascript file. The question remains - why does it not work in a typescript file??

javascript typescript

Answer 1

Answer №1

Although all JavaScript programs can be considered valid TypeScript programs from a syntactical perspective, it doesn't guarantee that they will successfully typecheck. To ensure type safety, you should explicitly declare the types of properties like so:

class Person {
    name: string;
    constructor() {
        this.name = 'Alice';
    }
}

let individual = new Person();
console.log(individual.name);

By adding type declarations, the code behaves as expected and compiles down to the original JavaScript code.

Answer 2

Although all JavaScript programs can be considered valid TypeScript programs from a syntactical perspective, it doesn't guarantee that they will successfully typecheck. To ensure type safety, you should explicitly declare the types of properties like so:

class Person {
    name: string;
    constructor() {
        this.name = 'Alice';
    }
}

let individual = new Person();
console.log(individual.name);

By adding type declarations, the code behaves as expected and compiles down to the original JavaScript code.

Contrasting characteristics of class members in JavaScript versus TypeScript

Answer №1

Similar questions

Load content from a remote page using AJAX into a JavaScript variable

Is it possible to save the video title as a variable using YTDL-core?

Displaying AJAX response with AngularJS

Is there a way to allow an HTML page rendered by node.js to communicate back to its corresponding node.js file?

Access external variables in next.js outside of its environment configuration

Unexpected token < error encountered during parsing in jQuery Ajax long polling append

Top strategies for efficiently managing the loading of extensive PHP pages using Jquery, Ajax, HTML, and other tools

Is it possible to compress an Array comprised of nested Arrays?

Error: Unable to call function onPopState from _platformLocation due to TypeError

The most effective way to initiate an action following a popup

Utilizing ngModel with an uninitialized object

Utilizing Array Elements to Populate the Title Attribute in <TD> Tags

In order to add value, it is necessary to insert it into the text box in HTML without using the "on

When using AngularJS and PHP together, I encountered an error that stated "

Tips for retrieving information from a dynamically created form using VUE?

Executing a Python script within a Django project by clicking on an HTML button

Enhance my code to eliminate repetitive elements

Utilizing One-to-Many Microphone Streaming Technology

The functionality of the OnClientClick event within the ASP.NET platform

Toggle the visibility of text boxes based on the checkbox selection