Definitelytyped: [styled-components] Missing return type on function

[bjunix]

• [x] I tried using the @types/styled-component package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. There is a question on Stackoverflow regarding this issue.
• [x] Authors: @Igorbek @Igmat @lavoaster @Jessidhia @jkillian @eps1lon @flavordaaave

Dear Authors,

I am not sure if this is a problem of the types provided by @types/styled-component or of an eslint issue. It could of course also be misconfiguration on my side, but I tried everything.

When linting with the enabled rule @typescript-eslint/explicit-function-return-type I always get the Missing return type on function warning when accessing props or theme props inside styled component's template literals. For example:

export const MyComponent = styled.div`
  color: ${props => props.theme.colors.red};
`;

if I hover over => in vs code it shows the correct return type:
function(props: ThemedStyledProps<...>): string

That's why I am guessing it's a eslint issue having problems with the template literal. But has I am not very familiar with TS it's only a guess.

I can solve the problem by explicitly setting the return type like ${(props): string => props.theme.colors.red}, but it's not a satisfying solution.

I'm looking to contribute to fix this issue. Can anyone point me in the right direction? Thanks :)

[43081j]

the explicit-function-return-type rule requires you specify the return type on every function, including arrow functions.

maybe you just want to set the allowExpressions: true option on the rule? (it only then requires return types for function declarations, not expressions like arrow functions).

[thisismydesign]

The solution for me was:

import styled from 'styled-components';

const StyledApp = styled.div((props) => {
  return {
    color: props.theme.colors.red,
  };
});

I have set up ThemeProviders in my index.tsx as described here: https://stackoverflow.com/a/58462124/2771889

See also: https://stackoverflow.com/q/57852188/2771889