Migrate codebase to Typescript

[rickstaa]

Is your feature request related to a problem? Please describe.

We currently use javascript + type definitions. I, however, think migrating the project to typescript will significantly improve the development experience since it allows us to catch errors earlier.

Extra information

There were some attempts in the past that people can build upon if they want to take on this issue:

• Refactor project with TypeScript and JSX & Support LeetCode Card #1288
• Typescript #832

Additionally, @HwangTaehyun translated part of the codebase to typescript when creating https://github.com/HwangTaehyun/github-contributor-stats.

[guriWiz]

Hi @rickstaa,

I would like to work on this issue if that's okay with you as part of hacktoberfest.

[rickstaa]

@Guri-X First of all, welcome to the community! 🚀 Amazing that you decided to choose to improve GRS as part of https://hacktoberfest.com. Both me and, to my knowledge also, @anuraghazra are big fans of typescript, so having this repository in typescript would be amazing! I assigned you to the issue.Feel free to tag me if you have any questions.

[rickstaa]

Let me know if the hacktoberfest proposal is accepted. Other candidates would be #1761 or #2053. For the last one, you could ask to team up with @Pranav2612000.

[guriWiz]

Thanks @rickstaa for the references. I'll update here as soon as I made some progress.

[HwangTaehyun]

@Guri-X @rickstaa Can I participate too? I also really like typescript and I am very interested in it! Also, since I've worked here once, I think it might be helpful.

[guriWiz]

Of course @HwangTaehyun, everyone is welcomed to join. I'm currently a beginner when it comes to typescript so I think i'll get to learn a lot from you.

[anuraghazra]

Let's TypeScript this bad boy.

[rickstaa]

Let's TypeScript this bad boy.

The typescript master has spoken! Let's do this 🚀.

@Guri-X, @HwangTaehyun please check #2076 for GRS-related information about this year's Hacktoberfest. I just signed up as a maintainer and read the guidelines. For your contributions to be valid Hacktoberfest PRs, you must create separate PRs. Therefore, I think it is best that one of you performs the initial typescript setup (see https://webpack.js.org/guides/typescript/) and shares that commit with the other. After that, you can divide folders or files to work on. Feel free to let us know if you have any questions or run into problems 🤓.

[rickstaa]

@HwangTaehyun, I know you already migrated part of the code to typescript in https://github.com/HwangTaehyun/github-contributor-stats. Maybe you can set up the initial typescript template and add the types you already have, after which you can divide the remaining files?

[rickstaa]

Happy hacking! 🚀

[HwangTaehyun]

@rickstaa That's a good idea! I will set up initial typescript settings for this project and divide the remaining files with @Guri-X.

[rickstaa]

Great. If you want, you can join the GRS-hacktoberfest discord if you want an easier way to discuss.

[guriWiz]

That's a good idea @rickstaa. Thanks for suggesting this.

[anuraghazra]

Pro tip:

Rely on tests while migrating. But also make sure vercel deployment is working. via vercel CLI

[lostgirljourney]

@rickstaa @HwangTaehyun @Guri-X... I'm a beginner in typescript and would love to contribute, any leads for this?

[rickstaa]

@lostgirljourney Thank you for considering helping with this issue! 🔥🚀 Since this conversion is quite a big task, I allowed both @HwangTaehyun and @Guri-X to work on it. I assigned @HwangTaehyun as the team leader for this issue. If @HwangTaehyun thinks an extra pair of hands is useful, he can assign you some files to convert. 👍🏻 The important thing is that I receive three separate PRs, one from each of you for it to count towards the Hacktoberfest submission.

[HwangTaehyun]

@lostgirljourney Welcome to join us! Join the discode channel! I applied typescript and webpack settings and dividing some files to migrate. I think three passionate people would be great!

[cjdomacena]

@rickstaa @lostgirljourney @HwangTaehyun @Guri-X I'm quite new to typescript if you have available spots I would like to contribute

[rickstaa]

@cjdomacena Great that you want to contribute to GRS! I will leave the decision to @HwangTaehyun, but unfortunately, I think three people are enough to complete this task.

