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

Question

有以下内容：

tsconfig

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

Note declaration : 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 在终端上编译时，我得到：

error TS2339: Property 'div' does not exist on type '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.

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

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

Answer 2

通过使用 require 导入它，我避免了错误：

const styledComponents = require('styled-components');

Answer 3

除了 "styled-components" 的样式外，无需导入任何内容的最简单方法是：

    const StyledComponent = styled.div`
        background: black;
        color: white;
    `;

    const StyledComponentWithParams = styled.div<{ color?: string }>`
        background: yellow;
        color: ${(color) => (color ? "yellow" : "white")};
    `;

    const StyledComponentDefaultValueParams = styled.div<{ color?: string }>`
        background: yellow;
        color: ${(color = "white") => (color)};
    `;

StyledComponent 不包含任何参数。

StyledComponentWithParams和StyledComponentDefaultValueParams都包含一个参数，但后者设置参数，color在箭头函数的参数列表中的默认值。

Answer 4

对我来说，它是 node_modules 中损坏的类型文件。已修复

rm -rf node_modules
npm install

Answer 5

我在使用 VSCode 将 div 重命名为 Div 时遇到此错误（这就是我命名样式组件的名称）。

我怀疑我的重命名可能在一些 styled-components / React 核心文件中生效，并且更改不会显示在 git 跟踪中，因为这些是 git 被忽略的文件。因此，很容易错过。

我的解决方案是delete node_modules/然后再npm install。

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

Typescript error using styled-components

jsx

typescript

reactjs

tsx

styled-components