Developing a TypeScript Library from Scratch

Question

Developing a TypeScript Library from Scratch

After following the instructions on this particular website, I have implemented the following JavaScript code:

function A(id) {
    var about = {
        Version: "0.0.0.1",
    };

    if (id) {
        if (window === this) {
            return new A(id);//<-Error in typescript
        }

        this.e = document.getElementById(id);
        return this;
    } else {
        return about;
    }
};

A.prototype = {
    doSomething: function () {
        //Implement some logic here
        return this;
    }
}

Example of JavaScript Usage:

var result = A("test");//The type of result should be 'A'
result = new A("test");//The type of result should be 'A'
result = A("test").doSomething();//The type of result should be 'A'
result = new A("test").doSomething();//The type of result should be 'A'

I am now interested in developing a library based on TypeScript that follows similar usage patterns. What would be the best approach to achieve this?

If I attempt to simply place this in a '.ts' file and compile, an error is generated stating: Error TS2350: Only a void function can be called with the 'new' keyword.

In addition, I am unsure of how to handle usage both with and without the 'new' keyword in TypeScript, as my goal is to create a library that seamlessly integrates with JavaScript without necessitating the use of the 'new' keyword by the user.

P.S.
I am aware that I could create a javascript file along with a '.d.ts' file but that method does not align with my current objectives.

javascript typescript

Answer 1

Answer №1

When it comes to TypeScript, the challenge lies in reconciling the different purposes of A(), which leads to a lack of clarity on what you intend it to be.

This approach works:

function A(id): void {
    if (window === this) {
        return new A(id);//<-Error in typescript
    }

    this.e = document.getElementById(id);
    return this;
};

let result = A("test");
result = new A("test").doSomething();

The addition of the version return block adds confusion for the compiler as A now serves two distinct roles.

To silence the complaint and disregard TypeScript's concerns, you could try this:

function A(id): void {
    var about = {
        Version: "0.0.0.1",
    };

    if (id) {
        if (window === this) {
            return new A(id);//<-Error in typescript
        }

        this.e = document.getElementById(id);
        return this;
    } else {
        return <any>about;
    }
};

let result = A("test");
result = new A("test").doSomething();

However, I advise against it. What you're attempting goes against TypeScript's protective mechanisms. Making the typings seamlessly work in this scenario seems challenging.

Edit: In response to your comment, consider something along these lines instead:

class A {
    public static about = {
        Version: "0.0.0.1"
    };

    private e: HTMLElement;

    constructor(id) {
        this.e = document.getElementById(id);
    }

    public doSomething() {
        //Some logic
        return this;
    }
}

let result = new A("test");
result.doSomething();

let about = A.about;

Answer 2

When it comes to TypeScript, the challenge lies in reconciling the different purposes of A(), which leads to a lack of clarity on what you intend it to be.

This approach works:

function A(id): void {
    if (window === this) {
        return new A(id);//<-Error in typescript
    }

    this.e = document.getElementById(id);
    return this;
};

let result = A("test");
result = new A("test").doSomething();

The addition of the version return block adds confusion for the compiler as A now serves two distinct roles.

To silence the complaint and disregard TypeScript's concerns, you could try this:

function A(id): void {
    var about = {
        Version: "0.0.0.1",
    };

    if (id) {
        if (window === this) {
            return new A(id);//<-Error in typescript
        }

        this.e = document.getElementById(id);
        return this;
    } else {
        return <any>about;
    }
};

let result = A("test");
result = new A("test").doSomething();

However, I advise against it. What you're attempting goes against TypeScript's protective mechanisms. Making the typings seamlessly work in this scenario seems challenging.

Edit: In response to your comment, consider something along these lines instead:

class A {
    public static about = {
        Version: "0.0.0.1"
    };

    private e: HTMLElement;

    constructor(id) {
        this.e = document.getElementById(id);
    }

    public doSomething() {
        //Some logic
        return this;
    }
}

let result = new A("test");
result.doSomething();

let about = A.about;

Answer 3

Answer №2

After receiving valuable assistance from MrHen, I have finalized the code as follows:

class A {
    public element;
    public test;
    public doSomething;

    constructor(id) {
        if (id) {
            if (window === this as any) {
                return new A(id);//<-Error in typescript
            }

            this.element = document.getElementById(id);
            this.test = function () {
                console.log("testing"); return this;
            };
            this.doSomething = function () {
                console.log("doing something"); return this;
            };

            return this;
        }
    }
}

let result = ((A as any)("test") as A).doSomething();
result = new A("test").doSomething();

Answer 4

After receiving valuable assistance from MrHen, I have finalized the code as follows:

class A {
    public element;
    public test;
    public doSomething;

    constructor(id) {
        if (id) {
            if (window === this as any) {
                return new A(id);//<-Error in typescript
            }

            this.element = document.getElementById(id);
            this.test = function () {
                console.log("testing"); return this;
            };
            this.doSomething = function () {
                console.log("doing something"); return this;
            };

            return this;
        }
    }
}

let result = ((A as any)("test") as A).doSomething();
result = new A("test").doSomething();

Developing a TypeScript Library from Scratch

Answer №1

Answer №2

Similar questions

Can a JavaScript object be created in TypeScript?

Dynamically insert JavaScript and CSS files into the header by using the append method

Steps for building a Bootstrap grid of thumbnails

Using Jquery and AJAX to dynamically fill out an HTML form based on dropdown selection

Navigating to the default landing page using basic authentication middleware in Express

The function createReadStream completes execution without resolving

Submit a single data value to two separate models in JSON format using MongoDB

Encountering a 404 error while sending a session ID in a Post request using AngularJS

Introduction to React with Typescript: Greeting the World

"Object.entries seems to be returning only the initial object in the list

Adjust the color of the paper in Material-UI

What is the best way to change the size of a QR code

AngularJS using the ng-controller directive

Generate incorrect JSON for a negative test in TypeScript

Ways to execute the pdf.js node demonstrations?

Am I utilizing the htmlspecialchars function properly?

Tips for eliminating one or multiple spaces preceding text in an input field

Received an error while attempting to install react-router-dom

Managing iframe scrolling using the parent window's scrollbar

How can HtmlUnit be used to identify and address website pages that display errors?