Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeScript migration

See original GitHub issue

Co-ordination

As discussed in the last contributors meeting we’re looking to migrate our client to TypeScript.

In order to help people work in parallel this issue can be used to track who is working on what. I’ve put a checklist of all the unmigrated files at the bottom. If you want to work on a file or some files, please edit in your github username next to the file(s) you want to work on. If you don’t have edit permission, please just reply to this issue @ me and I’ll take care of it.

Guidelines

Take a look at the Codebase Best Practices

Small is beautiful

If a file can be migrated on its own, that’s perfect. That makes the PR incredibly easy to review and minimises the chance we break anything.

PropTypes can go

None of the components in the client dirs are intended to be consumed by JavaScript components - eventually everything will be tsx. With that in mind static type checking should be enough.

React Guidelines

So, we’re all on the same page: https://github.com/typescript-cheatsheets/react#readme has some useful advice. Mostly the linters will warn us, but this is definitely worth a look.

un-typed packages

If the package does not come with types attached, then please npm i the definitions (if they exist) from DefinitelyTyped. Usually they’re just published as @types/name-of-package.

Ignore linting if necessary

Migration should be incremental and painless. If you find that fixing the type and lint errors can’t be done without migrating all the related files, feel free to use @ts-ignore or eslint-disable. However, this should only be a last resort when the problems cannot be addressed otherwise.

That said, it’s more important that each change is easy to understand and review than it is it write perfect TS. We’ll get there eventually.

Keeping Git History

Sometimes changing the file from <filename>.js -> <filename>.tsx? causes the original file to be deleted, and a new one created, and other times the filename just changes - in terms of Git. Ideally, we want the file history to be preserved.

The best bet at achieving this is by:

Rename the file
Commit with the flag --no-verify to prevent husky from complaining about the errors
Refactor to TS for migration, in a separate commit.

Note: Editors like VSCode are still likely to show you the file has been deleted and a new one created. If you use the CLI to git add ., then VSCode will show the file as renamed in stage

Tests are running

We will not be merging any PRs with failing tests.

Files that cannot be migrated (yet)

In order to migrate gatsby-node.js, gatsby-config.js and any files that they import requires additional tooling.

To finish migrating the client, we would need additional tooling to handle gatsby-config, gatsby-node and files they import. This could either be an extra tsc compilation step or potentially via ts-node. However, I’m not sure if ts-node would integrate nicely with gatsby develop or gatsby build, so the compilation approach is probably easier.

Before going ahead with this, we should profile gatsby develop and gatsby build to make sure that the time to develop and build the site do not increase too much.

More guidelines may get added

As we do this, chances are we’ll revise the approach. Any thoughts/comments/critiques are welcome, but I wanted to keep this straightforward for now.

