How to handle error 'new' expression, whose target lacks a construct signature, implicitly-CodePudding

I'm porting an old library from js to typescript for use in Vue 3 however it gets an error: 'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.ts(7009) I think the error comes from this code in my package but I haven't found the solution yet, here is the code:

function M3dia(this: any, opts: any ) {       
    this.clientOpts = opts  {};
    this.apiVersion = this.clientOpts.version  'v1';
    this.baseURL = ${this.clientOpts.server}/${this.apiVersion};
    this.token = this.clientOpts.token  null;
    this.files = null;
    this.endpoints = this.clientOpts.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.clientOpts.maxActiveChunk || 3;
    this.chunkMaxRetries = 1;
    this.fileSize = 0;
    this.chunkFile = null;
    this.chunkSize = null;
    this.chunkSessionId = null;
}
M3dia.prototype = {
    getToken: async function () {
        var self = this;
        try {
            var assignUrl = ${self.baseURL}/${self.endpoints.auth};
            var data = {
                'username': self.clientOpts.user.username,
                'password': self.clientOpts.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;
        }
    },
}

...

And here is the code i use in Vue and it gives the above error warning:

import m3dia from 'm3dia'
const m3 = new m3dia(
  {
    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'
    } 
});

I hope there will be a solution to help me fix this problem...

CodePudding user response：

This error occurs when you call a constructor-function with new in TypeScript. It is common problem. There are two solutions for this:

1. Refactor the constructor function to a class. Example:

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

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

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

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

2. Force the type (hacky solution). Example:

In my opinion this should only be used in situations where you can not edit the class in question. It looks and feels hacky, don't know how long this syntax will be supported.

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 example this would be:

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. You can always ignore TS related errors with //@ts-ignore)