Typescript 2.4 Error: Variable StyledComponentClass from external module cannot be named.

Version

2.1.1 Typescript: 2.4.2

Reproduction

Given a styled-component src/wrapper.tsx

import * as React from 'react';
import styled from 'styled-components';

const Wrapper = styled.header`
  background-color: red;
  height: 50px;
  width: 100%;
`

export default Wrapper;

and tsconfig.json

{
 "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "lib": ["dom", "es2015", "es2016"],
    "outDir": "dist",
    "baseUrl": "./src",
    "jsx": "react",
    "sourceMap": true,
    "declaration": true
  },
  "exclude": [
    "node_modules"
  ]
}

The following error occurs:

[ts] Exported variable 'Wrapper' has or is using name 'StyledComponentClass' from external module "/path/project/node_modules/styled-components/typings/styled-components" but cannot be named.

Steps to reproduce

Expected Behavior

Doesn’t throw error

Actual Behavior

Throws error

[ts] Exported variable 'Wrapper' has or is using name 'StyledComponentClass' from external module "/path/project/node_modules/styled-components/typings/styled-components" but cannot be named.

[Igorbek]

Ah, I though it was not exported, but it was. If you write your code that way, it should work:

import * as React from 'react';
import styled, { StyledComponentClass } from 'styled-components'; // <-- note additional export here

const Wrapper = styled.header`
  background-color: red;
  height: 50px;
  width: 100%;
`

export default Wrapper;

We cannot fix this on our side, that is TypeScript’s intended behavior, but the fix is under consideration.

[Igorbek]

Yes, that is annoying TS error that prevents writing declaration files when they use inferred types that are defined externally. There’re 2 issues here:

1. StyledComponentClass is not exported
2. The name should imported even if it’s not used explicitly

The first we can fix, and we will. The second you’d have fix yourself.