If an object typed as any is sent using the spread operator on props, TS aborts checking

Looking at the following code example

// Component.tsx file
import React from "react";

export const Component = ({ title, subTitle }: Props) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{subTitle}</p>
    </div>
  );
};

// Props declared here
type Props = {
  title: string;
  subTitle: string;
};

// App.tsx file
import { Component } from "./Component";
import "./styles.css";

export default function App() {
  const componentData: any = {
    title: "Hello",
    subTitle: "Hello from comp"
  };
  return (
    <div className="App">
      // TS does not show an error here even though randomProp is not described on Component's Props
      <Component {...componentData} randomProp="string" />
    </div>
  );
}

As you can see, on line 5 in App.tsx the componentData object is typed as any.
On line 11, in the return of the App.tsx I send that object as props for another component using the spread operator.

If I do that, TS aborts checking the rest of the props that are sent, as you can see randomProp="string" does not throw an error.

If I remove the :any typing from the object on line 5, then TS marks the randomProp="string" as non existing on the props of Component (I expected this to happen with :any on line 5 as well).

The follwing example does not use destructuring and TS shows the error this way

// App.tsx file
import { Component } from "./Component";
import "./styles.css";

export default function App() {
  const componentData: any = {
    title: "Hello",
    subTitle: "Hello from comp"
  };
  return (
    <div className="App">
      <Component 
       title={componentData.title}
       subTitle={componetData.subTitle}
       // TS shows an error here!
       randomProp="string"
      />
    </div>
  );
}

For more information:

Please have a look at this CodeSandbox: https://codesandbox.io/s/elated-worker-td2g0u?file=/src/App.tsx .

And also this one: https://codesandbox.io/s/shy-monad-ygkloq?file=/src/App.tsx

Is this intended behaviour or a bug? How does this work underneath?

The any type is explicitly meant to turn off type checking, and it tends to be "infectious" or "contagious" in that combining any with other types often results in any. So if you want type checking, a good general rule is: avoid any as much as possible.

Still, if you need to use it, you should learn more detail of how it interacts with other types and when it "takes over" other types and when it doesn't. Let's start with this:

type Props = {
    title: string;
    subTitle: string;
};
const componentData: any = {
    title: "Hello",
    subTitle: "Hello from comp"
};

Since componendData is of type any, the compiler will let you index into it with any key you want, and the resulting property will also be of type any:

const title = componentData.title;
// const title: any
const subTitle = componentData.fsfsdjfiwjwi;
// const subTitle: any

If you make an object literal with any-typed values as property values, only those properties will have any types; it doesn't "infect" the whole object:

const objLit = {
    title: title,
    subTitle: subTitle,
    randomProp: "abc"
};
/* const objLit: {
    title: any;
    subTitle: any;
    randomProp: string;
} */

So if you try to assign such an object literal to a variable of type Props, the compiler will happily accept the any properties (even though it can't verify them, which is the point of any), but it will catch excess properties, because the object literal is aware of their existence:

const excess: Props = {
    title: componentData.title, // okay
    subTitle: componentData.fsfsdjfiwjwi,  // okay
    randomProp: "abc" // error!
};

Now let's compare to what happens when you spread an any-typed value into an object literal:

const objSpread = {
    ...componentData,
    randomProp: "abc"
};
// const objSpread: any

Conceptually a spread will result in something very much like the intersection of the spreaded object type with the type for the rest of the object literal. (For spreads with known keys the compiler will try to represent overwritten properties more accurately, but for generic or other unknown-key types, it uses the intersection.) And the intersection of any with any other type is just any:

type IntersectAny = any & { randomProp: string };
// type IntersectAny = any

So that objSpread value is now of type any. The compiler has completely forgotten about randomProp. And that means if you assign such an object literal to a value of type Props, the compiler will not see any excess properties, because any doesn't have any "excess" properties:

const noExcess: Props = {
    ...componentData,
    randomProp: "abc" // okay
}; 

So there you go. If you spread an any into an object literal it "infects" the whole object and becomes any. But if you add properties of type any individually to an object, the any type will be confined to just those properties.

Playground link to code