扩展第三方组件时使用 typescript 和 styled-component

Question

如何在 vscode 中获取扩展样式组件道具的类型提示？我说的不是style的props，而是component的props。

当我使用 styled() 扩展我自己的组件时，props 的类型提示可以完美地工作。但是当我在 styled() 中使用第三方组件时，vscode 并没有给我任何 props 提示。

import React from "react";
import styled from "styled-components";
import NumberFormat from "react-number-format";

const InputElement = styled(NumberFormat)`
  border: 5px solid #eddcc7;
  font-size: 1.5em;
  max-width: 850px;
  width: 100%;
  text-align: center;
  padding: .75em;
  font-weight: 500;
  line-height: 1.5;
`

const Input: React.FC = () => {
  return (
    // Get type hints for below extended styled component
    <InputElement />
  );
};

export default Input;

我做错了什么，我能纠正什么？

谢谢你的帮助？？？？

Answer 1

也许我找到了一种可能的解决方案。

import React from "react";
// Import StyledComponent
import styled, { StyledComponent } from "styled-components";
// Import props (in this package works base)
import NumberFormat, { NumberFormatPropsBase } from "react-number-format";

// Setup type annotation with StyledComponent like this
const InputElement: StyledComponent<
  React.FC<NumberFormatPropsBase>, 
  any, 
  {}, 
  never
> = styled(NumberFormat)`
  border: 5px solid #eddcc7;
  font-size: 1.5em;
  max-width: 850px;
  width: 100%;
  text-align: center;
  padding: .75em;
  font-weight: 500;
  line-height: 1.5;
`

const Input: React.FC = () => {
  return (
    // Now you get type hint for this styled component
    <InputElement />
  );
};

export default Input;

我用 cmets 在代码中描述解决方案。

我不知道这是否是最佳做法，但它对我有用。 现在，我的 vscode（以及 webstom 等其他 IDE）向我推荐了道具。

Answer 2

似乎问题在于styled-component 没有从react-number-format 库中正确获取道具。问题可能是react-number-format 的默认导出组件的props，NumberFormatProps 包含[key: string]: any 字段，导致styled-component 中断其类型推断。

如果您改为从 NumberFormat 组件中创建一个类型，则该问题可以解决，该类型将改为具有 NumberFormatPropsBase 属性。

这是一个例子：

import styled from "styled-components";
import NumberFormat, { NumberFormatPropsBase } from "react-number-format";

const InputElement = styled<React.ComponentType<NumberFormatPropsBase>>(
  NumberFormat
)`
  border: 5px solid #eddcc7;
  font-size: 1.5em;
  max-width: 850px;
  width: 100%;
  text-align: center;
  padding: 0.75em;
  font-weight: 500;
  line-height: 1.5;
`;

如果您在多个地方使用NumberFormat 样式的组件，我还建议您提取到不同的文件：

MyNumberFormat.tsx

import NumberFormat, { NumberFormatPropsBase } from "react-number-format";

export default NumberFormat as React.ComponentType<NumberFormatPropsBase>;

export * from "react-number-format";

然后从那里使用它：

import NumberFormat from "./MyNumberFormat";

const InputElement = styled(NumberFormat)`
  border: 5px solid #eddcc7;
  font-size: 1.5em;
  max-width: 850px;
  width: 100%;
  text-align: center;
  padding: 0.75em;
  font-weight: 500;
  line-height: 1.5;
`;