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

Posted 2023-03-13

技术标签:

【中文标题】使用样式组件的打字稿错误【英文标题】：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'

【问题讨论】：

【参考方案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 中的类型文件已损坏。修复了