TypeScript support

[Bosn]

My project is based on TypeScript, can I use this without lots of work?

[einazare]

Hello @Bosn ,

I honestly do not know how much work you would have to put, to make this work with TypeScript.
As far as i know, material-ui can be used with TypeScript, but our components were not made using TypeScript.
Why not take a look at the free version and see if it suits your needs? (link to free version)

Best,
Manu

[zahidraza]

It would be really nice if it will support typescript too. Any plan on supporting typescript? If yes, then tentative timeline?

[einazare]

Hello @zahidraza ,

Thank you for your interest in our product.
As of moment we do not plan in the near future to support TypeScript in any of our React products, and this is due to the fact that we have some other projects, and we do not have staff for this.
Since there were multiple requests about this, we are going to discuss with the board about this, but once again, we do not have this in plan at the moment and i do not see it happening to soon (in the next 4-6 months).

Best,
Manu

[lmcarreiro]

I would really like to buy this theme, but my project uses typescript too, I'm afraid to spend the money and have a lot of errors when trying to use it.

[einazare]

Hello @lmcarreiro ,

Thank you for your interest in using our product and sorry for this inconvenience.
Would you like to try our free version of this product and see how much you would have to change?
Here is a link for the free version of this product.

Best,
Manu

[Bosn]

@einazare Yes, this theme will surely work with TypeScript! However, without TS declaration files
will make all components any... and lose all benefits of TypeScript.

I strongly want to buy this theme, due to this... I have to wait for the TypeScript support.

Hope it would be implemented in future.

[einazare]

Hello @Bosn ,

We are going to take a look at TypeScript and see how long it would take for us to implement our components in TypeScript, but for now, we kind off have all the lasting months of this year planned out, and i do not see how we could fit in our tight schedule this, but will se what we can do.

Best,
Manu

[keithalpichi]

