JZTXT

[Typescript] Write clean Type 3 - make a wrapper to cleanup generic usages

发布时间 2023-04-17 14:52:46作者: Zhentiw

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.