list of files left to migrate (collapsed because it's rather long)

/client/utils/challengeTypes.js @awu43
/client/src/utils/format.js (Not currently possible to migrate)
/client/src/templates/Introduction/Intro.js @vishwasnavadak
/client/src/templates/Introduction/SuperBlockIntro.js @vishwasnavadak
/client/src/templates/Introduction/redux/index.js @ShaunSHamilton
/client/src/templates/Introduction/components/Block.js @Ismailtlem
/client/src/templates/Introduction/components/CertChallenge.js @Ismailtlem
/client/src/templates/Introduction/components/CertificationCard.js @Ismailtlem
/client/src/templates/Introduction/components/Challenges.js @shubhangi013
/client/src/templates/Introduction/components/ClaimCertSteps.js @Ismailtlem
/client/src/templates/Introduction/components/SuperBlockIntro.js @Ismailtlem
/client/src/templates/Challenges/utils/build.js @Nirajn2311
/client/src/templates/Challenges/utils/frame.js @Nirajn2311
/client/src/templates/Challenges/utils/getTargetEditor.js @Nirajn2311
/client/src/templates/Challenges/utils/index.js @Nirajn2311
/client/src/templates/Challenges/utils/index.test.js @Nirajn2311
/client/src/templates/Challenges/utils/postUpdate$.js @Nirajn2311
/client/src/templates/Challenges/utils/worker-executor.js @Nirajn2311
/client/src/templates/Challenges/utils/worker-executor.test.js @Nirajn2311
/client/src/templates/Challenges/redux/code-lock-epic.js @ShaunSHamilton
/client/src/templates/Challenges/redux/code-storage-epic.js @ShaunSHamilton
/client/src/templates/Challenges/redux/completion-epic.js @ShaunSHamilton
/client/src/templates/Challenges/redux/create-question-epic.js @ShaunSHamilton
/client/src/templates/Challenges/redux/create-question-epic.test.js @ShaunSHamilton
/client/src/templates/Challenges/redux/current-challenge-saga.js @ShaunSHamilton
/client/src/templates/Challenges/redux/execute-challenge-saga.js @ShaunSHamilton
/client/src/templates/Challenges/redux/index.js @ShaunSHamilton
/client/src/templates/Challenges/rechallenge/builders.js ( Not migrateble at the moment)
/client/src/templates/Challenges/rechallenge/throwers.js
/client/src/templates/Challenges/rechallenge/transformers.js
/client/src/templates/Challenges/components/Test-Suite.js
/client/src/templates/Challenges/components/Tool-Panel.js
/client/src/templates/Challenges/classic/DesktopLayout.js @ShaunSHamilton
/client/src/templates/Challenges/classic/EditorTabs.js @meronokbay
/client/src/templates/Challenges/classic/MobileLayout.js @meronokbay
/client/src/templates/Challenges/classic/MultifileEditor.js @meronokbay
/client/src/redux/accept-terms-saga.js @ShaunSHamilton
/client/src/redux/app-mount-saga.js @ShaunSHamilton
/client/src/redux/cookieValues.js @ShaunSHamilton
/client/src/redux/createStore.js @ShaunSHamilton
/client/src/redux/donation-saga.js @ShaunSHamilton
/client/src/redux/error-saga.js @ShaunSHamilton
/client/src/redux/failed-updates-epic.js @ShaunSHamilton
/client/src/redux/failed-updates-epic.test.js @ShaunSHamilton
/client/src/redux/fetch-user-saga.js @ShaunSHamilton
/client/src/redux/ga-saga.js @ShaunSHamilton
/client/src/redux/ga-saga.test.js @ShaunSHamilton
/client/src/redux/hard-go-to-epic.js @ShaunSHamilton
/client/src/redux/index.js @ShaunSHamilton
/client/src/redux/night-mode-saga.js @ShaunSHamilton
/client/src/redux/report-user-saga.js @ShaunSHamilton
/client/src/redux/rootEpic.js @ShaunSHamilton
/client/src/redux/rootReducer.js @ShaunSHamilton
/client/src/redux/rootSaga.js @ShaunSHamilton
/client/src/redux/show-cert-saga.js @ShaunSHamilton
/client/src/redux/update-complete-epic.js @ShaunSHamilton
/client/src/redux/settings/danger-zone-saga.js @ShaunSHamilton
/client/src/redux/settings/index.js @ShaunSHamilton
/client/src/redux/settings/settings-sagas.js @ShaunSHamilton
/client/src/redux/settings/update-email-saga.js @ShaunSHamilton
/client/src/redux/settings/update-legacy-certificate-saga.js @ShaunSHamilton
/client/src/components/settings/Certification.test.js (@Nirajn2311)
/client/src/components/settings/Honesty.test.js (@Nirajn2311)
/client/src/components/search/redux/index.js @ShaunSHamilton
/client/src/components/layouts/Default.js @sharmaabhinav
/client/src/components/layouts/Learn.js @sharmaabhinav
/client/src/components/landing/Landing.test.js
/client/src/components/landing/index.js
/client/src/components/landing/components/AsSeenIn.js @sembauke
/client/src/components/landing/components/BigCallToAction.js @sembauke
/client/src/components/landing/components/CampersImage.js @sembauke
/client/src/components/landing/components/Certifications.js @sembauke
/client/src/components/landing/components/LandingTop.js @sembauke
/client/src/components/landing/components/Testimonials.js @sembauke
/client/src/components/helpers/index.js @Mvrs
/client/src/components/formHelpers/Form.js @vishwasnavadak
/client/src/components/formHelpers/Form.test.js @vishwasnavadak
/client/src/components/formHelpers/FormFields.js @vishwasnavadak
/client/src/components/formHelpers/FormValidators.js @vishwasnavadak
/client/src/components/formHelpers/index.js @vishwasnavadak
/client/src/components/SolutionViewer/ProjectModal.js @ashiskumar-1999
/client/src/components/SolutionViewer/SolutionViewer.js @ashiskumar-1999
/client/src/components/Map/Map.test.js @sharmaabhinav
/client/src/components/Intro/Intro.test.js @sharmaabhinav
/client/src/components/Intro/index.js @sharmaabhinav
/client/src/components/Flash/redux/index.js (@ShaunSHamilton)
/client/src/components/Donation/assets/ApplePay.js @Nrestrepo05
/client/src/components/Donation/assets/GooglePay.js @Nrestrepo05
/client/src/client/frame-runner.js @ManuSquall
/client/src/client/workers/sass-compile.js @meronokbay
/client/src/client/workers/test-evaluator.js @meronokbay
/client/src/tests/integration/handled-error.test.js @Mvrs
/client/src/mocks/challenge-nodes.js @Mvrs
/client/src/mocks/fileMock.js @Mvrs
/client/src/mocks/gatsby-link.js @Mvrs
/client/src/mocks/gatsby.js @Mvrs
/client/src/mocks/react-i18nextMock.js @Mvrs
/client/src/mocks/styleMock.js @Mvrs
/client/i18n/config.js @Mvrs
/client/i18n/configForTests.js @Mvrs
/client/i18n/locales.test.js @Mvrs
/client/i18n/schema-validation.js @Mvrs
/client/i18n/validate-keys.js @Mvrs

Merged (at Party)

/client/src/templates/Challenges/components/Challenge-Title.js (@moT01)
/client/src/templates/Challenges/components/ChallengeTitle.test.js (@moT01)
/client/src/templates/Challenges/components/CompletionModal.js (@moT01)
/client/src/templates/Challenges/components/CompletionModal.test.js (@moT01)
/client/src/templates/Challenges/components/CompletionModalBody.js (@moT01)
/client/src/templates/Challenges/components/CompletionModalBody.test.js (@moT01)
/client/src/templates/Challenges/components/Hotkeys.js (@moT01)
/client/src/templates/Challenges/components/Output.js ( @thecodingaviator )
/client/src/templates/Challenges/components/ResetModal.js (@moT01)
/client/src/templates/Challenges/codeally/show.js (@moT01)
/client/src/templates/Challenges/classic/Show.js (@moT01)
/client/src/redux/propTypes.js (@ShaunSHamilton)
/client/src/pages/404.js @awu43
/client/src/pages/certification.js @awu43
/client/src/pages/challenges.js @awu43
/client/src/pages/challenges.test.js @awu43
/client/src/pages/donate.js @awu43
/client/src/pages/email-sign-up.js @awu43
/client/src/pages/index.js @awu43
/client/src/pages/learn.js @awu43
/client/src/pages/settings.js @awu43
/client/src/pages/unsubscribed.js @awu43
/client/src/pages/update-email.js @awu43
/client/src/pages/user.js @awu43
/client/src/components/AppMountNotifier.js @sharmaabhinav
/client/src/components/settings/About.js (@Nirajn2311)
/client/src/components/settings/DangerZone.js (@Nirajn2311)
/client/src/components/settings/DeleteModal.js (@Nirajn2311)
/client/src/components/settings/Email.js (@Nirajn2311)
/client/src/components/settings/Honesty.js (@Nirajn2311)
/client/src/components/settings/Internet.js (@Nirajn2311)
/client/src/components/settings/Portfolio.js (@Nirajn2311)
/client/src/components/settings/Privacy.js (@Nirajn2311)
/client/src/components/settings/ResetModal.js (@Nirajn2311)
/client/src/components/settings/SectionHeader.js (@Nirajn2311)
/client/src/components/settings/Theme.js (@Nirajn2311)
/client/src/components/settings/ToggleSetting.js (@Nirajn2311)
/client/src/components/settings/Username.js (@Nirajn2311)
/client/src/components/search/searchPage/EmptySearch.js @krishna-saurav
/client/src/components/search/searchPage/NoResults.js @krishna-saurav
/client/src/components/search/searchPage/SearchPageHits.js @krishna-saurav
/client/src/components/search/searchBar/NoHitsSuggestion.js @krishna-saurav
/client/src/components/search/searchBar/SearchBar.js @krishna-saurav
/client/src/components/search/searchBar/SearchBar.test.js @krishna-saurav
/client/src/components/search/searchBar/SearchHits.js @krishna-saurav
/client/src/components/search/searchBar/SearchSuggestion.js @krishna-saurav
/client/src/components/profile/Profile.js @Dripcoding
/client/src/components/profile/Profile.test.js @Dripcoding
/client/src/components/profile/components/Camper.js @Dripcoding
/client/src/components/profile/components/Certifications.js @Dripcoding
/client/src/components/profile/components/HeatMap.js @Dripcoding
/client/src/components/profile/components/HeatMap.test.js @Dripcoding
/client/src/components/profile/components/Portfolio.js @Dripcoding
/client/src/components/profile/components/SocialIcons.js @Dripcoding
/client/src/components/profile/components/TimeLine.js @Dripcoding
/client/src/components/profile/components/TimeLine.test.js @Dripcoding
/client/src/components/profile/components/TimelinePagination.js @Dripcoding
/client/src/components/helpers/AvatarRenderer.js ( @thecodingaviator )
/client/src/components/helpers/ButtonSpacer.js ( @thecodingaviator )
/client/src/components/helpers/CurrentChallengeLink.js @Mvrs
/client/src/components/helpers/FullWidthRow.js ( @thecodingaviator )
/client/src/components/helpers/ImageLoader.js ( @thecodingaviator )
/client/src/components/helpers/Link.js ( @thecodingaviator )
/client/src/components/helpers/Link.test.js ( @thecodingaviator )
/client/src/components/helpers/Loader.js ( @thecodingaviator )
/client/src/components/helpers/Loader.test.js ( @thecodingaviator )
/client/src/components/helpers/SkeletonSprite.js @Mvrs
/client/src/components/helpers/SlimWidthRow.js @Mvrs
/client/src/components/helpers/Spacer.js @Mvrs
/client/src/components/helpers/ToggleButton.js @Mvrs
/client/src/components/helpers/borderColorPicker.js ( @thecodingaviator )
/client/src/components/helpers/form/BlockSaveButton.js ( @thecodingaviator )
/client/src/components/helpers/form/BlockSaveWrapper.js ( @thecodingaviator )
/client/src/components/formHelpers/BlockSaveButton.js ( @thecodingaviator )
/client/src/components/formHelpers/BlockSaveButton.test.js ( @thecodingaviator )
/client/src/components/formHelpers/BlockSaveWrapper.js ( @thecodingaviator )
/client/src/components/formHelpers/BlockSaveWrapper.test.js ( @thecodingaviator )
/client/src/components/OfflineWarning/index.js @mnlightstone
/client/src/components/Header/index.js @akshatgarg12
/client/src/components/Header/components/AuthOrProfile.js @akshatgarg12
/client/src/components/Header/components/Login.js @akshatgarg12
/client/src/components/Header/components/MenuButton.js @akshatgarg12
/client/src/components/Header/components/NavLinks.js @akshatgarg12
/client/src/components/Header/components/NavLogo.js @akshatgarg12
/client/src/components/Header/components/UniversalNav.js @akshatgarg12
/client/src/components/Header/components/UserState.js @akshatgarg12
/client/src/client-only-routes/ShowCertification.js (@ShaunSHamilton)
/client/src/client-only-routes/ShowProfileOrFourOhFour.js (@ShaunSHamilton)
/client/src/client-only-routes/ShowProjectLinks.js (@ShaunSHamilton)
/client/src/client-only-routes/ShowSettings.js (@ShaunSHamilton)
/client/src/client-only-routes/ShowSettings.test.js (@ShaunSHamilton)
/client/src/client-only-routes/ShowUnsubscribed.js (@ShaunSHamilton)
/client/src/client-only-routes/ShowUser.js (@ShaunSHamilton)
/client/src/assets/images/components/AmazonLogo.js ( @thecodingaviator )
/client/src/assets/images/components/AppleLogo.js ( @thecodingaviator )
/client/src/assets/images/components/AsFeatureLogo.js ( @thecodingaviator )
/client/src/assets/images/components/GoogleLogo.js ( @thecodingaviator )
/client/src/assets/images/components/MicrosoftLogo.js ( @thecodingaviator )
/client/src/assets/images/components/SpotifyLogo.js ( @thecodingaviator )
/client/src/assets/images/components/index.js ( @thecodingaviator )
/client/src/assets/icons/APIIcon.js ( @thecodingaviator )
/client/src/assets/icons/Algorithm.js ( @thecodingaviator )
/client/src/assets/icons/Analytics.js ( @thecodingaviator )
/client/src/assets/icons/Caret.js ( @thecodingaviator )
/client/src/assets/icons/CertificationIcon.js ( @thecodingaviator )
/client/src/assets/icons/Clipboard.js ( @thecodingaviator )
/client/src/assets/icons/Cup.js ( @thecodingaviator )
/client/src/assets/icons/D3Icon.js ( @thecodingaviator )
/client/src/assets/icons/DefaultAvatar.js ( @thecodingaviator )
/client/src/assets/icons/DonateWithPayPal.js ( @thecodingaviator )
/client/src/assets/icons/Fail.js ( @thecodingaviator )
/client/src/assets/icons/FreeCodeCampLogo.js ( @thecodingaviator )
/client/src/assets/icons/GreenNotCompleted.js ( @thecodingaviator )
/client/src/assets/icons/GreenPass.js ( @thecodingaviator )
/client/src/assets/icons/Heart.js ( @thecodingaviator )
/client/src/assets/icons/Initial.js ( @thecodingaviator )
/client/src/assets/icons/IntroInformation.js ( @thecodingaviator )
/client/src/assets/icons/JavaScriptIcon.js ( @thecodingaviator )
/client/src/assets/icons/LinkButton.js ( @thecodingaviator )
/client/src/assets/icons/PythonIcon.js ( @thecodingaviator )
/client/src/assets/icons/ReactIcon.js ( @thecodingaviator )
/client/src/assets/icons/ResponsiveDesign.js ( @thecodingaviator )
/client/src/assets/icons/Shield.js ( @thecodingaviator )
/client/src/assets/icons/Spacer.js ( @thecodingaviator )
/client/src/assets/icons/TensorflowIcon.js ( @thecodingaviator )
/client/src/assets/icons/ToggleCheck.js ( @thecodingaviator )
/client/src/assets/icons/index.js ( @thecodingaviator )
/client/src/analytics/index.js ( @thecodingaviator )
/client/src/analytics/mocks/index.js ( @thecodingaviator )
/client/utils/index.js @awu43
/client/utils/stateManagement.js @awu43
/client/utils/tags.js @awu43
/client/utils/tags.test.js @awu43
/client/utils/gatsby/layoutSelector.js @awu43
/client/utils/gatsby/layoutSelector.test.js @awu43
/client/src/utils/ajax.js @awu43
/client/src/utils/algolia-locale-setup.js @awu43
/client/src/utils/curriculum-helpers.test.js @awu43
/client/src/utils/format.test.js @awu43
/client/src/utils/get-words.js @awu43
/client/src/utils/handled-error.js @awu43
/client/src/utils/handled-error.test.js @awu43
/client/src/utils/index.js @awu43
/client/src/utils/reallyWeirdErrorMessage.js @awu43
/client/src/utils/report-error.js @awu43
/client/src/utils/reportedErrorMessage.js @awu43
/client/src/utils/scriptLoaders.js @awu43
/client/src/utils/standardErrorMessage.js @awu43
/client/src/utils/to-learn-path.js @awu43
/client/src/pages/search.js @awu43
/client/src/components/RedirectHome.js ( @thecodingaviator )
/client/src/components/createExternalRedirects.js ( @thecodingaviator )
/client/src/components/createExternalRedirects.test.js ( @thecodingaviator )
/client/src/components/createLanguageRedirect.js ( @thecodingaviator )
/client/src/components/createLanguageRedirect.test.js ( @thecodingaviator )
/client/src/components/createRedirect.js ( @thecodingaviator )
/client/src/components/settings/Certification.js (@Nirajn2311)
/client/src/components/Donation/DonateCompletion.js @Nrestrepo05
/client/src/components/Donation/DonateForm.js @Nrestrepo05
/client/src/components/Donation/DonationModal.js @Nrestrepo05
/client/src/components/Donation/DonationTextComponents.js @Nrestrepo05
/client/src/components/Donation/PayPalButtonScriptLoader.js @Nrestrepo05
/client/src/components/Donation/PaypalButton.js @Nrestrepo05
/client/src/components/Intro/components/IntroDescription.js @Ismailtlem
/client/src/components/Header/Header.test.js @Ismailtlem
/client/src/components/FourOhFour/index.js @nhcarrigan
/client/src/components/Footer/Footer.test.js ( @thecodingaviator )
/client/src/components/Footer/index.js ( @thecodingaviator )
/client/src/templates/Challenges/projects/SolutionForm.js ( @Sembauke )
/client/src/templates/Challenges/projects/Tool-Panel.js ( @thecodingaviator )
/client/src/components/search/WithInstantSearch.js @awu43
/client/src/templates/Challenges/components/PrismFormatted.js ( @thecodingaviator )
/client/src/templates/Challenges/classic/ActionRow.js @meronokbay
/client/src/templates/Challenges/classic/Editor.js (@ShaunSHamilton)
/client/src/resources/certAndProjectMap.js ( @thecodingaviator )
/client/src/resources/honesty-policy.js ( @thecodingaviator )
/client/src/components/layouts/Certification.js @RaymenDeol
/client/src/components/layouts/index.js @Ismailtlem
/client/src/components/helpers/skeletonStyles.js @Mvrs
/client/src/components/OfflineWarning/OfflineWarning.js @mnlightstone
/client/src/components/Map/index.js @sharmaabhinav
/client/src/html.js ( @thecodingaviator )
/client/src/utils/createTypes.js @ShaunSHamilton
/client/src/utils/__fixtures/curriculum-helpers-css.js ( @thecodingaviator )
/client/src/utils/__fixtures/curriculum-helpers-html.js ( @thecodingaviator )
/client/src/utils/__fixtures/curriculum-helpers-javascript.js ( @thecodingaviator )
/client/src/utils/__fixtures/curriculum-helpers-remove-white-space.js ( @thecodingaviator )
/client/src/templates/Challenges/video/Show.js (@moT01)
/client/src/templates/Challenges/projects/frontend/Show.js (@moT01)
/client/src/templates/Challenges/projects/backend/Show.js (@moT01)
/client/src/templates/Challenges/components/BreadCrumb.js (@moT01)
/client/src/templates/Challenges/components/Challenge-Description.js (@sembauke)
/client/src/templates/Challenges/components/HelpModal.js @iigorcunha
/client/src/templates/Challenges/components/Preview.js @iigorcunha
/client/src/templates/Challenges/components/Side-Panel.js @iigorcunha
/client/src/templates/Challenges/components/VideoModal.js @iigorcunha

Issue Analytics

State:
Created 2 years ago
Comments:132 (118 by maintainers)

Top GitHub Comments

11reactions

raisedadeadcommented, Jun 18, 2021

This is going to be a merge-party issue. We will merge all linked PRs in a virtual party where we can have all contributors: just-chatting, reviewing PRs (resolving conflicts) and landing them.

The schedule is TBD. For now, keep churning those PRs 😃

Update: Here is the link to the party details - https://forum.freecodecamp.org/t/merge-party-typescript/465413

5reactions

Sembaukecommented, May 26, 2021

For contributors:

camelCase
PascalCase
snake_case
kebab-case

Top Results From Across the Web

Documentation - Migrating from JavaScript - TypeScript

Converting a JavaScript codebase over to TypeScript is, while somewhat tedious, usually not challenging. In this tutorial, we're going to look at how...

Migrating millions of lines of code to TypeScript - Stripe

On Sunday March 6, we migrated Stripe's largest JavaScript codebase (powering the Stripe Dashboard) from Flow to TypeScript.

A simple guide for migrating from JavaScript to TypeScript

This article shows you how to easily migrate a React component from JavaScript to TypeScript to improve your project.

10 Strategies for migrating to TypeScript - Exploring JS

These are three strategies for migrating to TypeScript: We can support a mix of JavaScript and TypeScript files for our code base.

JS Migration Guide - TypeScript Deep Dive - Gitbook

JS Migration Guide · Add a tsconfig.json . · Change your source code file extensions from .js to .ts . · Write new...