Confusing error when a zero-parameter React component is given a parameter

Bug Report

When you try to pass a param using JSX to a component that doesn't take any params, you get a confusing message about IntrinsicAttributes. When you pass in a really complicated type, this error can easily get lost in the noise from the type itself.

Context: tweet in response to @mjbvz's request for confusing error messages.

🔎 Search Terms

• IntrinsicAttributes
• does not exist on type IntrinsicAttributes
• 2322

maybe related to #33476 and #35253

🕗 Version & Regression Information

Version 4.1.2 (full details below)

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "declaration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": 2,
    "target": "ES2017",
    "jsx": "React",
    "module": "ESNext"
  }
}

⏯ Playground Link

Playground Link: Provided

💻 Code

import React from 'react';

function Foo() {
    return null;
}

const val = {my: {complex: {nested: {structure: {with_: { some: ['arrays']}}}}}};

function MyStory() {
    return <Foo param={val} />;
    //          ~~~~~
    // Type '{ param: { my: { complex: { nested: { structure: { with_: { some: string[]; }; }; }; }; }; }; }' is not assignable to type 'IntrinsicAttributes'.
    //   Property 'param' does not exist on type 'IntrinsicAttributes'. (2322)
}

🙁 Actual behavior

It's not clear that the error is that a parameter is being incorrectly passed via JSX.

Here's the example from the Tweet. Note how large the type is compared to the real error:

🙂 Expected behavior

A better error might be:

Foo takes no parameters

Beginne mit dem bereitgestellten TypeScript Playground-Link und dem JSX-Beispiel, bei dem den Diagnostic 2322 erzeugt. Verfolge, wie der Compiler Props für eine React-Komponente ohne Parameter meldet, und füge einen gezielten Regressionstest hinzu, falls die vorhandenen Diagnostic-Tests des Repositorys diesen Pfad abdecken. Erledigt ist es, wenn der Diagnostic klar besagt, dass Foo keine Parameter akzeptiert, statt den komplexen Typ und IntrinsicAttributes in den Vordergrund zu stellen.