I came across this repo (https://github.com/Slessi/material-dashboard-react-ts) that has migrated some components to TS. I haven't used it nor tested anything but it's probably useful to look into to help with the migration internally.

Besides the React components being implemented in Typescript you'll need to edit the build steps to handle Typescript. I've spent a whole day on migrating our configuration from the default configuration to handling Typescript. I've tried using react-app-rewired to override the current webpack configuration. I wanted to avoid using npm eject. This didn't work as I kept getting module resolution errors.

Eventually I got it to compile correctly. Here's how I did it:

1. Install tslint, typescript, react-scripts-ts and all necessary @types/* modules
2. Replace scripts in package.json from react-scripts to react-scripts-ts
3. Create a tsconfig.json in the root directory

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "keyofStringsOnly": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

1. Create a tslint.json in the root directory.

{
  "defaultSeverity": "warning",
  "extends": [
    "tslint:recommended",
    "tslint-react"
  ],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  }
}

1. Add a tslint.prod.json in the root directory. react-scripts-ts expects this file for prod

{
  "extends": "./tsconfig.json"
}

1. Add a tslint.test.json in the root directory. react-scripts-ts expects this file for testing

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs"
  }
}

1. Add a images.d.ts in the root directory

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'

1. Rename file src/index.jsx to src/index.tsx
2. Handle tslint and typescript errors in src/index.tsx

[einazare]

Hello there @keithalpichi ,

And thank you for your interest in using our product and thank you for this.
I am going to try and add what you've described in our next update, or maybe we are going to add something in our live docs for our users to know what steps they need to do so that they can migrate our product to TS.

Best,
Manu

[ChrisJamesC]

@keithalpichi Your steps hightlight well what needs to be done. Alternatively I have used https://github.com/wmonk/create-react-app-typescript to not eject but have proper typescript support, I then copy/pasted all files from creative tim to this directory.

[willischen128]

Thanks @ChrisJamesC to point us the create-react-app-typescript.

The Creative-Tim stuff does work there without declaration files. Does anyone know what exactly is the setting there to make this happen? I have an existing project with my own webpack/ts config files (not created by CRA). It would be great if I can apply the same setting.

[Leandro-Andrade]

Hi @einazare back in Jun you said it was not going to happen within 4-6 month.
Any new about the TS support? Is it going to happen any soon? Do you guys have a estimation of when it should happen?
Thank you!

[einazare]

Hello there @Leandro-Andrade ,

Thank you for your interest in working with our products.
At the moment the board decided to start some new projects, and there is no time left to add support for TS as of moment.

Best,
Manu

[futbolsalas15]

One year later... Will we have Tyepscript support?
At least, do you have plans to, at least, create some d.ts files for the components (and maybe, publish into @types repo (https://github.com/DefinitelyTyped/DefinitelyTyped)?

[einazare]

Hello there, @futbolsalas15 ,

For the moment we've decided our React products to not have TypeScript support.
Only our Angular products come with TypeScript, you can check them here: https://www.creative-tim.com/templates/angular.
Aslo, maybe you will find useful one of the following links:

• https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
• https://blog.logrocket.com/how-why-a-guide-to-using-typescript-with-react-fffb76c61614?gi=72b7807b1dbd
• https://medium.freecodecamp.org/effective-use-of-typescript-with-react-3a1389b6072a
• https://hackernoon.com/react-with-typescript-and-webpack-654f93f34db6
• https://spin.atomicobject.com/2017/10/31/react-typescript-basics/

Best,
Manu

[saeedghaf]

Dear @einazare ,
I recently purchased the pro kits bundle and am wondering if there is going to be type declaration files for TS at any point for the material-kits this year? I understand that it was not in the works as of Feb. But due to popularity and integration of TS into all our projects (and probably most people's these days) it would be great value-add for the community. Please let me know. thanks.

[einazare]

Hello there, @saeedghaf ,

I've added your request to be seen by the Creative Tim management.
They will decide if we should add TypeScript or not.

Best,
Manu

[cjstolte]

Like others, TypeScript support would be great and probably would make the product more marketable as you can see many of us looking for it. Add my name to the list looking for TypeScript support.

[joviol]

Hello, I have purchased the Pro version of the dashboard but, right not all my projects need to be written in Typescript, Please let everybody know if you have an ETA for an eventual migration of your components to TS.
Thanks

[einazare]

Hello there, @joviol ,

At the moment we do not have an ETA for TypeScript support on our React products.
The Creative Tim management has decided for starters to only use create-react-app for our React products, which uses Babel, and not TypeScript.

Best,
Manu

[cjstolte]

@einazare there is a template available for typescript with using create-react-app. https://create-react-app.dev/docs/getting-started npx create-react-app my-app --template typescript as well ability to add typescript to an existing create-react-app - https://create-react-app.dev/docs/adding-typescript

For others looking for a more immediate fix, I added typescript following the above link and then went through and made changes migrating to typescript and resolving any compiler errors along the way(warning did a number of changes, but to get it working put in 10-20hrs of effort per template). Likely not of been the best upgrade as I'm no expert and not utilizing full benefits of types but it now compiles and works and able to continue forward using typescript with the rest of my project. We shall see how well it works as we go :). Did this with both Material Dashboard and Material Kit Pro templates.

[larryro]

The free version of this project I tried was this rep https://github.com/Slessi/material-dashboard-react-ts, then I bought the react bundle to get the pro version code, But I found it doesn't support typescript, but my project is based on typescript, what should i do? @einazare

[einazare]

Hello there, @lrl219

At the moment, we cannot offer support for TypeScript since we haven't learned how to add TypeScript to our React products.
We are not responsible for the mentioned repo.

Best,
Manu

[larryro]

Hello there, @lrl219

At the moment, we cannot offer support for TypeScript since we haven't learned how to add TypeScript to our React products.
We are not responsible for the mentioned repo.

Best,
Manu

All right, hope you can offer support for typescript as soon as possible as typescript has become the mainstream.Since it's my own mistake, It seems that my 119$ licensing fee will have to be a donation at the moment. 😊😊

[larryro]

Hello there, @lrl219

At the moment, we cannot offer support for TypeScript since we haven't learned how to add TypeScript to our React products.
We are not responsible for the mentioned repo.

Best,
Manu

If people search key words "react dashboard typescript" in google, the first one is the free typescript version of this product.

That means a lot of people need this product to support typescript.

Just can't understand why you don't invest in development staff to support typescript.

[zaneclaes]

+1, just threw a bunch of money away for an inferior product to the free version(s) 😢

[paragbaxi]

I was able to get the free version to use typescript with editing tsconfig to match the webpack paths resolution. This was my blocker from spending money on the pro version.

Unfortunately, this fix did not work on the pro version of material pro. I won't give up but there's a reason why I'm spending my Friday night on this github issue. It's not straightforward, and disappointing that the free version is more typescript friendly than the paid one.

Also tried ts-migrate with no luck.

[Californian]

Is there a way that the community can contribute this support? I was about to purchase but came across this glaring omission (what is this, 2016?), but I (and others here) might be willing to just spend our own time to add it.

I guess foolish decisions like this are the biggest problem with closed-source software.

[einazare]

Hello there, @Californian ,

Thank you for your response.
I've submitted your request, of contribution, with the Creative Tim management, and we'll see what they say about it. For the last couple of years, I've been trying to convince them to start adding TypeScript & React products to our marketplace. And each time there is something more important to do, and we postpone this task 😢 . Last time it was said to me, that we'll start creating TypeScript & React products this year (2021), somewhere in June-July.

Best,
Manu

[marshallwells23]

@einazare That would be great - looking forward to being able to use these in projects.

[einazare]

Hello there, @robquinn ,

Thank you for your interest in working with our products, and sorry to hear about your issues.
As you can see in this thread, we already state that at the moment we do not offer TypeScript support for the Material Dashboard PRO React product.
We also stated in the documentation of the NextJS Material Dashboard PRO the fact that at the moment we only offer support for Babel: https://www.creative-tim.com/learning-lab/nextjs/overview/material-dashboard - this is actually the first page when you access the product's documentation.
The same happens for the Material Dashboard PRO React product as well: https://demos.creative-tim.com/material-dashboard-pro-react/#/documentation/tutorial - first page when you access the documentation states that we do not offer support for Typescript.

I honestly do not know what we can do more than that - besides selling TypeScript and React products.

Anyways, on behalf of all Creative Tim staff, we are happy that in the end, you have found a product that suits your needs.

Happy Hacking!

Best,
Manu

PS: unfortunately, my managers asked me to delete the links you have provided in your message.
PS: please do not hate me, I am just doing my job.

[packetship]

+1 for TypeScript support - this is an essential for us. We would have bought your Company licence (probably even the Club for LTS), for use across multiple projects, but lack of TS is a killer. Sorry!

[SeanKilleen]

Wanted to add a +1 on this. I recently purchased the bundle but am definitely missing TypeScript. Would have likely held off on the purchase if I knew TypeScript wasn't included. Should have checked the free version first, so that's on me, but I know TypeScript support would be very valuable.

[cjstolte]

Since CT has commented about this. But it appears that they have released a new product a couple months ago that using TypeScript & React using MUI. Sadly its not this exact package and would require a new purchase and that it isn't currently included with any of their bundles. BUT its an offering.

Material Dashboard 2 PRO React TS - https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts

[connor-henderson]

This convo is about the paid version, but if it's useful I converted the Material Dashboard 2 (free) version themes to typescript in this repo

Notable changes:

• converted color.text's properties from main and focus to primary and secondary to match MUI's types on TypeText
• removed boxShadows, borders, and functions from the createTheme param because I didn't want to type them and add them to the theme context, I plan to just import them to the files where I plan to use them instead

If you'd rather have the above you can just add them back and modify the types with module augmentation