In TypeScript, invoking a function from a subclass results in "<empty string>" being returned

Problem

I encountered a roadblock while following a tutorial. When I call the 'bark()' method in the ShelterDog class, the browser console displays <empty string> instead of the expected output "WOOF WOOF!!!"

Code

// Dog.ts
export default class Dog {
    constructor(
        public name: string,
        public breed: string,
        public age: number
    ) {}
    bark():void {
        console.log("WOOF WOOF!!!");
    }
}
// ShelterDog.ts

import Dog from "./Dog.js";

export default class ShelterDog extends Dog {
    constructor(
        name: string,
        breed: string,
        age: number,
        public shelter: string
    ) {
        super(name, breed, age);
        this.shelter = shelter
    }
}
// index.ts

import Dog from "./Dog.js"
import ShelterDog from "./ShelterDog.js"

const elton = new Dog("Elton", "Aussie", 0.5)
elton.bark()

const benton = new ShelterDog("Benton","Madman",99,"Chaos Refuge")
benton.bark()

Answer №1

Everything in this code was functioning perfectly fine. I had not realized that the Firefox browser console automatically groups duplicate logs together.

https://i.sstatic.net/OTux0.png

It seems that there may be a current problem with the ability to turn off this feature as well.

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

Hidden input fields do not get populated by Angular submit prior to submission

I am in the process of implementing a login feature in Angular that supports multiple providers. However, I have encountered an issue with submitting the form as the loginProvider value is not being sent to the server. Below is the structure of my form: &l ...

The second property decorator is experiencing issues with the Setter/Getter functionality not functioning properly

Having encountered an issue with my two decorators, I noticed that only the first decorator defined is executing its setter/getter properties when attached to a property. The inner function itself triggers both `Init Decorator 1` and `Init Decorator 2`. Wh ...

What is the process for setting up an optional interface?

Here's a scenario I'm working with: interface IRenderComponent { urlToHideAt?: string; links?: IInternalNavbarLink[]; currentLink?: IInternalNavbarLink; } const renderComponent = ({ urlToHideAt, links, currentLink }: IRenderComponent) => ...

Dealing with incorrect type declarations in Typescript when using Material-UI Higher Order Components can

Currently, I am in the process of upgrading from Material-UI 1.x to the newer version Material-UI 3.9.2. I had several components that were functioning well with Higher Order Components (HOC), but when it comes to migrating them to 3.9.2, I am facing some ...

Maximizing Component Reusability in React: Utilizing Various Types Across Components

interface DataInfo { name: string; src: string; id: string; price: number; } interface DataInfo2 { title: string; src: string; _id:string item_price: number; } const ItemData = ({ item }: DataInfo | DataInfo2) => { return ( <li ...

Can you explain the significance of the <var> syntax used in Angular and Typescript?

Can someone explain the meaning of <variable> in this line: getHeroes (): Observable<Hero[]> {} I've searched through documentation and Google without success, as it seems to only show arithmetic operators. Is this notation related to EC ...

What could be causing the malfunction of my button's event handlers?

Users can fill out a form in which they provide information about a grocery item they want to add to their cart. After completing the form, they can click on the "Add Item" button. Here's the form in my app.component.html: <form (ngSubmit)="a ...

The specified file is not located within the 'rootDir' directory in the Cypress tsconfig.json file

I've encountered an issue while configuring Cypress in my Project, specifically with the typescript setup for Cypress. Here is the structure of my project: fronend/ - cypress/ -tsconfig.json - src/ - tsconfig.json - package.jso ...

Isolated Modules in Angular Version 17 and Beyond

Having worked with an earlier version of Angular, I am facing issues with my navbar routes not working properly on my Contact Page. Can someone shed some light on this for me? If you want to take a look at the code, here is the link: https://github.com/Lo ...

Encountering an error when using Webpack ModuleFederationPlugin and HMR: "Undefined properties cannot be set"

Description Hey everyone! I've been experimenting with Webpack ModuleFederationPlugin using React and TypeScript in my current proof of concept. Currently, I have two applications - ChildApp which exposes a module, and a HostApp that consumes this e ...

What is the correct way to exclude and remove a portion of the value within an object using TypeScript?

The function useHider was created to conceal specific values from an object with the correct type. For example, using const res = useHider({ id: 1, title: "hi"}, "id"), will result in { title: "hi" } being returned. Attempting ...

Tips for transforming promise function into rxjs Observables in Angular 10

As a beginner in typescript and angular, I am trying to understand observables. My query is related to a method that fetches the favicon of a given URL. How can I modify this method to use observables instead of promises? getFavIcon(url: string): Observ ...

A guide on incorporating Union Types in TypeScript

Currently utilizing typescript in a particular project where union types are necessary. However, encountering perplexing error messages that I am unsure how to resolve. Take into consideration the type definition below: type body = { [_: string]: | & ...

Alternatives to using wildcards in TypeScript

In my code, I have defined an interface called ColumnDef which consists of two methods: getValue that returns type C and getComponent which takes an input argument of type C. Everything is functioning properly as intended. interface ColumnDef<R, C> { ...

Learning Angular2: What is the mechanism behind the automatic incrementation of the ID variable in this particular section?

In This specific part of the Angular2 Tutorial there is a feature that allows users to add new items to an array. Somehow, when the item is added, the ID is automatically incremented but the exact process behind this automation remains a mystery. I am awa ...

Bizarre Behavior of String Comparison in Typescript When Using String.toLowerCase

As someone who is naturally curious (and has no background in JS), I have decided to take the plunge into Typescript. However, I seem to have hit a roadblock. I am trying to compare two strings but want to make it easier by first converting them to lowerca ...

Ensuring a string is a valid key value within an interface using TypeScript

const word = 'world'; const bar = 'bar'; const testString = 'test'; interface validation { greet: 'world'; food: 'bar'; }; Is there a way to verify if a string matches a key value in an interface? In ...

Angular 9 Alert : TypeError: Unable to access property 'routes' as it is undefined

Currently, I am in the process of learning Angular 9 and experimenting with new features. Recently, I decided to explore router-outlets with a name property which is demonstrated in the code snippet below. This is the template I used: <router-outlet n ...

Converting nested arrays to objects via JSON transformation

I am faced with a nested JSON array structure like this: Parent: { Child1: [ {name:'grandchild1', value:'abc', checked:true}, {name:'grandchild2', value:'pqr', checked:false} ], Ch ...

Error in integrating ng2-bootstrap pagination with a bootstrap table

I am currently working on incorporating the ng2-bootstrap pagination component with a bootstrap table. The bootstrap table I have is populated using the ngFor directive: <tr> <th *ngFor="#col of cols">{{col.header}} </tr> </thead ...