Migrating code from Javascript to Typescript

This release I continued to work on Mattermost project. I decided to dive in a little more since all the environment was already set up so I could concentrate on the project itself.

Mattermost started to migrate the mattermost-webapp over to TypeScript to facilitate better code quality There are a lot of opened issues relating to code migration. The issue I picked is to migrate the component/claim module to typescript. For this module, I had to change 2 files: claim_controller.jsx and index.js.

As this is my first experience with code migration I had to do some research. I checked other PRs related to code migration on Mattermost and saw how other people approach it. In addition, I searched for each property, which is defined in the files I worked on, within the project and looked if these properties are used and how they are used in already migrated code.

So the first thing to do is to rename the files to their associated TypeScript extensions (ie. js to ts, jsx to tsx).

Then we need to fix any errors generated by the TypeScript compiler. In order to find those errors we need to run make check-types to display any errors.

After fixing all the errors by generated by the TypeScript compiler, I created a pull request.

Well working on this huge project requires a lot of small changes. This time I got into an issue that required me to remove a file from a commit that has been pushed already.

What happened?

I committed a file package-lock.json and pushed it to the branch I was working on. I continued to work on the project and made several other commits that were pushed as well. Then one of the Mattermost contributors asked me to remove the package-lock.json from the PR.

How to fix this type of issue:

  1. Rebase onto the master branch
git rebase origin/master -i

2. The previous step will open your editor and show you all your commits. Choosereword for the first one and fixup for the rest of the commits. This step will throw away all the commit messages and squash them into a single commit. The first reword will allow changing the commit message for this commit. Save and close the editor.

3. The editor will open again and let you edit the commit message before it saves the final commit. Edit the commit message, save and close it.

4. So far we squash all the commits into a single commit and now I need to remove the package-lock.json file from this commit. Since my package-lock.json is different than the one on the master branch I want to get the file package-lock.json from the origin/head branch and put it in my working dir.

git checkout origin/head package-lock.json

5. Now I want to add this file to the last commit I made without modifying the commit message.

git commit — amend — no-edit

This step will add the original package-lock.json to the commit so it will remove the conflict of having different package-lock.json in my PR.

6. Last step is to push it to the branch with -f (force) since we modifying the commits that were already pushed to the branch.

git push -f origin issue-16144

Hope it will help you when you face this type of issue. :)