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

Inizia dal link fornito a TypeScript Playground e dall’esempio JSX in cui produce il diagnostic 2322. Traccia il modo in cui il compilatore segnala le props di un componente React senza parametri, quindi aggiungi un caso di regressione mirato se i test diagnostici esistenti del repository coprono questo percorso. Il lavoro è completato quando il diagnostic indica chiaramente che Foo non accetta parametri, invece di mettere in primo piano il tipo complesso e IntrinsicAttributes.