We Keep Coding

MUI extending button props

I want to extend the MUI5 components and also use their component prop. To do that according to the documentation I make it work in the below code:
import Button, { ButtonProps } from '#mui/material/Button';
import React from 'react';
export type MyButtonProps<C extends React.ElementType> = ButtonProps<C, { component?: C }> & {
myOtherField: string;
};
export function MyButton<C extends React.ElementType>(props: MyButtonProps<C>) {
const { myOtherField, ...buttonProps } = props;
return <Button {...buttonProps}></Button>;
}
However when I try to access anything belongs to MUI5 button attributes, vscode is not helping me to find it
see the below screenshot:
But after adding it manually it is not complaining about it.
see the below screenshot and check that it is inferring the type as any
However if I remove the <C extends React.ElementType> logic from the type it is working like a charm (but it has a drawback since it is now complaining about the component prop when I use it anywhere in my application):
What can be the problematic part in the first place when I am extending MUI5 button prop types?
thank you in advance.

This is the easy way I found for your usecase:
type NewButtonProps = ButtonProps & {
otherField: number;
component: React.ElementType;
};
function Button3({ otherField, ...props }: NewButtonProps) {
const y = props.onClick;
const x = otherField;
return <Button {...props}></Button>;
}
All the attributes is understand by typescript now:

Use Typescript declaration types inline

After installing types for a library such as "#types/openlayers" how can I then use these for inline type definitions for things like React props:
import Map from "ol/Map";
import { Map as MapTypes } from "#types/openlayers"; // Error: Cannot import type declaration files.
export type Props = {
mapInstance: MapTypes;
}
export const OlMap: FunctionComponent<Props> = (props): JSX.Element => {
const currentMap = props.mapInstance;
...
}

Use it from the actual package that is being typed, not the #types/* module. For example, with react-router, you add #types/react-router but to pull out the RouteProps interface, you use import {RouteProps} from "react-router";.
Additionally, from your edits, it seems that you may be using the wrong #types/* package. You mention using #types/openlayers but then mention that you are using the package ol, which should probably use the #types/ol package for types.
Note declaration file consumption:
For the most part, type declaration packages should always have the
same name as the package name on npm, but prefixed with #types/
After running yarn add ol #types/ol (or npm i ol #types/ol)
This seems to be using the right types:
import MapTypes from "ol/Map"; // Note that I don't need "{}" or "as" here
// import {Map as MapTypes} from "ol"; or pull it out of the root export
export type Props = {
mapInstance: MapTypes;
}
export const OlMap: FunctionComponent<Props> = (props): JSX.Element => {
const currentMap = props.mapInstance;
...
}

Typescript reducer initial state and option argument for react component

I have a type for my reducer such as:
export type Style = {
color: string;
(rest...)
}
export const initialState: Style = {
color: 'blue';
(rest...)
}
I have a component that takes in a style object and the properties are optional and simply overwrites the current state of the style. The type looks like this:
export type InputStyle = {
color?: string;
(rest?...)
}
So I basically have to create two duplicate types, except one has all optional properties, and one doesn't. Is there a better pattern for this? My intuition says this is not the right way.

Try using the Partial utility type - might be exactly what you're looking for:
export type Style = {
color: string;
(rest...)
}
export type InputStyle = Partial<Style>;

What is the purpose of export interface Props in React (Typescript ver)

In the Creating a component section of React Typescript Starter example, Creating a component, there is a basic React component in Typescript:
// src/components/Hello.tsx
import * as React from 'react';
export interface Props {
name: string;
enthusiasmLevel?: number;
}
function Hello({ name, enthusiasmLevel = 1 }: Props) {
if (enthusiasmLevel <= 0) {
throw new Error('You could be a little more enthusiastic. :D');
}
return (
<div className="hello">
<div className="greeting">
Hello {name + getExclamationMarks(enthusiasmLevel)}
</div>
</div>
);
}
export default Hello;
// helpers
function getExclamationMarks(numChars: number) {
return Array(numChars + 1).join('!');
}
I am new to Typescript. It seems that the interface Props is used by Typescript to do props type checks (similar to what the Proptypes npm package does). So the question is:
If I am already using this kind of Typescript
interface syntax do to props type check, do I still need to use
Proptypes package like this in the same component?
import PropTypes from 'prop-types';
Hello.propTypes = {
name: PropTypes.string,
enthusiasmLevel: PropTypes.number
};
Besides, why does here use export interface? what is the purpose
of exporting the interface Props? Is it compulsory?

