question-mark
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] 3 un-typed exports from @material-ui/core

See original GitHub issue
  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

@material-ui/core exports 3 references that are not available in the typescript definitions:

isString, isNumber, and styleFunction

Expected Behavior 🤔

@material-ui/core should either not export these variables or provide Typescript types for them.

Steps to Reproduce 🕹

See the testExports.ts file and the console output in this demo: https://codesandbox.io/s/optimistic-wilbur-98lq2

Context 🔦

We are trying to dynamically generate an index.ts file that re-exports all members of @material-ui/core, except those which we have defined in our wrapping library. e.g., we want to customize the function of the TextField elements, so want to override that element with our own export but just re-export most other Material components.

While generating this file, we realized that not all of the actually-exported members of @material-ui/core had types for them.

Your Environment 🌎

Tech Version
Material-UI v4.8.3

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
oliviertassinaricommented, Jan 17, 2020

@JonKrone Do you want to take care of the modules in styles/transitions.js 😃? (We can handle styleFunction later on)

1reaction
oliviertassinaricommented, Jan 15, 2020

I don’t think that any of the modules of styles/transitions.js, aside duration and easing, should be available in the barrel index. I would suggest:

diff --git a/packages/material-ui/src/styles/transitions.js b/packages/material-ui/src/styles/transitions.js
index 1cc6e1ad1..b4839a8a8 100644
--- a/packages/material-ui/src/styles/transitions.js
+++ b/packages/material-ui/src/styles/transitions.js
@@ -28,9 +28,9 @@ export const duration = {
   leavingScreen: 195,
 };

-export const formatMs = milliseconds => `${Math.round(milliseconds)}ms`;
-export const isString = value => typeof value === 'string';
-export const isNumber = value => !isNaN(parseFloat(value));
+function formatMs(milliseconds) {
+  return `${Math.round(milliseconds)}ms`;
+}

 /**
  * @param {string|Array} props
@@ -52,6 +52,9 @@ export default {
     } = options;

     if (process.env.NODE_ENV !== 'production') {
+      const isString = value => typeof value === 'string';
+      const isNumber = value => !isNaN(parseFloat(value));
+
       if (!isString(props) && !Array.isArray(props)) {
         console.error('Material-UI: argument "props" must be a string or Array.');
       }

I believe these methods were only exported recently with #18306.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Export useful developer Typescript types #19572 - GitHub
Successfully merging a pull request may close this issue. [core] Export TypographyVariant type aleccaputo/material-ui. 3 participants.
Read more >
TypeScript - Material UI - MUI
Have a look at the Create React App with TypeScript example. The strict mode options are the same that are required for every...
Read more >
Is a typescript module augmentation automatically exported in ...
I created a component library using material-ui and Typescript under the hood. I have used Typescript module augmentation in order to add ...
Read more >
Troubleshooting Handbook: Types
In case of typing untyped class components, there's almost no difference in approach except for the fact that after declaring the types, you...
Read more >
@material-ui/core - npm
Start using @material-ui/core in your project by running `npm i ... TypeScript icon, indicating that this package has built-in type ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found