Dealing with the error message "The 'new' keyword requires a constructor signature when targeting a type that does not have one, resulting in an implicit 'any' type.ts(7009)"

Question

Dealing with the error message "The 'new' keyword requires a constructor signature when targeting a type that does not have one, resulting in an implicit 'any' type.ts(7009)"

Currently, I am in the process of migrating an outdated JavaScript library to TypeScript for integration into Vue 3. However, I encountered an error message that states: 'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.ts(7009). It seems like the issue stems from this particular code snippet within my package, yet the solution still eludes me. Below is the problematic code:

function Media(this: any, options: any ) {       
    this.clientOptions = options || {};
    this.apiVersion = this.clientOptions.version || 'v1';
    this.baseURL = `${this.clientOptions.server}/${this.apiVersion}`;
    this.token = this.clientOptions.token || null;
    this.files = null;
    this.endpoints = this.clientOptions.endpoints || {
        upload: 'files/upload',
        chunk: 'files/upload/chunk',
        auth: 'auth',
        youtubeDownload: 'youtubes/download',
        facebookDownload: 'facebooks/download'
    };
    this.chunkPhase = 'start';
    this.chunks = [];
    this.chunkActive = [];
    this.chunkStartOffset = 0;
    this.chunkMaxActive = this.clientOptions.maxActiveChunk || 3;
    this.chunkMaxRetries = 1;
    this.fileSize = 0;
    this.chunkFile = null;
    this.chunkSize = null;
    this.chunkSessionId = null;
}
Media.prototype = {
    getToken: async function () {
        var self = this;
        try {
            var assignUrl = `${self.baseURL}/${self.endpoints.auth}`;
            var data = {
                'username': self.clientOptions.user.username,
                'password': self.clientOptions.user.password
            };
            const response = await self._postx(assignUrl, data);
            if (response.data && response.data.access_token) {
                self.token = response.data.access_token;
            }
            return self.token;
        } catch (error) {
            return error;
        }
    },
}

...

Furthermore, here is the usage of the code in Vue which triggers the aforementioned error message:

import media from 'mediaLibrary'
const m3 = new Media(
  {
    server: 'myServer',
    user: {
        username: 'myUserName',
        password: 'abc123'
    },
    version: 'v2',
    endpoints: {
        upload: 'files/upload',
        chunk: 'files/upload/chunk',
        auth: 'users/signin',
        youtubeDownload: 'youtubes/download',
        facebookDownload: 'facebooks/download'
    } 
});

I am hopeful that there exists a resolution to assist me in rectifying this issue...

typescript vue.js vuejs3

Answer 1

Answer №1

If you encounter this issue while using the `new` keyword with a constructor-function in TypeScript, fret not as it is a common problem with two possible solutions:

1. Convert the constructor function into a class. Here's an example:

function Employee(fullName: string, salary: number) {
  this.fullName = fullName;
  this.salary = salary;

  this.getSalary = function () {
    return this.salary;
  };
}

To

class Employee {
  constructor(public fullName: string, public salary: number) {
    this.fullName = fullName;
    this.salary = salary;
  }

  getSalary() {
    return this.salary;
  }
}¨

2. Impose the type (a workaround). For cases where editing the class directly is not possible, this hacky solution can be employed although it may not have long-term support:

function Employee(this: any, fullName: string, salary: number) {
  this.fullName = fullName;
  this.salary = salary;

  this.getSalary = function () {
    return this.salary;
  };
}

const emp1 = new (Employee as any)('James Doe', 100);

In your specific scenario, it would look like this:

const m3 = new (m3dia as any)(
  {
    server: 'myServer',
    user: {
        username: 'myUserNamw',
        password: 'abc123'
    },
    version: 'v2',
    endpoints: {
        upload: 'files/upload',
        chunk: 'files/upload/chunk',
        auth: 'users/signin',
        youtubeDownload: 'youtubes/download',
        facebookDownload: 'facebooks/download'
    } 
});

(3. Remember, you can also choose to ignore TypeScript related errors using //@ts-ignore)

Answer 2

If you encounter this issue while using the `new` keyword with a constructor-function in TypeScript, fret not as it is a common problem with two possible solutions:

1. Convert the constructor function into a class. Here's an example:

function Employee(fullName: string, salary: number) {
  this.fullName = fullName;
  this.salary = salary;

  this.getSalary = function () {
    return this.salary;
  };
}

To

class Employee {
  constructor(public fullName: string, public salary: number) {
    this.fullName = fullName;
    this.salary = salary;
  }

  getSalary() {
    return this.salary;
  }
}¨

2. Impose the type (a workaround). For cases where editing the class directly is not possible, this hacky solution can be employed although it may not have long-term support:

function Employee(this: any, fullName: string, salary: number) {
  this.fullName = fullName;
  this.salary = salary;

  this.getSalary = function () {
    return this.salary;
  };
}

const emp1 = new (Employee as any)('James Doe', 100);

In your specific scenario, it would look like this:

const m3 = new (m3dia as any)(
  {
    server: 'myServer',
    user: {
        username: 'myUserNamw',
        password: 'abc123'
    },
    version: 'v2',
    endpoints: {
        upload: 'files/upload',
        chunk: 'files/upload/chunk',
        auth: 'users/signin',
        youtubeDownload: 'youtubes/download',
        facebookDownload: 'facebooks/download'
    } 
});

(3. Remember, you can also choose to ignore TypeScript related errors using //@ts-ignore)

Dealing with the error message "The 'new' keyword requires a constructor signature when targeting a type that does not have one, resulting in an implicit 'any' type.ts(7009)"

Answer №1

Similar questions

The inline style in Angular 2 is not functioning as expected when set dynamically

"Exploring the use of TypeScript in React higher order components

The system encountered an error when attempting to convert the data '19-10-2002' into a date format

The issue of Vue js Computed property failing to update upon changing route

Retrieving the default props of a child component in Vue after it has mounted

Utilizing TypeScript in a browser with a .NetCore WebApplication

Generate dynamic property values based on calculations

Receiving a console notification about a source map error

When the affirmative button is clicked, apply a border and background color

What is the reason behind VueJs not having built-in support for multiple select options?

What is the best way to transfer data to a component that is not directly related

What is the best way to retrieve the `any` type when utilizing the `keyof` keyword?

Documentation for npm package that has been published

You can activate Lightgallery just one time in VueJs

What is the appropriate event type to pass to the onKeyPressed function in a React application utilizing MaterialUI and written with Typescript?

The specified 'IArguments' type does not qualify as an array type

Vue js parent-child communication using event bus fails to function

Is there a type-safe alternative to the setTimeout function that I can use?

Steps for deploying a Vue JS website to an Ubuntu based VPS

The 'current' in react typescript is not found within the type 'never'