HarshKumarraghav / periodically

Periodically - is a free web application which displays the entire Periodic Table at startup interface. The table has a long- form approved by the International Union of Pure and Applied Chemistry (IUPAC) as the core.
https://periodically.tech
Apache License 2.0
26 stars 15 forks source link

Migrate Js code to typescript code #48

Open HarshKumarraghav opened 1 year ago

HarshKumarraghav commented 1 year ago

Describe the Issue

We need to migrate our existing JavaScript codebase to TypeScript in order to improve maintainability, enhance code quality, and take advantage of TypeScript's static type-checking features. This will ensure a more robust and scalable codebase going forward. Key Objectives:

Conversion of JavaScript files to TypeScript files (.js to .ts or *tsx). Add TypeScript type annotations to variables, function parameters, and return types. Identify and resolve any type-related issues and errors. Update import/export statements to use TypeScript module syntax. Configure the TypeScript compiler options (tsconfig.json) according to our project requirements. Gradually introduce type definitions for external libraries or APIs used within the codebase. Expected Deliverables:

All JavaScript files should be migrated to TypeScript files, with the appropriate file extensions (.js to .ts). The TypeScript codebase should be free from any type-related errors or warnings. The code should compile successfully with the TypeScript compiler and produce the desired output. The project's build process and dependencies should be updated to support TypeScript. An updated README file documenting the migration process and any additional setup requirements. Timeline: This migration process is expected to be completed within two weeks. However, please note that the actual timeline may vary depending on the size and complexity of the codebase.

Acceptance Criteria:

The migrated TypeScript codebase is functionally equivalent to the original JavaScript codebase. The codebase passes all relevant tests and demonstrates improved type safety. The project can be successfully built and deployed with the updated TypeScript codebase. The pull request for the migration is reviewed and approved by the development team. Additional Notes: It's essential to keep in mind that while the migration process can help identify and resolve some issues, it might introduce new ones. We should conduct thorough testing and address any issues that arise during the migration process.

If you have any questions or concerns, please feel free to ask.

TerroR75 commented 1 year ago

Hey, I really like your project, it's quite impressive and may be very helpful, so I'd like to help contributing to it. I'm quite new to migrating whole bigger projects like this to typescript, but I'd be happy to at least try. Would you be willing to review my solution IF I'll provide it? So far it's going fine, I'm adding interfaces for different types and I've added a folder called "interfaces". image I have one question though since it's my first bigger contribution, should I disable Prettier formatting in my VS Code to not mess with your formatting? Thanks!

HarshKumarraghav commented 1 year ago

I would love to see your contribution there is no need to disable Prettier formatting it is fine.

TerroR75 commented 1 year ago

I came back to ask if this custom attribute "Discovered" on h1 (Header.js line 180 and ExploreData.js line 155) is necessary because TypeScript is giving me this error: image

and in dev tools console i'm getting this as well: image

TerroR75 commented 1 year ago

Alright, I just created a pull request and let's see how it turns out. Learned a lot and hopefully everything will meet your code standards.