Как указать (необязательно) реквизиты по умолчанию с TypeScript для безстоящих, функциональных компонентов React?

Question

Я пытаюсь создать компонент Stateless React с дополнительными реквизитами и defaultProps в TypScript (для проекта React Native). Это тривиально с ванильным JS, но я в тупике о том, как его достичь в TypeScript.

С помощью следующего кода:

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; 

Вызов <Test title="Sir" name="Lancelot" /> делает «сэр Ланселот», как и ожидалось, но <Test /> результаты ни в чем, когда он должен выводить «Г-н McGee».

Любая помощь очень ценится.

Answer 1

Вот аналогичный вопрос с ответом: React with TypeScript - define defaultProps in stateless function

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; 

Answer 2

Для меня это не как проблема с машинописью.

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я только пробовал это с машинописным текстом.

Однако проблема заключается в том, что реквизит всегда существует (даже как пустой объект, когда ничего не передается). Однако для этого есть 2 способа обхода.

Первый, к сожалению, убивает супер чистый фигурный синтаксис без фигуры, но давайте держим вас defaultProps.

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

другого вариант, который мог бы получить немного волосатым, если у вас есть TON реквизита, но это позволяет сохранить исходный синтаксис что-то вроде этого:

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

Надеется, что это помогает!