Add TypeScript to the frontend

[fabienheureux]

:wave:

First of all thanks for this project, it seems nicely done (I did not have a lot of time to play with yet).

The move to typescript would be quite easy. Would you be open to migrate to typescript for the frontend part ? I could open a PR if you like.

Edit & TLDR: it won't be implemented soon, but I have written a comment below explaining how to add TypeScript to Wagtail-Pipit: https://github.com/Frojd/Wagtail-Pipit/issues/331#issuecomment-774502137 Also: I forked Pipit to add some ideas of mine, and I added TS in the process. You can see this here: https://github.com/l-etabli/wagtail-debut

[fabienheureux]

French updates aside, you can see a summary of the typescript update here: https://github.com/Frojd/Wagtail-Pipit/compare/master...l-etabli:main It is a very basic typescript implementation, relying mainly on default next.js types. At this stage, it already helped me noticing a few errors in the code (like bad imports for example).

[marteinn]

HI @fabienheureux, thanks for showing interest in Pipit and I hope it suits your needs, otherwise feedback are much welcome :)

Regarding Typescript, its a tricky subject for us, we have discussed it internally a few times at Fröjd (the agency that does most of the development of this boilerplate) but have so far decided to keep using JS, mainly because we feel that it complicates our types of project. Nothing is set in stone and we will continue to revisit this question in the future.

When it comes to the frontend/Next.js part of this project, we have a goal to port it to a create-next-app boilerplate, that way we can detach it from the Pipit and make it easier to switch for something else, like a typescript version. I think that will happen it the upcoming months.

So for now, lets keep this issue open as a reference to others that wish to use Typescript + Pipit.

If you have other ideas, issues is a good way to go, you can otherwise find us for discussion at the Wagtail Slack under channel #pipit

[fabienheureux]

Thanks for your reply !

Moving the frontend out of the project could be a great idea ! I started forking the project with a few ideas in mind

• Have the option to use gatsby instead of next (or no React framework at all)
• Have the option to have a standard wagtail frontend without decoupled frontend
• Have the option to have the django pattern library installed if no decoupled frontend is used
• Have the option to have grapple installed. It was the main reason I forked Pipit: I will work in the following months on a grapple/next.js implementation, and I really liked your approach using cookiecutter.

About typescript, I usually use a very basic implementation and don't necessarily write my own types, but having all the TS ecosystem (autocompletion, typing, etc) help to maintain a better code quality in my opinion.

I will come to the wagtail channel in order to discuss these ideas...

[marteinn]

I noticed that @fabienheureux previous link has stopped working, so I'm just posting a new link here to the new repo where anyone curious in using Typescript + Pipit can take a look and find inspiration: https://github.com/l-etabli/wagtail-debut

(And just to reiterate, we don't have a Typescript port in our roadmap, but its not too difficult to migrate to typescript)

[fabienheureux]

Hi @marteinn, thanks for the link ! Yes in fact, as I am moving away of the initial repo, I decided to remove the "fork" reference from Pipit. However, I will try to keep track of changes in Pipit and backport these in my fork.

For future reference, here is the approach I used to get TS in Pipit

• Follow officiel next.js documentation: https://nextjs.org/docs/basic-features/typescript
• Use js-to-ts converter: https://www.npmjs.com/package/js-to-ts-converter
• Fix a few typing errors: mainly, I had to type errors as any (or provide your own types, I was lazy there): https://github.com/Frojd/Wagtail-Pipit/blob/master/%7B%7Bcookiecutter.project_name%7D%7D/frontend/utils/Http.js#L28
• Be careful to keep some config file as js files, for example: https://github.com/l-etabli/wagtail-debut/blob/main/%7B%7Bcookiecutter.project_name%7D%7D/frontend/config/jest/cssTransform.js (unfortunately...I rebased after the move to typescript in my repo, but you can still take a look there to get a sense of what need to be kept as .js files)
• And...that should be enough to have a TS-ready frontend :)

[marteinn]

Thanks for clarifying @fabienheureux and for the awesome links!