typescript 怎么在可选属性上定义默认值

[w1301625107]

我想在可选属性上设置默认值，但是又不想在render 里给value 设默认值

const { value =5} = this.props

我找了很多方法，Partial也不行，以下是我代码


错误如下

import * as React from "react";

class App extends React.Component {
  public render() {
    return <A test={"a"} />;
  }
}

type AProps = {
  value?: number;
  [propName: string]: any;
};

class A extends React.Component<AProps, any> {
  static defaultProps = {
    value: 5,
  };
  public render() {
    const { value } = this.props;

    return <B value={value} />;
  }
}

type BProps = {
  value: number;
};
class B extends React.Component<BProps, any> {
  public render() {
    const { value } = this.props;

    return <div>{value}</div>;
  }
}

[ferdaber]

@w1301625107 you need to set AProps to not have an optional value property. AProps is intended to be the props that the component sees inside itself (after defaultProps takes into effect). TypeScript will then work out what is allowed and not allowed to be in the JSX attributes after combining AProps and defaultProps.

[w1301625107]

@w1301625107 you need to set AProps to not have an optional value property. AProps is intended to be the props that the component sees inside itself (after defaultProps takes into effect). TypeScript will then work out what is allowed and not allowed to be in the JSX attributes after combining AProps and defaultProps.

谢谢。但是这样怎么让人知道A 是可选的参数呢
Thank you. But how does this make people know that A is an optional parameter?

[ferdaber]

It doesn't. Your AProps interface is not your external contract for your component, it is the internal contract (what your component implements). If you want to create a type for your external contract (what consumers of your component expect) without rewriting I would do this:

// internal contract, should not be exported out
type AProps = {
  value?: number
}

class A extends Component<AProps> {
  static defaultProps = { value: 0 }
}

// external contract
export type ApparentAProps = JSX.LibraryManagedAttributes<typeof A, AProps>

[w1301625107]

It doesn't. Your AProps interface is not your external contract for your component, it is the internal contract (what your component implements). If you want to create a type for your external contract (what consumers of your component expect) without rewriting I would do this:

// internal contract, should not be exported out
type AProps = {
  value?: number
}

class A extends Component<AProps> {
  static defaultProps = { value: 0 }
}

// external contract
export type ApparentAProps = JSX.ManagedAttributes<typeof A, AProps>

i got an error,how to fix it? @types/react

[w1301625107]

If I want to rewrite it, what is the step?

[ferdaber]

Sorry I made a typo, it's JSX.LibraryManagedAttributes, it is not under the React namespace.

[karfau]

This was very helpful.
Who thinks it is worth adding it to the defaultProps section?

[swyxio]

PR welcome @karfau

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!