typescript 如何使用PropType声明类型？

yptwkmov 于 2023-02-25 发布在 TypeScript

关注(0)|答案(2)|浏览(168)

我想声明一个React.cssProperties属性到我的组件，但是使用PropTypes。到目前为止，我可以使它与PropTypes.object一起工作。但是当我使用该组件时，我不能得到css属性类型提示（例如，样式，如宽度，颜色等）。而且，当将属性分配给元素时，我必须手动将其转换为React.cssProperties。
有没有办法在Typescript中使用PropeTypes声明React.cssProperties这样的类型？

import React from 'react';
import PropTypes, {InferProps} from "prop-types";

const propTypes = {
  text: PropTypes.string,  
  style: PropTypes.object,
};
type Props = InferProps<typeof propTypes>;

const MyButton = ({text, style}:  Props) => {
  return (
    <button style={style as React.CSSProperties} />
  )
})

import React from 'react';
const App = () => {
  return (
    <MyButton style={{width: '100px'}}>{text}</button> // no type hint in IDE when typing width, color..etc
  )
}
export App

typescript

来源：https://stackoverflow.com/questions/75527526/how-declare-a-type-with-proptype

2条答案

按热度按时间

s4n0splo1#

下面是优化代码：

import { CSSProperties, FC } from 'react';

interface MyButtonProps {
  text: string;
  style?: CSSProperties;
}

const MyButton: FC<MyButtonProps> = ({ text, style }) => {
  return (
    <button style={style}>{text}</button>
  );
};

export default MyButton;

结果如下：

赞(0）回复(0）举报 2023-02-25

hgc7kmma2#

你不需要到输入propTypes从propTypes.简单地使用类型

import React from 'react';

type PropTypes = {
  text: string,  
  style: any,
};

const MyButton = ({text, style}:  Props) => {
  return (
    <button style={style as React.CSSProperties} />
  )
})

希望这对你有帮助

赞(0）回复(0）举报 2023-02-25

我来回答

typescript 如何使用PropType声明类型？

2条答案

相关问题

热门标签

最新问答