We seem to be a popular repository to contribute to during Hacktoberfest, so, unfortunately, most Hacktoberfest issues are already in progress (see https://github.com/anuraghazra/github-readme-stats/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22). The only one that is not yet taken is:

• New tiny error url does not fit on card #1774

and two that might become available are:

• Improve caching documentation #1760.
• Document auto theme change in README #2074

You can, of course, also suggest your own ideas (see #2076), or check the Hacktoberfest discord to see if other projects are still looking for contributers.

[cjdomacena]

@rickstaa Sure no worries. I would like to take #1774 if its okay

[CallMeEchoCodes]

hey @rickstaa! just wanted to ask if i could help with this issue as a part of hacktoberfest.

[rickstaa]

@CallMeEchoCodes Great that you want to contribute to GRS. I will leave that decision to @HwangTaehyun (see my previous comment).

[rickstaa]

@CallMeEchoCodes and @cjdomacena #2074 just became available again as a Hacktoberfest submission.

[lostgirljourney]

@lostgirljourney Welcome to join us! Join the discode channel! I applied typescript and webpack settings and dividing some files to migrate. I think three passionate people would be great!

@HwangTaehyun hi, sorry for the late reply, had some work. Can I get a brief on what just happened?

[rickstaa]

@lostgirljourney No problem, we are nearly finished with the first migration (see #2108). After that @HwangTaehyun will divide the files between the three of you. We are discussing this in GRS-hacktoberfest discord.

[rickstaa]

@rickstaa Sure no worries. I would like to take #1774 if its okay

@cjdomacena great! Can you maybe comment on #1774 so that I can assign you?

[cjdomacena]

@rickstaa The issue seemed to be locked. It won't let me comment

[rickstaa]

@cjdomacena O, sorry, I meant #2074.

[mehulbaid]

@rickstaa I want in on this too

[rickstaa]

@rickstaa I want in on this too

@mehulbaid Great that you want to contribute to GRS. 💪🏻 Unfortunately, I think enough people are already working on this issue (see #2052 (comment)).

[yaten2302]

Hi @rickstaa, @HwangTaehyun, may I also participate in this issue, I'm new to TypeScript, but I'm willing to learn and improve my TypeScript skills. My previous contributions in GRS:

1. Creates a new Streaks Card #3338
2. Added card_width argument to gist card #3467

[rickstaa]

Hi @rickstaa, @HwangTaehyun, may I also participate in this issue, I'm new to TypeScript, but I'm willing to learn and improve my TypeScript skills. My previous contributions in GRS:

1. Creates a new Streaks Card #3338
2. Added card_width argument to gist card #3467

@yaten2302 It's great that you want to help us transfer to Typescript. Since we already have type declarations, I wonder if a translation to a pure typescript project is still desired. I'm a big fan of typescript, so I'm okay with translating the entire codebase, but it might not be worth the development effort 🤔. Let's check what @anuraghazra and @qwerty541 think.

[qwerty541]

Hi @rickstaa, @HwangTaehyun, may I also participate in this issue, I'm new to TypeScript, but I'm willing to learn and improve my TypeScript skills. My previous contributions in GRS:

1. Creates a new Streaks Card #3338
2. Added card_width argument to gist card #3467

@yaten2302 It's great that you want to help us transfer to Typescript. Since we already have type declarations, I wonder if a translation to a pure typescript project is still desired. I'm a big fan of typescript, so I'm okay with translating the entire codebase, but it might not be worth the development effort 🤔. Let's check what @anuraghazra and @qwerty541 think.

@rickstaa As I previously told there, migration on Typescript is one of my goals on this project. I think that this is a significant change and it would be better if this was implemented by core team member. I intended to tackle this and other tasks in the following order:

• Query string parameters validation for stats card endpoint. feature: implement basic querystring params validation (resolves #3055) #3393
• Query string parameters validation for other endpoints.
• Migration on Typescript.
• Prepare and publish NPM module.
• Cards generation website.
• GitHub action.

[rickstaa]

Hey @qwerty541, thanks for the explanation. I'm totally on board with migrating to TypeScript, especially considering that a significant portion of the groundwork was already laid out during Hacktoberfest two years ago (you can check out the progress here: GitHub Pull Request #2108). Your roadmap aligns perfectly with my vision for the project:

1. Address #2052: Ideally, transitioning to TypeScript seems like a smart move. I recall that it was anticipated to streamline the ES module release, thanks to TypeScript's handling of certain aspects.
2. #2537: Prioritize the release of the GitHub action.
3. Incorporate changes from GitHub Pull Request #2111 within an environmental variable, allowing us to enable it seamlessly within the GitHub action.
4. Implement the improvements outlined in GitHub Issue #2282 using an environmental variable.
5. Merge the changes proposed in GitHub Pull Request #2107.
6. Address the long-standing issue presented in GitHub Issue #1.
7. As for GitHub Issue #1761, we should look into creating a dedicated card generation website.

Regarding GitHub Pull Request #3393, I wasn't aware that you had updated the code and removed strict query parameter checking. I'd be open to merging it in its new form. I'll aim to review it at the beginning of January when my workload eases up a bit. 👍🏻

[Rudxain]

I was wondering why nobody suggested jsconfig. Wouldn't it be easier to use that, and then gradually transition to TS?