Comment spécifier les accessoires par défaut (facultatifs) avec TypeScript pour les composants fonctionnels sans état React?

Question

J'essaie de créer un composant React sans état avec des accessoires optionnels et defaultProps dans TypeScript (pour un projet React Native). C'est trivial avec Vanilla JS, mais je suis perplexe quant à la façon d'y parvenir en TypeScript.

Avec le code suivant:

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;

Appeler <Test title="Sir" name="Lancelot" /> rend "Sir Lancelot" comme prévu, mais <Test /> ne produit rien, alors qu'il devrait afficher "Mr McGee".

Toute aide est grandement appréciée.

Answer 1

Voici une question similaire avec une réponse: Réagissez avec TypeScript - définissez defaultProps dans la fonction sans état

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;