Properly excluding an abstract typescript class from an external library

I have an external library stored in our GitLab with the following structure:

export default abstract class Client{
   protected someProperty: string | undefined;
   protected static get baseUrl(): string {
       
        return 'www.test.de';
    }
}

as well as an index.js:

//other exports
export {default as Client} from './src/clients/Client';

Once I installed the library via npm, I attempted to use the base class like this:

import {Client} from 'my-external-library';

public class MyClient extends Client{
    public static async getIndex(){
        let url = this.baseUrl + '/somepath';
    }
}

However, upon installing the library in my project and attempting to work with the base class, I encountered the error message TS2339 Property 'baseUrl' does not exist on type 'MyClient'.

How can I correctly export the Client base class so that it can be used without any error messages?

The code functions as expected aside from the error message.

Furthermore, when trying to access the property someProperty after creating an instance of the class MyClient, I also receive an error message:

let myClient = new MyClient();
let test = myClient.someProperty

How can I access the property of the abstract class Client?

Update

When the abstract class is in my main project, I am able to access its properties. However, when it is in my external library, the class does not seem to be recognized, resulting in the "Property does not exist exception" with the following code:

let myClient = new MyClient();
let test = myClient.someProperty

Could this issue be related to

export { default as Client} from './src/clients/Client';
?

Answer №1

There are a couple of errors in your code that need to be addressed:

  1. Firstly, trying to call a static getter using `this` is incorrect. To reference a static property from a member function, you should use `this.constructor.baseUrl`.

  2. Secondly, using `this` inside a static function is also wrong. To call another static function from a static function, you should use the class name instead. In this case, it would be: `MyClient.baseUrl`.

To correct your code, make the following changes:

import { Client } from 'my-external-library';
    
public class MyClient extends Client {
    public static async getIndex() {
        let url = MyClient.baseUrl + '/somepath';
    }
}

It seems like you may not have intended for the second function to be static. If you want to make it a member function, you can rewrite it like this:

import { Client } from 'my-external-library';

public class MyClient extends Client {
    public async getIndex() {
        let url = this.constructor.baseUrl + '/somepath';
    }
}

In regards to your second question:

If the property you want to access is a regular property, you can do so as described:

// someProperty is a member property
let myClient = new MyClient();
let test = myClient.someProperty

However, if the property is a static property, it can only be accessed through the class and not through an instance of the class.

// someProperty is a static property
let test = MyClient.someProperty;

In this case, the `baseUrl` property is a static property.

I recommend reading this article that explains the difference between static and regular properties:

Answer №2

After reviewing the feedback, I have identified several errors that I made. I mistakenly removed the inheritances related to the static methods, however, it was unnecessary to use inheritance in this case.

To resolve the issue with the error message stating "property 'xy' does not exist on type", I included the .tsconfig file to generate declaration files (d.ts) Link.

I am pleased to announce that the problem has been resolved and everything is now functioning correctly.

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

Is there a way to access a specific argument in yargs using typescript?

