Original code:
import { CSSProperties } from "react";
const useStyled = <TTheme = {}>(func: (theme: TTheme) => CSSProperties) => {
// Imagine that this function hooks into a global theme
// and returns the CSSProperties
return {} as CSSProperties;
};
interface MyTheme {
color: {
primary: string;
};
fontSize: {
small: string;
};
}
const buttonStyle = useStyled<MyTheme>((theme) => ({
color: theme.color.primary,
fontSize: theme.fontSize.small,
}));
const divStyle = useStyled<MyTheme>((theme) => ({
backgroundColor: theme.color.primary,
}));
Notice that everytime we call useStyled<MyTheme>
, we have to pass generic. We want a way that we don't need to pass generic.
Solution:
import { CSSProperties } from 'react';
const makeUseStyle = <TTheme = {}>() => {
return (func: (theme: TTheme) => CSSProperties) => {
return {} as CSSProperties;
};
};
const useStyled = makeUseStyle<MyTheme>();
interface MyTheme {
color: {
primary: string;
};
fontSize: {
small: string;
};
}
const buttonStyle = useStyled((theme) => ({
color: theme.color.primary,
fontSize: theme.fontSize.small,
}));
const divStyle = useStyled((theme) => ({
backgroundColor: theme.color.primary,
}));
Now when use call useStyle
, we don't need to pass generic slot everytime.
This solution allows you to pass the generic once in the code and all the rest of code will get infer of those generic type.
- Typescript cleanup generic wrapper usagestypescript cleanup generic wrapper components typescript generics strongly typescript generic reduce write typescript component generics react typescript built-in possible generic typescript inference multiple generic typescript component function generic cleanup cleanup方法svn subscriptions cleanup signal