React Typescript: FunctionComponent with templated props

Based on your comment you just want this:

interface MyComponentProps<V> {
    views: V;
    initialView: keyof V;
}

type KeyedFunctionComponent<T> = FunctionComponent<MyComponentProps<T>>;

const MyComponent: KeyedFunctionComponent<Views> = (views, initialViews) => <div />;

Then declare your function component using either an interface or "typeof views" as the generic argument. Which is good I think. But, what you really want is this combined with a generator, which will allow you to bind and template correctly:

// Declare some views constant:
const views = { home: "home", index: "index" };


// Declare a type for our bound views component
interface KeyedProps<V> {
    initialView?: keyof V;
}


// declare a type for our input function
interface KeyedWithViewsProps<V> extends KeyedProps<V> {
    views: V;
}


// This is the binding function itself
function createKeyedComponent<T>(views: T, toWrap: FunctionComponent<KeyedWithViewsProps<T>>): FunctionComponent<KeyedProps<T>> {
    return (props: KeyedProps<T>) => toWrap({views, initialView: props.initialView});
}


// Call the binder, and pass in the function we want to bind.
const MyComponent = createKeyedCompnonet(views, () => <div />);

// Now, using the component, only requires the optional initialView param, and it it type-checked to ensure it is a member of views
<MyComponent initialView="home" /> // works
<MyComponent initialView="other" /> // doesn't work

You can extend your ComponentProps like this:

interface MyComponentProps<T> {
   value: T
}

const MyComponent: FunctionComponent<MyComponentProps<string>> = ({ value }) => <div />;

Now value is whatever you pass in <>, for example string or any.

This is what I do

export type MyCompProps<ItemType> = {
    item: ItemType;
};

export const MyComp = <ItemType>(props: MyCompProps<ItemType>): React.ReactElement => {
    return <Text>item.toString</Text>;
}

Then I can just call

<MyComp item={myItem} />

And it figures it out.

If you want value to be any type:

type MyComponentProps = {
  value: any
};

or just one of explicit types (a.k.a. union type):

type MyComponentProps = {
  value: string | number
};

const MyComponent: FunctionComponent<MyComponentProps> = ({ value }) => <div />;