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'
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%;
`;