refactor: Move Code to Typescript

[wuda-io]

For cleaner development and also to go with the time it is greatly apprecaiated to move the Codebase to TypeScript.

For consumers of Materialize everything stays the same, so no worries.
The big advantage is for developing the Framework is to have a much better codebase and also reduce the risk of errors,
since the typing system of TypeScript enhances the development experience.

The steps would be:

1. Convert existing JS-Files to TS Files (since TS is a sub-set of JS)
2. Setup the CI-Process to compile the TS-Files down to a single JS-File or to Components (please comment, help appreciated here)
3. Refactor existing Code and Setup Classes, Types and interfaces as needed

I think we should compile using the ES06 Version of JavaScript.
What do you think?

[DanielRuf]

@materializecss/members

[LoganTann]

This need a refactor of the whole codebase. Of course, we will use it once someone is ready to start v2.

But for v1 (which only fixes bug issues), the only alternative is using JsDoc types.

[coffeeandwork]

This need a refactor of the whole codebase. Of course, we will use it once someone is ready to start v2.

But for v1 (which only fixes bug issues), the only alternative is using JsDoc types.

Is there a doc somewhere that talks about what might go into version 2? I looked through the discussions and I could not find one. I did find a couple of closed projects:

• https://github.com/materializecss/materialize/projects/3
• https://github.com/materializecss/materialize/projects/2

I am guessing the projects were closed because there was no activity on them? Would it make sense to create a project (or doc) and start to add tasks to it to get a full picture of what version 2 could look like (if there isn't one already that I haven't found)? I would like to help out if I can.

[ChildishGiant]

There's a milestone for 2.0 https://github.com/materializecss/materialize/milestone/1

[danice]

Hello!
I have done a proof of moving some components to typescript.
See here is the project.

This project includes:

• moving Tabs and Carousel components to typescript
• bundling them with webpack to materialize-css.js file
• loading the bundle from a regular html file and initializing the components

I would say that very few changes where required to move the components (you can see changes needed for tab component here.

I have not bundled the sass files, but I don't think it would give problems.

I think with we can use this as starting point to move the code to typescript and it would not be very difficult.
What do you think? Any ideas or suggestions?

[roiLeo]

Hey, nice work!

What do you think? Any ideas or suggestions?

I would suggest some things:

• avoid using too often any Type
• use const instead of let
• remove jQuery!

[wuda-io]

Hey @danice
That looks awesome. You definitely proofed that it would work!
I think it is a lot to refactor, but I would like to review the changes if we can progress within a PR
step by step and also keeping all the functionality.
We could first start with the CI and then progress to using clean types and interfaces.

Also I agree with @roiLeo and would also remove jQuery if there is not too much damage during the refacoring.
We should consider https://youmightnotneedjquery.com/

[danice]

The jquery was just a confusion, it works the same with cash-dom. I have updated the code without jquery dependency.

The "any" fields are because I used the editor to fix the missing properties. I have not even used the param comments to define function parameter types, so differences with js code be minimum.

[danice]

I see that the framework uses Grunt to process the files. I have no experience processing typescript with Grunt, but I can try it, to minimize CI changes.

[danice]

List of advances in proof project:

• grunt task executing webpack
• autocomplete and dropdown converted (dropdown not tested)
• component intialization with M.AutoInit();
• component initiallization with jquery