尝试添加自定义属性时使用情感/样式在打字稿中收到错误

Posted 2023-03-15

【中文标题】尝试添加自定义属性时使用情感/样式在打字稿中收到错误

【英文标题】：Receiving an error in typescript using emotion/styled when trying to add a custom property

【发布时间】：2021-12-05 19:37:28

【问题描述】：

这是我正在尝试实现的代码行。

const MaybeBigHeading = styled(Heading)( ( big:boolean = false ) => [ big && tw`text-4xl` ]);

我收到的错误是：

Property 'big' does not exist on type 'ClassAttributes<htmlHeadingElement> & HTMLAttributes<HTMLHeadingElement> &  theme?: Theme | undefined;  &  ...; '.ts(2339)

这个错误对我来说有点道理，但我正在学习 ReactJS/Typescript 并试图从 javascript 教程中实现一些东西；这适用于 Javascript，但不适用于 Typescript。

不确定如何在 Typescript 中解决这个问题。

【参考方案1】：

styled 函数的类型称为generic。泛型允许您通过参数传入自己的类型。通用参数放在尖括号 (<>) 之间。在您的情况下，您可以这样使用它：

const MaybeBigHeading = styled(Heading)< big?: boolean; >(( big = false ) => [ big && tw`text-4xl text-red-300` ]);

请参阅有关使用 TypeScript with Emotion 的文档。你可以看到styled的泛型类型是如何定义here的。

关于您发现的解决方案的说明

在您发现的解决方案中，您通过为big 添加自己的类型来扩展HTMLAttributes 接口：

declare module "react" 
  interface HTMLAttributes<T> extends DOMAttributes<T> 
    big?: boolean;
  

是的，这可行，但在没有其他选项存在时，它本质上是一种蛮力方法。这不是一个好主意，因为它污染了 HTML 属性的含义，并且可能会导致代码的未来读者（可能是您自己）混淆。 big 不是 HTML 属性，因此不应存在于 HTML 属性界面中。

【参考方案2】：

发布后不久找到了解决方案

通过添加

declare module "react" 
  interface HTMLAttributes<T> extends DOMAttributes<T> 
    big?: boolean;
  

对于 .tsx 文件，我能够使用“大”作为新组件的属性

完整的 App.tsx 文件如下

/** @jsxImportSource @emotion/react  */
import tw from "twin.macro";
import  DOMAttributes  from "react";

import styled from "@emotion/styled";

const Heading= tw.h1`text-blue-500 text-2xl p-2`;
const BigHeading = tw(Heading)`text-4xl`;
declare module "react" 
  interface HTMLAttributes<T> extends DOMAttributes<T> 
    big?: boolean;
  

const MaybeBigHeading = styled(Heading)( ( big = false ) => [ big && tw`text-4xl text-red-300` ]);
const Container = tw.div`max-w-4xl mx-auto p-5 mt-5`;
function App() 
  return (
    <Container >
      <BigHeading>Hello World</BigHeading>
      <Heading>This is an example</Heading>
      <MaybeBigHeading>This might be a Big Heading</MaybeBigHeading>
      <MaybeBigHeading big>This IS a Big Heading</MaybeBigHeading>
      
    </Container>
  );


export default App;