React组件中使用TypeScript的默认属性值

我不知道如何使用Typescript为我的组件设置默认属性值。

这是源代码:

class PageState
{
}

export class PageProps
{
    foo: string = "bar";
}

export class PageComponent extends React.Component<PageProps, PageState>
{
    public render(): JSX.Element
    {
        return (
            <span>Hello, world</span>
        );
    }
}

当我尝试像这样使用组件时:

ReactDOM.render(<PageComponent />, document.getElementById("page"));

我得到一个错误，说属性foo丢失了。我想使用默认值。我还尝试使用静态defaultProps =…但它并没有像我怀疑的那样起作用。

src/typescript/main.tsx(8,17): error TS2324: Property 'foo' is missing in type 'IntrinsicAttributes & IntrinsicClassAttributes<PageComponent> & PageProps & { children?: ReactEle...'.

如何使用默认属性值?我的公司使用的许多JS组件都依赖于它们，不使用它们是不可取的。

当前回答

来自@pamelus对公认答案的评论:

您要么必须使所有接口属性都是可选的(糟糕)，要么还为所有必选字段指定默认值(不需要) boilerplate)或避免在defaultProps上指定类型。

实际上你可以使用Typescript的接口继承。结果代码只是稍微啰嗦一点。

interface OptionalGoogleAdsProps {
    format?: string;
    className?: string;
    style?: any;
    scriptSrc?: string
}

interface GoogleAdsProps extends OptionalGoogleAdsProps {
    client: string;
    slot: string;
}


/**
 * Inspired by https://github.com/wonism/react-google-ads/blob/master/src/google-ads.js
 */
export default class GoogleAds extends React.Component<GoogleAdsProps, void> {
    public static defaultProps: OptionalGoogleAdsProps = {
        format: "auto",
        style: { display: 'block' },
        scriptSrc: "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
    };

2017-02-17 09:36:04

其他回答

Typescript 3.0有一个新的解决方案:

export interface Props {
    name: string;
}

export class Greet extends React.Component<Props> {
    render() {
        const { name } = this.props;
        return <div>Hello ${name.toUpperCase()}!</div>;
    }
    static defaultProps = { name: "world"};
}

// Type-checks! No type assertions needed!
let el = <Greet />

注意，要做到这一点，你需要一个比16.4.6更新的@types/react版本。它适用于16.4.11。

2018-07-23 20:24:38

看看我的解决方案:

interface Props {
  foo?: string | undefined;
  bar: string;
  other?: string;
}

export const Component = ({foo, bar, other = 'default text'}:Props) => {
    console.log(foo, bar, other);
    return(
        ...//some cool stuff your component should do
    )
}

<Component bar='obligatory text'/>

2022-11-11 16:27:42

对于函数组件，我宁愿保留props参数，所以这是我的解决方案:

interface Props {
  foo: string;
  bar?: number; 
}

// IMPORTANT!, defaultProps is of type {bar: number} rather than Partial<Props>!
const defaultProps = {
  bar: 1
}


// externalProps is of type Props
const FooComponent = exposedProps => {
  // props works like type Required<Props> now!
  const props = Object.assign(defaultProps, exposedProps);

  return ...
}

FooComponent.defaultProps = defaultProps;

2020-04-02 10:04:09

在Typescript 2.1+中，使用Partial < T >而不是让你的界面属性是可选的。

export interface Props {
    obj: Model,
    a: boolean
    b: boolean
}

public static defaultProps: Partial<Props> = {
    a: true
};

2017-02-23 05:37:02

来自@pamelus对公认答案的评论:

您要么必须使所有接口属性都是可选的(糟糕)，要么还为所有必选字段指定默认值(不需要) boilerplate)或避免在defaultProps上指定类型。

实际上你可以使用Typescript的接口继承。结果代码只是稍微啰嗦一点。

interface OptionalGoogleAdsProps {
    format?: string;
    className?: string;
    style?: any;
    scriptSrc?: string
}

interface GoogleAdsProps extends OptionalGoogleAdsProps {
    client: string;
    slot: string;
}


/**
 * Inspired by https://github.com/wonism/react-google-ads/blob/master/src/google-ads.js
 */
export default class GoogleAds extends React.Component<GoogleAdsProps, void> {
    public static defaultProps: OptionalGoogleAdsProps = {
        format: "auto",
        style: { display: 'block' },
        scriptSrc: "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
    };

2017-02-17 09:36:04

React组件中使用TypeScript的默认属性值

推荐文章

最新文章

标签