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

【问题标题】：Typescript error using styled-components使用样式组件的打字稿错误
【发布时间】：2018-02-09 22:10:19
【问题描述】：

具备以下条件：

tsconfig

{
  "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：类型 'typeof "/root/node_modules/styled-comp...' 上不存在属性 'div'。

更新

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

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

【问题讨论】：

标签： reactjs typescript jsx styled-components tsx

【解决方案1】：

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

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

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

【讨论】：

感谢您的时间。我知道declaration 的含义。但是如果我把 declaration=false 错误就避免了。只有当 declaration=true 时，我才会收到此错误。我确实需要声明，因为我正在构建一个 React 组件库...
啊，是的，已经重新创建了声明 true 并导出了组件 - 更新的答案应该可以解决它

【解决方案2】：

通过使用 require 导入它可以避免错误：

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

【讨论】：

那是因为使用 require 你会失去所有的类型检查，它会自动变成any
哎哟！是的......这是迄今为止唯一对我有用的解决方法。谢谢你的澄清！

【解决方案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 在箭头函数的参数列表中的默认值。

【讨论】：

【解决方案4】：

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

rm -rf node_modules
npm install

【讨论】：

【解决方案5】：

当我使用 VSCode 将 div 重命名为 Div（这是我为样式化组件命名的）时，我遇到了这个错误。

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

我的解决方案是 delete node_modules/ 并再次执行 npm install。

【讨论】：