← Home

My Experience in Contributing to an Open Source Project

During my first time contributing to a real open-source project, I embarked on a journey of learning various aspects, ranging from project setup to exploring new concepts in JavaScript and TypeScript.

You can make a new instance of a function

A realization that came to light was the significant commonality between functions and classes. Ultimately, the computer compiles the class as a function.

The fact that surprised me the most, is that you can make a new instance of a function, passing its values for it to use.

What particularly caught my attention was the ability to create a new instance of a function by supplying values for it to utilize. In essence, the following two approaches yield equivalent results:

class Person {
    constructor(name) {
        this.name = name;
    }
    greeting() {
        console.log(`Hi! My name is ${this.name}`);
    }
};

const John = new Person("John");

And doing this:

const Person = function(name) {
        const greeting = function() {
                console.log(`Hi! my name is ${name}`)
        }
        return {
                name: name,
                greeting: greeting
        }
};

const John = new Person("name")

Type Declarations in TypeScript Using .d.ts Files

During my contribution, which involved migrating JavaScript files to TypeScript, I encountered a scenario where I needed to generate type declarations for a library's functions. To accomplish this, I created a .d.ts file.

These files exclusively contain type information for type checking and do not produce any .js output.

Exclusion of node_modules Folders in Version Control

The node_modules folder, generated by npm or yarn, contains all locally installed packages defined in packages.json. Typically, this folder is designated to be ignored by version control systems. Consequently, if the inclusion of a .d.ts file is necessary for a file within node_modules, it must be placed in a directory unaffected by .gitignore, allowing the change to be committed.

Conversion of Any Value to Boolean Primitive

By utilizing the Boolean() constructor, it is possible to convert any value to a boolean primitive. This proves particularly advantageous when a function necessitates a strictly boolean return value but returns a "truthy" or "falsy" value.

The conversion can be performed as follows:

Boolean("Your value");

Alternatively, the double NOT (!!) operator can achieve the same result:

!!"Your value"

Indicating to React That a Prop Is Not Undefined

When passing a prop that may be undefined but is assured to possess a value, an exclamation symbol (!) can be appended to indicate this certainty:

const myFunction = function(myProp) {
    return (
        <div>
            <MyComponent neededProp={myProp!} />
        </div>
    );
};

Conclusion

My participation in a single pull request proved to be an invaluable learning experience, ranging from comprehending and analyzing someone else's code to embracing new concepts within familiar programming languages.

In summary, I found that when the learning curve appears to be plain with individual projects, this is a great way to learn and practice new concepts.