What purpose does the class serve in typescript?

Question

What purpose does the class serve in typescript?

This is a unique version of app.component.ts in the Angular Tour of Hero tutorial.

import { Component } from '@angular/core';

export class Superhero{
 name : string;
 id : number;
}

const SUPERHEROES : Superhero[] = [
    {name : 'Wonder Woman', id : 1},
    {name : 'Iron Man',id : 2},
    {name : 'Spider-Man',id : 3},
    {name : 'Black Panther',id : 4},
    {name : 'Thor', id : 5}
];

I was intrigued by how classes work in TypeScript, so I examined the app.component.js file and came across the following code:

var Superhero = (function () {
 function Superhero() {
 }
 return Superhero;
}());
exports.Superhero = Superhero;
var SUPERHEROES = [
 { name: 'Wonder Woman', id: 1 },
 { name: 'Iron Man', id: 2 },
 { name: 'Spider-Man', id: 3 },
 { name: 'Black Panther', id: 4 },
 { name: 'Thor', id: 5 }
];

I'm having trouble understanding the connection between the HEROES array and the Superhero class that I created in app.component.ts. It seems like there's no link between them in the app.component.js file.

javascript angularjs typescript

Answer 1

Answer №1

I am having trouble understanding the purpose of using classes in the app.component.js file, as there seems to be no connection between the HEROES array and the Hero class that I created in the app.component.ts file.

You're absolutely correct. It should indeed be linked. Maybe we shouldn't focus too much on the compiled code for older browsers. Instead, consider compiling for modern JavaScript engines, where the "class" keyword would still exist and your question would remain relevant.

Let's take a look at this piece of code which declares an ES6 class (with some TypeScript syntax):

export class Hero {
  name: string;
  id: number;
}

In order to instantiate this class, you can only do so with the "new" operator:

However, keep in mind that a class can only be invoked using the "new" keyword (source: exploringjs from Dr. Axel Rauschmayer)

The following code may be confusing:

const HEROES : Hero[] = [
  {name : 'John Snow', id : 1},
  {name : 'Wiz Khalifa',id : 2},
  // ...
];

This code declares an array of type "Hero[]", but it doesn't actually execute the constructor. Instead, it fills the array with objects that are not instances of the class.

Possible solutions

Using an interface:

export interface Hero {
  name: string;
  id: number;
}
const HEROES : Hero[] = [
  {name : 'John Snow', id : 1},
  {name : 'Wiz Khalifa', id : 2},
  // ...
];

Or, using a class:

export class Hero {
  constructor (public name: string, public id: number) {
  }
}

const HEROES : Hero[] = [
  new Hero('John Snow', 1),
  new Hero('Wiz Khalifa', 2),
  // ...
];

Answer 2

I am having trouble understanding the purpose of using classes in the app.component.js file, as there seems to be no connection between the HEROES array and the Hero class that I created in the app.component.ts file.

You're absolutely correct. It should indeed be linked. Maybe we shouldn't focus too much on the compiled code for older browsers. Instead, consider compiling for modern JavaScript engines, where the "class" keyword would still exist and your question would remain relevant.

Let's take a look at this piece of code which declares an ES6 class (with some TypeScript syntax):

export class Hero {
  name: string;
  id: number;
}

In order to instantiate this class, you can only do so with the "new" operator:

However, keep in mind that a class can only be invoked using the "new" keyword (source: exploringjs from Dr. Axel Rauschmayer)

The following code may be confusing:

const HEROES : Hero[] = [
  {name : 'John Snow', id : 1},
  {name : 'Wiz Khalifa',id : 2},
  // ...
];

This code declares an array of type "Hero[]", but it doesn't actually execute the constructor. Instead, it fills the array with objects that are not instances of the class.

Possible solutions

Using an interface:

export interface Hero {
  name: string;
  id: number;
}
const HEROES : Hero[] = [
  {name : 'John Snow', id : 1},
  {name : 'Wiz Khalifa', id : 2},
  // ...
];

Or, using a class:

export class Hero {
  constructor (public name: string, public id: number) {
  }
}

const HEROES : Hero[] = [
  new Hero('John Snow', 1),
  new Hero('Wiz Khalifa', 2),
  // ...
];

Answer 3

Answer №2

The purpose of using a Transpiler in this context is to convert the Type script class into javascript 5 or ES5 compatible code. In ES5, instead of using class syntax to define "classes", function syntax is used. Here's an example:

function vehicle() { } //This defines a "class" called vehicle but it doesn't have any functionality yet

//This defines a function of vehicle that returns the maximum speed
vehicle.prototype.maxSpeed = function() {
 return "50 MPH";
}

As you can see, there are no specific types mentioned here as JavaScript is dynamically typed. Declarations aren't necessary until after the class has been declared.

In your given example, the absence of Name and ID is due to them being used for compile-time error checking in TypeScript. These properties wouldn't exist in their transpiled JavaScript classes.

Regarding the constant heroes, they simply represent JavaScript objects that take on the shape of your instantiated class.

Answer 4

The purpose of using a Transpiler in this context is to convert the Type script class into javascript 5 or ES5 compatible code. In ES5, instead of using class syntax to define "classes", function syntax is used. Here's an example:

function vehicle() { } //This defines a "class" called vehicle but it doesn't have any functionality yet

//This defines a function of vehicle that returns the maximum speed
vehicle.prototype.maxSpeed = function() {
 return "50 MPH";
}

As you can see, there are no specific types mentioned here as JavaScript is dynamically typed. Declarations aren't necessary until after the class has been declared.

In your given example, the absence of Name and ID is due to them being used for compile-time error checking in TypeScript. These properties wouldn't exist in their transpiled JavaScript classes.

Regarding the constant heroes, they simply represent JavaScript objects that take on the shape of your instantiated class.

What purpose does the class serve in typescript?

Answer №1

Possible solutions

Answer №2

Similar questions

Error: The function registerUser from require(...) is not defined

Communication between the Node development server and the Spring Boot application was hindered by a Cross-Origin Request

Bringing in a variable from a component that is dynamically imported

Cannot display value in NumericFormat when using MUI TextField due to prefix restrictions

Utilize jQuery to export HTML or JSON data to an Excel spreadsheet

Implementing authorization middleware using Express.js in Ajax

What steps should I follow to run my JavaScript application locally on Linux Mint?

Exploring the functionality of a personalized hook using the useSelector method

What is a Mongoose Schema type in TypeScript and how can it be used as a custom

Rendering the page using ReactDOM.render

This TypeScript error occurs when the props are not compatible and cannot be assigned to

JS URL verification: ensuring valid URLs with JavaScript

Adding the location of the onClick event to the hook - a step-by-step guide

unable to retrieve information from the redis cache

What are the implications of a project containing nested node_modules directories?

When a specific condition is met, Jquery can automatically execute a function contained

When utilizing $resource, Protractor experiences a timeout while trying to synchronize with the page

Navigating Angular.js: finding my way to the endpoint paths

Consolidate all data connected to the specified key from a JSON dataset

Is there a way to incorporate additional text into option text without compromising the existing values?