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

Stop webpack from stripping out the crypto module in the nodejs API

Enhancing Angular2 authentication with Auth0 for enabling Cross-Origin Resource Sharing

Guide on implementing a cordova plugin in a TypeScript cordova application

The JSON.stringify method in TypeScript/JavaScript does not align with the json-String parameter or request body in a Java controller

The React namespace is missing the exported member 'InputHTMLAttributes', and the MenuItemProps interface is incorrectly extending the ListItemProps interface

Exploring NuxtJS Vuex Module namespaces and mutation enumerations

The expect.objectContaining() function in Jest does not work properly when used in expect.toHaveBeenCalled()

Pay attention to the input field once the hidden attribute is toggled off

Starting PM2 with multiple instances can be achieved by following these steps

data not corresponding to interface

I am having issues with the Okta Angular sign-in widget as it is not redirecting

How to Invoke a TypeScript Function in Angular 2 Using jQuery

Learn the steps to dynamically show a navbar component upon logging in without the need to refresh the page using Angular 12

Angular 8 combined with Mmenu light JS

What is the importance of adding the ".js" extension when importing a custom module in Typescript?

Delete row from dx-pivot-grid

The addition operator cannot be used with the Number type and the value of 1

Utilizing WebPack 5 in conjunction with Web workers in a React/Typescript environment

Refining types in a series of statements

Definition of TypeScript array properties