What is the process of converting the new syntax of SomeFunction() to TypeScript?

Question

What is the process of converting the new syntax of SomeFunction() to TypeScript?

When I try to convert a basic JS file to TS while having implicit "any" disabled, I encounter the following error:

Error TS7009: When attempting to create a new expression without a constructor signature, it implicitly defaults to an 'any' type.

interface Logger {
    new (): any;
}

interface LoggerInstance {
}

function Logger(): void {
}


var defaultLogger: LoggerInstance = new Logger();//error TS7009

I'm stuck on how to resolve this issue without turning the Logger function into a class.

The TypeScript compiler was providing suggestions for improvement when implicit any wasn't disabled, so I prefer to keep that setting enabled.

Update: After removing "new" from the Logger interface and casting the result of new Logger(...) in the full file, I managed to compile it. However, I still face the same error in my smaller test case.

Update 2: It seems that the error warnings disappear when the plugin highlighting syntax errors crashes. It appears that this method of object creation may not be allowed when "implicit any" is turned off.

typescript

Answer 1

Answer №1

A quick solution

interface IPerson {
    name: string;
}

var person = function(name: string) : void {
    this.name = name;
}

let funcPerson = <IPerson>(new (<any>(person("John Doe"))));

This code works fine with the noImplicitAny flag enabled.

An improved approach

You can simply convert the function into a class:

class person {
    constructor(public name: string) { }
}

let classPerson = person("John Doe");

After compilation, this becomes:

var person = (function () {
    function person(name) {
        this.name = name;
    }
    return person;
})();
var classPerson = new person("Jane Doe");

Converting the function to a class is beneficial for readability, refactoring, and future modifications. It provides better type information and eliminates the need for an interface in this case.

In summary, there is little reason to prefer the function version over the class implementation. Both yield equivalent objects (see classPerson and funcPerson).

Another alternative

If you want to use a working .js file with TypeScript, consider creating a .d.ts file like this:

person.js

var person = function(name) {
    this.name = name;
}

person.d.ts

interface PersonStatic {
    name:string;
    new(name: string) : PersonStatic;
}
declare var person: PersonStatic;

With this setup, you can do:

/// <reference path="your.d.ts"/>
var p = new person("Jane Doe");

Ensure that the person.js file is available at runtime for proper execution. The example .d.ts file provided is basic; if you pursue this option, it's recommended to learn more about creating .d.ts files beforehand.

Answer 2

A quick solution

interface IPerson {
    name: string;
}

var person = function(name: string) : void {
    this.name = name;
}

let funcPerson = <IPerson>(new (<any>(person("John Doe"))));

This code works fine with the noImplicitAny flag enabled.

An improved approach

You can simply convert the function into a class:

class person {
    constructor(public name: string) { }
}

let classPerson = person("John Doe");

After compilation, this becomes:

var person = (function () {
    function person(name) {
        this.name = name;
    }
    return person;
})();
var classPerson = new person("Jane Doe");

Converting the function to a class is beneficial for readability, refactoring, and future modifications. It provides better type information and eliminates the need for an interface in this case.

In summary, there is little reason to prefer the function version over the class implementation. Both yield equivalent objects (see classPerson and funcPerson).

Another alternative

If you want to use a working .js file with TypeScript, consider creating a .d.ts file like this:

person.js

var person = function(name) {
    this.name = name;
}

person.d.ts

interface PersonStatic {
    name:string;
    new(name: string) : PersonStatic;
}
declare var person: PersonStatic;

With this setup, you can do:

/// <reference path="your.d.ts"/>
var p = new person("Jane Doe");

Ensure that the person.js file is available at runtime for proper execution. The example .d.ts file provided is basic; if you pursue this option, it's recommended to learn more about creating .d.ts files beforehand.

Answer 3

Answer №2

Explain the structures of type and its constructor. Utilizing interfaces would be an ideal approach.

type PersonType = {
    name: string;
    greet: (otherPerson: PersonType) => string;
    selfIntroduce: () => string;
}

//When it comes to ordinary functions, they can be called with or without the "new" operator and
//the type of the constructor must specify both signatures

type PersonTypeConstructor = {
    (this: PersonType, name: string): void; //<- The use of "this" here is optional
    new(name: string): PersonType; // <- Do not include "this" here
}

Create the function meant for serving as the constructor. It is crucial to specify this as the initial parameter(since TS 2.0) in order to prevent compiler errors when the noImplicitThis flag is enabled.

const Person = (function Person(this: PersonType, name: string) { 
    this.name = name;
}) as PersonTypeConstructor; // <- This casts the constructor making further casting unnecessary.

Person.prototype.greet = function (otherPerson: PersonType) {
    return `Hello, ${otherPerson.name}!`;
};

Person.prototype.selfIntroduce = function () {
    return `Hello, my name is ${this.name}.`;
};

let peggySue = new Person("Peggy Sue");
let maryAnn  = new Person("Mary Ann");

console.log(maryAnn.selfIntroduce());
console.log(peggySue.greet(maryAnn));

Answer 4

Explain the structures of type and its constructor. Utilizing interfaces would be an ideal approach.

type PersonType = {
    name: string;
    greet: (otherPerson: PersonType) => string;
    selfIntroduce: () => string;
}

//When it comes to ordinary functions, they can be called with or without the "new" operator and
//the type of the constructor must specify both signatures

type PersonTypeConstructor = {
    (this: PersonType, name: string): void; //<- The use of "this" here is optional
    new(name: string): PersonType; // <- Do not include "this" here
}

Create the function meant for serving as the constructor. It is crucial to specify this as the initial parameter(since TS 2.0) in order to prevent compiler errors when the noImplicitThis flag is enabled.

const Person = (function Person(this: PersonType, name: string) { 
    this.name = name;
}) as PersonTypeConstructor; // <- This casts the constructor making further casting unnecessary.

Person.prototype.greet = function (otherPerson: PersonType) {
    return `Hello, ${otherPerson.name}!`;
};

Person.prototype.selfIntroduce = function () {
    return `Hello, my name is ${this.name}.`;
};

let peggySue = new Person("Peggy Sue");
let maryAnn  = new Person("Mary Ann");

console.log(maryAnn.selfIntroduce());
console.log(peggySue.greet(maryAnn));

What is the process of converting the new syntax of SomeFunction() to TypeScript?

Answer №1

Answer №2

Similar questions

Angular 6: Issue TS2339 - The attribute 'value' is not recognized on the 'HTMLElement' type

The Angular application is receiving a 404 error when trying to access the .NET Core

Issues arise due to data inconsistency stemming from the combination of a for loop and .map() function within the BACK4APP

Changes on services do not affect the Angular component

The customer's status cannot be determined

An item whose value is determined by the specific type of key it possesses

Unable to retrieve HTTP call response during debugging, although it is visible in the browser

Bar chart in Highcharts vanishing following the update from version 10.2.1 to 10.3.1

On MacOS, VSCode encounters an issue with updating TypeScript imports when files are moved

Guide to Rolling a Set of 5 Dice

I am experiencing issues with the customsort function when trying to sort a column of

Angular's Spanning Powers

What might be the reason behind Array concatenation causing an issue in TypeScript?

Access PDF document in a fresh tab

Error: Attempting to access an undefined property ('call') on Next.js is causing a TypeError

Error occurs after upgrading React app to vite due to node-fetch issue

The Angular 2 and TypeScript error stating that the argument of type response is not assignable is causing issues

Incompatibility issues between NestJS and socket.io package

Angular is unable to iterate through a collection of ElementRef instances

Update the function's argument type signature if the current argument is a function with properties