Typescript/styled-components/no-explicit-any question

example.ts

// Project 1:

// Styled componet wrapper might look like this
const styledFactory = (
  target: any,
  displayName: string,
  ...systemFunctions: styleFn[]
): any => {
    const Component = styled(target)`
      min-width: 0;
      ${sx}
      ${compose(animation, color, flexbox, layout, space, ...systemFunctions)}
    `;
    Component.displayName = displayName;
    return Component;
  };

//-----

// Project 2 tries to use same function but with Typescript

// But with typescript lint rule "no-explicit-any"
// Disallow usage of the any type
// https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-explicit-any.md

// Same component becomes wild goose chase of finding the right types for dependencies

const styledFactory = (
  target: AnyStyledComponent,
  displayName: string,
  ...systemFunctions: ThemedStyledFunction[]
): AnyStyledComponent => {
    const Component = styled(target)`
      min-width: 0;
      ${sx}
      ${compose(animation, color, flexbox, layout, space, ...systemFunctions)}
    `;
    Component.displayName = displayName;
    return Component;
  };

Hey Max thanks a lot for taking your time providing me with thorough examples. It's all starting to make much more sense to me. Not to get stuck on lint errors so it's a good idea to document Todo and come back to it later.

I really like the generic return type option. Thinking about it. This probably solves 9/10 issues I have had in the past. Often the use case is just to return whatever the underlying method returns (in the dependency). And this approach seems like the appropriate way of handling it in a clean way 💯 👍

I also got the tips on hackernews to look into *.d.ts files which I was unaware of. Again thanks!