Valeur par défaut d'une propriété dans un composant React à l'aide de TypeScript

Question

Je n'arrive pas à trouver comment définir des valeurs de propriété par défaut pour mes composants à l'aide de Typescript.

Voici le code source :

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>
        );
    }
}

Et quand j'essaie d'utiliser le composant comme ceci :

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

Je reçois une erreur disant que la propriété foo a disparu. Je veux utiliser la valeur par défaut. J'ai également essayé d'utiliser static defaultProps = ... à l'intérieur du composant, mais cela n'a eu aucun effet comme je le soupçonnais.

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

Comment puis-je utiliser les valeurs de propriété par défaut ? De nombreux composants JS utilisés par mon entreprise en dépendent et ne pas les utiliser n'est pas un choix.

Answer 1

Pour ceux qui ont des accessoires optionnels qui ont besoin de valeurs par défaut. Crédit ici :)

interface Props {
  firstName: string;
  lastName?: string;
}

interface DefaultProps {
  lastName: string;
}

type PropsWithDefaults = Props & DefaultProps;

export class User extends React.Component<Props> {
  public static defaultProps: DefaultProps = {
    lastName: 'None',
  }

  public render () {
    const { firstName, lastName } = this.props as PropsWithDefaults;

    return (
      <div>{firstName} {lastName}</div>
    )
  }
}

Answer 2

D'après un commentaire de @pamelus sur la réponse acceptée :

Vous devez soit rendre toutes les propriétés de l'interface optionnelles (mauvais), soit spécifier la valeur par défaut également pour tous les champs obligatoires (inutile inutile) ou éviter de spécifier le type des defaultProps.

En fait, vous pouvez utiliser la fonction héritage des interfaces . Le code résultant est seulement un peu plus verbeux.

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"
    };

Answer 3

Pour la composante fonctionnelle, je préférerais conserver la props argument, alors voici ma solution :

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;