Wie kann man (optionale) Standard-Props mit TypeScript für zustandslose, funktionale React-Komponenten angeben?

Ich versuche, eine zustandslose React-Komponente mit optionalen Props und defaultProps in Typescript zu erstellen (für ein React Native-Projekt). Dies ist mit Vanilla JS trivial, aber ich bin ratlos, wie ich es in TypeScript erreichen soll.

Mit folgendem Code:

import React, { Component } from 'react';
import { Text } from 'react-native';

interface TestProps {
    title?: string,
    name?: string
}

const defaultProps: TestProps = {
    title: 'Mr',
    name: 'McGee'
}

const Test = (props = defaultProps) => (
    <Text>
        {props.title} {props.name}
    </Text>
);

export default Test;

Berufung <Test title="Sir" name="Lancelot" /> macht “Sir Lancelot” wie erwartet, aber <Test /> führt zu nichts, wenn “Mr McGee” ausgegeben werden sollte.

Jede Hilfe wird sehr geschätzt.

Hier ist eine ähnliche Frage mit einer Antwort: Reagieren Sie mit TypeScript – definieren Sie defaultProps in einer zustandslosen Funktion

import React, { Component } from 'react';
import { Text } from 'react-native';

interface TestProps {
    title?: string,
    name?: string
}

const defaultProps: TestProps = {
    title: 'Mr',
    name: 'McGee'
}

const Test: React.SFC<TestProps> = (props) => (
    <Text>
        {props.title} {props.name}
    </Text>
);

Test.defaultProps = defaultProps;

export default Test;

Ich habe festgestellt, dass die einfachste Methode darin besteht, optionale Argumente zu verwenden. Beachten Sie, dass defaultProps schließlich sein wird für funktionale Komponenten veraltet.

Beispiel:

interface TestProps {
    title?: string;
    name?: string;
}

const Test = ({title="Mr", name="McGee"}: TestProps) => {
    return (
        <p>
            {title} {name}
        </p>
    );
}

So mache ich es am liebsten:

type TestProps = { foo: Foo } & DefaultProps
type DefaultProps = Partial<typeof defaultProps>
const defaultProps = {
  title: 'Mr',
  name: 'McGee'
}

const Test = (props: Props) => {
  props = {...defaultProps, ...props}
  return (
    <Text>
      {props.title} {props.name}
    </Text>
  )
}

export default Test

Wenn ich meine Lösung dem Topf hinzufüge, denke ich, dass sie den bestehenden Lösungen ein zusätzliches Maß an Lesbarkeit und Eleganz verleiht.

Nehmen wir an, Sie haben eine Komponente MyComponent mit einer Mischung aus erforderlichen und optionalen Requisiten. Wir können diese erforderlichen und optionalen Props in zwei Schnittstellen aufteilen und sie für die vollständige Prop-Schnittstelle der Komponente kombinieren, aber nur die optionale verwenden, um die Standardprops festzulegen:

import * as React from "react";

// Required props
interface IMyComponentRequiredProps {
  title: string;
}

// Optional props
interface IMyComponentOptionalProps {
  color: string;
  fontSize: number;
}

// Combine required and optional props to build the full prop interface
interface IMyComponentProps
  extends IMyComponentRequiredProps,
    IMyComponentOptionalProps {}

// Use the optional prop interface to define the default props
const defaultProps: IMyComponentOptionalProps = {
  color: "red",
  fontSize: 40,
};

// Use the full props within the actual component
const MyComponent = (props: IMyComponentProps) => {
  const { title, color, fontSize } = props;
  return <h1 style={{ color, fontSize }}>{title}</h1>;
};

// Be sure to set the default props
MyComponent.defaultProps = defaultProps;

export default MyComponent;

Aktualisierung 2022

Für Funktionskomponenten gibt es tatsächlich eine mögliche Abschreibung von defaultProps aufstellen. Ich glaube nicht, dass dies aufgrund der schieren Menge an Code, der bereits damit geschrieben wurde, so bald passieren wird, aber eine Warnung, die in der Konsole angezeigt wird, ist sehr wahrscheinlich.

Ich verwende die folgende Lösung, die das richtige Verhalten und die richtige TypeScript-Validierung bietet. Es funktioniert mit gemischten definierten/undefinierten Eigenschaften und auch mit Eigenschaften mit/ohne Standardwerten – das heißt, es deckt alle Fälle ab:

interface Props {
  name: string;
  surname?: string;
  age?: number;
}

const defaultProps = {
  surname: 'Doe',
};

function MyComponent(propsIn: Props) {
  const props = {...defaultProps, ...propsIn};

  return <div>{props.surname}</div>;
}

Und die automatische Vervollständigung von VSCode ist genau richtig:

Es wurde mit TypeScript 4.7 getestet.

Ich könnte mich irren, aber das Übergeben eines Standard-Prop-Werts an die Funktion, wie die zweite abgestimmte Antwort sagt, könnte zu subtilen Fehlern oder zu häufig ausgeführten useEffects führen (ich habe nicht genug Repräsentanten, um dort zu antworten, also Hier ist ein reproduzierbarer Codeanbox)

Auch wenn es sich um ein wirklich erfundenes Beispiel handelt und wahrscheinlich in den meisten Fällen nur um schlechtes Komponentendesign handelt, habe ich dies mehr als einmal gesehen und sogar ganze Seiten gebrochen.

Für mich gilt das nicht sehen wie eine Typoskript-Ausgabe.

HAFTUNGSAUSSCHLUSS: Ich habe das nur mit Typoskript versucht.

Das Problem ist jedoch, dass Requisiten stets existiert (sogar als leeres Objekt, wenn nichts übergeben wird). Dafür gibt es aber 2 Workarounds.

Die erste tötet leider die supersaubere Syntax ohne geschweifte Klammern, die Sie haben, aber lassen Sie uns dabei bleiben defaultProps um.

interface TestProps {
    title?: string;
    name?: string;
}

const defaultProps: TestProps = {
    title: 'Mr',
    name: 'McGee'
}

const Test = (passedIn: TestProps) => {
    const props = Object.assign({}, defaultProps, passedIn);
    return (
        <p>
            {props.title} {props.name}
        </p>
    );
}

Eine andere Alternative, die ein wenig haarig werden könnte, wenn Sie eine TONNE von Requisiten haben, aber die es Ihnen ermöglicht, Ihre ursprüngliche Syntax beizubehalten, ist ungefähr so:

const Test = (props: TestProps) => (
    <Text>
        {props.title || 'Mr'} {props.name || 'McGee'}
    </Text>
);

Hoffe das hilft!