It's actually easier than all of the answers above. You just need to follow the example below:

type Props = {
  id: number,
  name: string;
  // All other props
  [x:string]: any;
}

const MyComponent:React.FC<Props> = props => {
  // Any property passed to the component will be accessible here
}

use ...rest

type ButtonProps = {
    disabled: boolean;
};

function Button(props: ButtonProps): JSX.Element {
    const {disabled = false, ...rest} = props;
...
return (
    <button disabled={disabled} {...rest}>
....

For those who might not quickly understand what [x:string]: any; in the accepted answer does: Although it's a lot like arrays' syntax, it's indeed specifying an object its keys which are of type string and its values which are of type any. It's called "Index Signature" in TypeScript's terminology.

However, also notice that sometimes, as an alternative and less loose-on-types solution, a library you're using might have types exported as well, so you could use those.

For instance, when extending Ant's Buttons, one could do this:

import { ReactNode } from "react";
import { Button as AntButton } from "antd";
import { NativeButtonProps } from "antd/lib/button/button";

interface IButtonProps {
  children?: ReactNode;
}

const Button = ({
  children,
  ...rest
}: IButtonProps & NativeButtonProps): JSX.Element => {
  return <AntButton {...rest}>{children}</AntButton>;
};

export default Button;

NOTE1: The ampersand (&) operator in IButtonProps & NativeButtonProps simply does "merging" of types in TypeScript. Now you don't lose intellisense for Ant Button props on your own Button, because you don't use any anymore. Ant Button's types and your IButtonProps are combined and so exist both.

NOTE2: Also you might wonder where I found this type. This type was exported here: https://github.com/ant-design/ant-design/blob/master/components/button/button.tsx#L124 And also its include path could be realized using intellisense, just start typing NativeButton... and it must be suggested to you.

React.HtmlAttributes in the example above is now generic so I needed to extend from React.AnchorHTMLAttributes<HTMLAnchorElement>.

Example:

import React from 'react';

type  AClickEvent = React.MouseEvent<HTMLAnchorElement>;

interface LinkPropTypes extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
    to: string;
    onClick?: (x: AClickEvent) => void;
}

class Link extends React.Component<LinkPropTypes> {
  public static defaultProps: LinkPropTypes = {
    to: '',
    onClick: null,
  };

private handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
   ...
    event.preventDefault();
    history.push(this.props.to);
 };

  public render() {
    const { to, children, ...props } = this.props;
    return (
      <a href={to} {...props} onClick={this.handleClick}>
        {children}
      </a>
    );
    }
}

export default Link;

A getter like this could work:

class Link extends React.Component<{
  textToDisplay: string;
} & React.HTMLAttributes<HTMLDivElement>> {

  static propTypes = {
    textToDisplay: PropTypes.string;
  }

  private get HtmlProps(): React.HTMLAttributes<HTMLAnchorElement> {
    return Object.fromEntries(
      Object.entries(this.props)
      .filter(([key]) => !Object.keys(Link.propTypes).includes(key))
    );
  }

  public render():JSX.Element {
    return (
      <a {...this.HtmlProps}>
        {this.props.textToDisplay}
      </a>
    );
  }
}

<Link textToDisplay="Search" href="http://google.com" />

React.ComponentPropsWithoutRef/React.ComponentPropsWithRef

As explained in https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/

interface Props extends React.ComponentPropsWithoutRef<"button"> {
  // ...
}
    
const FancyButton = (props: Props) => {
  const { /**/ , ...rest} = props
      
  // ...
      
  return <button {...rest}>{/**/}</button>
}

if using forwardRef, use React.ComponentPropsWithRef instead

DEMO

I've accepted Nitzen Tomer's answer because it was the basic idea I was going for.

As a more generalized solution this is what I ended up going with:

export function rest(object: any, remove: {[key: string]: any}) {
  let rest = Object.assign({}, object);
  Object.keys(remove).forEach(key => delete rest[key]);
  return rest;
}

So I can use it like this:

const {a, b, c} = props;
const htmlProps = rest(props, {a, b, c});

And once TypeScript supports object rest/spread I can just look for all usages of rest() and simplify it to const {a, b, c, ...htmlProps} = props.

If you are looking for code intelligence

use the following approach.

1. pass the ...rest props.
2. choose which element in the component to have intelligence (TextInput) in our case.
3. Extend the component props by the element type.

AppTextInput.tsx

interface AppTextInputProps extends TextInputProps {
icon?: any;
}
const AppTextInput = ({ icon, ...rest }: AppTextInputProps) => {
  return (
    <View style={styles.container}>
     <TextInput style={styles.input} placeholder="Name" {...rest} />
      {icon && <Ionicons name={icon} size={16} />}
    </View>
    );
 };

TypeScript now ignores ...rest if you pass it as argument to your component. In my opinion ...rest argument does not need type safety as these are the default argument that are passed down to child components by parent component. For example redux passes information about store to child component and so the ...rest argument is always there and does not needs type safety or propTypes.

//here's the right solution

interface schema{
  loading: boolean
}
//pass ...rest as argument
export function MyComponent({loading, ...rest}:schema){
  if (loading) return <h2>Loading ...</h2>
  return (
    <div {...rest}>
      <h2>Hello World </h2>
    </div>
}

strong text