使用样式组件的打字稿错误

Question

具备以下条件：

配置文件

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

注意声明：true

和.tsx文件：

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

当我tsc在终端上运行编译时，我得到：

错误 TS2339：属性 'div' 在类型 'typeof "/root/node_modules/styled-comp...' 上不存在。

更新

两种导入样式组件的方式都会发生错误

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

Answer 1

declaration 在 tsconfig 中只是告诉它在构建输出中为您自己的文件生成类型定义，而不指定如何从其他人导入它们

由于它们不是在其类型定义中导出命名空间，而是接口本身，因此您的导入只需更改为：

import styledComponents from "styled-components";

编辑

在进一步调查中，上述适用于declarations关闭或不导出组件时

但是，当declarations为真并导出组件时它会失败，因为它尝试使用StyledComponentClass不在范围内的外部接口生成您自己的类型定义。 [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.

要修复它，您还必须显式导入类类型定义以及默认值：

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