Firstly I recommend declaring your components the ES6 way
const Hello: React.FC<IHello> = ({ name, enthusiasmLevel = 1 }) => {}
Your interface defines the contract of your component / The accepted parameters
export interface IHello {
name: string;
enthusiasmLevel?: number;
}
You are exporting this, so you can import your interface from other files / components which want to make use of the Hello component. For example you can use your Hello component like so from another component:
const props: IHello = {
name: "John",
enthusiamsLevel: 5
}
<Hello {...props} />
If I am already using this kind of Typescript interface syntax do to props type check, do I still need to use Proptypes in the same component?
You always want type strong definitions in TypeScript. So when declaring your prop variable in another component, you don't want to do const props: any = {
If you decide to change your interface declaration for this component later on, you would be forced to update all your references which uses this interface. - You might want to require 1 more prop variable and in that case you would want to update your usages of this interface. If you are not used to TypeScript this can seem quite hideous at first - but the benefit of always having strong type definitions will show over time. Especially when you update your type definitions.

Using Flow for styled-components Props

So I have been playing around with type systems in JavaScript and for the most part things are working however there is an issue with styled-components. I can't seem to find a good way to apply flow to the props of a styled-component. So far the only solution I see is:
export type ButtonPropTypes = ReactPropTypes & {
styleType: 'safe' | 'info' | 'warning' | 'danger' | 'link',
isPill: boolean,
isThin: boolean,
};
export const ButtonStyled = styled.button`
${generateBaseStyles}
${hoverStyles}
${fillStyles}
${thinStyles}
${linkStyles}
`;
export const Button = (props: ButtonPropTypes) => <ButtonStyled {...props} />;
It seems pretty excessive that I have to create 2 component for every styled component.
I am hoping my google skills are just crap and I am missing something but is there a better way to do this other than multiple components per styled component?

Yes! There is a better way. The trick is to declare the type of the component created by styled-components. You can do this by casting the result returned by styled.button`...` to the type of a React component that takes in your desired props. You can generate the type of a React component that takes in arbitrary props with type mytype = React.ComponentType<MyProps>.
// #flow
import styled from 'styled-components'
// Make sure you import with * to import the types too
import * as React from 'react'
// Mock function to use styleType
const makeStyles = ({styleType}) => ''
export type ButtonPropTypes = {
styleType: 'safe' | 'info' | 'warning' | 'danger' | 'link',
isPill: boolean,
isThin: boolean,
};
export const ButtonStyled = (styled.button`
${makeStyles}
${({isPill}) => isPill ? 'display: block;' : ''}
${({isThin}) => isThin ? 'height: 10px;' : 'height: 100px;'}
`: React.ComponentType<ButtonPropTypes>) // Here's the cast
const CorrectUsage = <ButtonStyled styleType="safe" isPill isThin/>
const CausesError = <ButtonStyled styleType="oops" isPill isThin/> // error
const CausesError2 = <ButtonStyled styleType="safe" isPill="abc" isThin={123}/> // error
I've hosted the code on GitHub for local reproduction (since Flow's sandbox doesn't work with external dependencies): https://github.com/jameskraus/flow-example-of-styled-components-props

In addition to James Kraus' answer, if you're using flow-typed (and have installed the package for your version of styled-components) you can essentially:
import styled, {type ReactComponentStyled} from 'styled-components'
type Props = {
color?: string
}
const Button: ReactComponentStyled<Props> = styled.button`
color: ${({color}) => color || 'hotpink'};
`