React + Typescript：将组件的属性命名为 "type"会导致 Typescript 抛出错误

Question

我遇到了一个问题，打字稿不允许我命名属性type

此操作失败：

import "./styles.css";
import styled from "styled-components";
enum BUTTON_TYPES {
BUTTON = "button",
SUBMIT = "submit"
}
interface ButtonProps {
type: BUTTON_TYPES; // <------------------------ this
}
const Button = styled.button<ButtonProps>``;
export default function App() {
return (
<div className="App">
<Button type={BUTTON_TYPES.BUTTON}>hey</Button>
</div>
);
}

但是，如果我type重命名为foobar，它工作得很好

import "./styles.css";
import styled from "styled-components";
enum BUTTON_TYPES {
BUTTON = "button",
SUBMIT = "submit"
}
interface ButtonProps {
foobar: BUTTON_TYPES; // <------------------------ this
}
const Button = styled.button<ButtonProps>``;
export default function App() {
return (
<div className="App">
<Button foobar={BUTTON_TYPES.BUTTON}>hey</Button>
</div>
);
}

https://codesandbox.io/s/charming-borg-hl2x6?file=/src/App.tsx

Answer 1

您得到的 TS 错误是因为您尝试覆盖本机 HTML 属性type。如果你看一下类型定义，这个道具被锁定到"button" | "submit" | "reset" | undefined。
这似乎也是styled-components的问题，因为它们会破坏具有匹配道具的本机属性。

除了 TS 阻止您执行此操作这一事实之外，我认为这种创建组件的方式可能是一种反模式。

我给你的建议是，如果你想typebutton元素的HTML类型，你可以做这样的事情。有了这个，您可以将type属性转发到您的自定义Button组件中供其他人使用：

import React, { FunctionComponent } from 'react'
import styled from "styled-components";
import "./styles.css";
interface ButtonProps{
type: React.ButtonHTMLAttributes<any>['type'];
}
const ButtonStyled = styled.button`
color: pink;
`;
const Button : FunctionComponent<ButtonProps>= ({type, children}) => 
<ButtonStyled type={type}>{children}</ButtonStyled>

export default function App() {
return (
<div className="App">
<Button type='button'>hey</Button>
</div>
);
}

代码三盒： https://codesandbox.io/s/button-type-attribute-m1i3u

注意：
这可能不是您想要的，因为您希望将枚举分配给typeprop，但正如我所说，我认为您的方式与使用自定义 React 组件包装本机 HTML 元素的模式相冲突。

Answer 2

这不是 TypeScript 的问题。HTML 按钮标记已具有接受button、reset或submit作为值的属性类型。

参考： https://www.w3schools.com/tags/tag_button.asp