2019: noticed all answers above are quite outdated so here is a fresh one.

Lookup type

With newer TS versions you can use lookup types.

type ViewProps = View['props']

Despite being very convenient, that will only work with class components.

React.ComponentProps

The React typedefs ship with an utility to extract the type of the props from any component.

type ViewProps = React.ComponentProps<typeof View>

type InputProps = React.ComponentProps<'input'>

This is a bit more verbose, but unlike the type lookup solution:

• the developer intent is more clear
• this will work with BOTH functional components and class components

All this makes this solution the most future-proof one: if you decide to migrate from classes to hooks, you won't need to refactor any client code.

I think you have a couple small issues in DisplayPerson.tsx. I've fixed them in this codesandbox: https://codesandbox.io/s/modest-snyder-s5bmt?file=/src/App.tsx

DisplayPerson.tsx:

import React from 'react';
import { Person } from '../App';

export default function DisplayPerson({ person }: { person: Person }) {
    return (
        <div>
            <h1>{person.firstName}</h1>
            <h1>{person.lastName}</h1>
        </div>
    );
}

1. Your prop type is incorrect. Instead of { person }: Person you should have { person }: { person: Person }.
2. You should wrap person.firstName and person.lastName with {}

To elaborate on #1: The props passed into DisplayPerson is an object where the key is the prop name and the value is whatever's passed in. Therefore, the type of the props object isn't Person but rather an object with key person and a value of type Person.

Prop Types

You can defined the props that you pass to a function component inline

function Results ({ results, openPopup }: { results: MyResult[], openPopup: () => void }) {

But it's more common to define a separate interface for the props

interface Props {
    results: MyResult[];
    openPopup: () => void;
}

Which you can use to define the props directly

function Results ({ results, openPopup }: Props) {

Or through React.FC

const Results: React.FC<Props> = ({ results, openPopup }) => {

Data Type

To define the type for data you need to create an interface that has all of the properties in the API response that you want to use. Then when you call axios, you use the generic type of the axios function to tell it what the fetched data should look like.

For whatever reason, axios() doesn't seem to take a generic, but axios.get() does.

axios.get<MyApiResponse>(apiurl + "&s=" + state.s).then(({ data }) => {

Now the data variable automatically has the MyApiResponse type.