The idea behind using yargs is quite appealing. const argv = yargs.options({ env: { alias: 'e', choices: ['dev', 'prod'] as const, demandOption: true, description: 'app environment&apos ...

Can TypeScript types be created using multiple comma-separated strings?

Is it feasible to define a custom type in TypeScript like Type LayoutType = "Left" | "Right" | "Top" | "Bottom" | "VCenter", that would combine values such as "Left,VCenter"? Or do I need to create a string literal for every possible combination? ...

Executing Functions from Imported Modules in Typescript

Is there a way to dynamically call a method from my imported functions without hard-coding each function name in a switch statement? I'm looking for a solution like the following code: import * as mathFn from './formula/math'; export functi ...

Running a TypeScript program that has been compiled with module resolution is not working as expected

I am currently in the process of compiling a TypeScript file with the following code: import { magic } from 'lib/magic'; magic(); The file structure looks like this: ./src/ main.ts lib/ a/magic.ts b/magic.ts Within ...

Web application is not making API calls

Currently, I am experimenting with calling data from an API to create a simple weather application for practice purposes. I have been using the inspect element feature in my Chrome browser to check if the console will show the data log, but unfortunately, ...

What could be causing my data to undergo alterations when transitioning from a frontend form submission to a backend API?

In my experience with Next.js 13 and Prisma, I encountered a peculiar issue. I had set up a basic form to collect user information for an api request. Oddly enough, when I printed the data right before sending it, everything seemed fine. However, upon arri ...

Creating a canvas that adjusts proportionally to different screen sizes

Currently, I am developing a pong game using Angular for the frontend, and the game is displayed inside an HTML canvas. Check out the HTML code below: <div style="height: 70%; width: 70%;" align="center"> <canvas id=&q ...

Exploring Angular's Subcomponents

While working on my application, I encountered a dilemma. I currently pass data from the main component to the subcomponents after pulling it from the API with a single request. Should I continue with this approach or have each component make its own separ ...

How do I adjust brightness and contrast filters on a base64 URL?

When presented with an image in base64 format like this: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDAAwfqNRk/rjcYX+PxrV/wtWqwJSTlboMgAAAABJRU5ErkJggg== What is the most efficient method to programmatically alter a filter (such as brightness or cont ...

Utilizing Angular service in a separate file outside of components

In my library file product.data.ts, I have a collection of exported data that I need to update based on a value returned by a featureManagement service. Our team regularly uses this service and includes it in the constructor of any component using standard ...

Feeling lost with the concept of getcontext in js/ts and uncertain about how to navigate through it

Recently, I've been encountering undefined errors in my browser and can't seem to figure out how to resolve them. It seems that the usage of the keyword "this" in JavaScript and even TypeScript is causing quite a bit of confusion for me. Let&apo ...

Change the value of the checked property to modify the checked status

This is a miniCalculator project. In this mini calculator, I am trying to calculate the operation when the "calculate" button is pressed. However, in order for the calculations to run correctly in the operations.component.ts file, I need to toggle the val ...

Filter array to only include the most recent items with unique names (javascript)

I'm trying to retrieve the most recent result for each unique name using javascript. Is there a straightforward way to accomplish this in javascript? This question was inspired by a similar SQL post found here: Get Latest Rates For Each Distinct Rate ...

Dealing With HttpClient and Asynchronous Functionality in Angular

I've been pondering this issue all day. I have a button that should withdraw a student from a class, which is straightforward. However, it should also check the database for a waiting list for that class and enroll the next person if there is any. In ...

Concern regarding the duration setting in the date-picker

Is there a specific "campaign duration" rule where you must select a date between the first and last day of the month? If you choose a date outside of this range, such as a date from the next month, the Backend API will return an "Input param error." Curr ...

In Angular, use the ngFor directive to iterate through items in a collection and add a character to each item except

Currently, I am iterating through my data list and displaying it in the view using spans: <span *ngFor="let d of myData"> {{d.name}}, </span> As shown above, I am adding a comma ',' at the end of each item to ensure a coherent displ ...

Aliases in Typescript are failing to work properly when used alongside VSCode Eslint within a monorepository

I've incorporated Typescript, Lerna, and monorepos into my current project setup. Here's the structure I'm working with: tsconfig.json packages/ project/ tsconfig.json ... ... The main tsconfig.json in the root directory looks lik ...

Enhance the variety of types for an external module in TypeScript

I am in the process of migrating an existing codebase from a JavaScript/React/JSX setup to TypeScript. My plan is to tackle this task file by file, but I have a question regarding the best approach to make the TypeScript compiler work seamlessly with the e ...

Guide to defining a typescript class property using an index signature

type TField = { field1: string; field2: boolean; field3: TMyCustom; } class Test1 { // I opt for using TypeScript's index signature to declare class fields [key: keyof TField]: TField[typeof key] // Instead of individually declaring each ...

What is the method to access an interface or type alias that has not been explicitly exported in TypeScript type definitions?

I am looking to create a new class that inherits from Vinyl. The constructor in the superclass takes a single parameter of type ConstructorOptions. export default class MarkupVinylFile extends Vinyl { public constructor(options: ConstructorOptions) { ...