Typescript error using styled-components

Question

Having the following:

tsconfig

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "module": "commonjs",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "declaration": true,
    "outDir": "lib",
    "lib": ["es2015","dom"]
    }
}

Note declaration : true

And .tsx file:

import * as styledComponents from "styled-components";

export const backColor = (props: MyProps) => props.theme.backColor;

export const Title = styledComponents.div`  
   text-align: center;
   background-color:${backColor};
   width: 100%;
`;

When I run tsc on the terminal to compile I get:

error TS2339: Property 'div' does not exist on type 'typeof "/root/node_modules/styled-comp...'.

UPDATE

The error happens with both ways of importing styled-components

import styled from 'styled-components'
import * as styled from 'styled-components'

Answer 1

declaration in tsconfig is only telling it to generate type defs for your own files in the build output, not specifying how to import them from others

As they are not exporting a namespace in their type defs, but the interface itself, your import just needs to be changed to:

import styledComponents from "styled-components";

EDIT

On further investigation, the above works with declarations turned off or when not exporting the component

However it fails when declarations is true AND exporting the component, as it tries to generate your own type defs using their external interface StyledComponentClass that is not in scope. [ts] Exported variable 'Title' has or is using name 'StyledComponentClass' from external module "/blah/blah/node_modules/styled-components/typings/styled-components" but cannot be named.

To fix it you must also explicitly import the class type definition along with the default:

import styledComponents, { StyledComponentClass } from 'styled-components';

export const backColor = (props: MyProps) => props.theme.backColor;

export const Title = styledComponents.div`  
   text-align: center;
   background-color:${backColor};
   width: 100%;
`;