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

Comienza con el enlace proporcionado de TypeScript Playground y el ejemplo de JSX en el que produce el diagnóstico 2322. Sigue cómo el compilador informa de las props de un componente React sin parámetros y añade un caso de regresión específico si las pruebas de diagnóstico existentes del repositorio cubren esta ruta. Se considera terminado cuando el diagnóstico indique claramente que Foo no acepta parámetros, en lugar de poner en primer plano el tipo complejo y IntrinsicAttributes.