How to specify (optional) default props with TypeScript for stateless, functional React components?

Question

I'm trying to create a stateless React component with optional props and defaultProps in Typescript (for a React Native project). This is trivial with vanilla JS, but I'm stumped as to how to achieve it in TypeScript.

With the following 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; 

Calling <Test title="Sir" name="Lancelot" /> renders "Sir Lancelot" as expected, but <Test /> results in nothing, when it should output "Mr McGee".

Any help is greatly appreciated.

Answer 1

Here's a similar question with an answer: 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;