microsoft / TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
https://www.typescriptlang.org
Apache License 2.0
101.05k stars 12.49k forks source link

TypeScript Compiler compiles Generic ArrowFunction into a TsxElement #60474

Open Densyakun opened 2 days ago

Densyakun commented 2 days ago

🔎 Search Terms

🕗 Version & Regression Information

⏯ Playground Link

https://www.typescriptlang.org/play/?ts=5.8.0-dev.20241110#code/MYewdgzgLgBA5gUygKQMoHkByMC8MA8AKgHwAUoYAZgJZwBcMA3gFAwwCuATgDYPSfUwcADSsYACwQBDACYJOEAPwNGMANoBrBAE8+UAUIC6eg3BgBfUeYCUDAAqcQAW2oQERYrk8s2FaDEokYHEAYXAaMzxSHzYYJyRxEBkGAHIAcQBRQhTRWJgUgEFgYAQABygU1KlS0u5qYCkoanAAegArCHAcsTYUsLAoBAGAWkJtUoRK-Ora+sbmsHbOsG68gDoN8nDaNclZeQgYAB8jphsxGwBuMU4kLjAAoPEtqh2ubmFHqGD+iOsemBrKCSMAeUi3CClcBuLwwCFQyAINYdcCkazWa7mS5AA

💻 Code

ArrayFunction is compatible with Generics, is there a bug in TypeScript Compiler or is the usage introduced in TypeScript Deep Dive incorrect?

The following compilers compiled to ArrayFunction:

Use the following code from the TypeScript Deep Dive:

const getJSON = <T>(config: {
  url: string,
  headers?: { [key: string]: string },
}): Promise<T> => {
  const fetchConfig = ({
    method: 'GET',
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    ...(config.headers || {})
  });
  return fetch(config.url, fetchConfig)
    .then<T>(response => response.json());
};

🙁 Actual behavior

Result transpiled to JavaScript:

"use strict";
const getJSON = React.createElement(T, null,
    "(config: ",
    url,
    " string, headers?: ",
    [key],
    " string]: string }, }): Promise",
    React.createElement(T, null,
        " => ",
    ,
        " fetchConfig = (",
        method,
        " 'GET', 'Accept': 'application/json', 'Content-Type': 'application/json', ...(config.headers || ",
        ") }); return fetch(config.url, fetchConfig) .then",
        React.createElement(T, null, "(response => response.json()); };")));

🙂 Expected behavior

"use strict";
const getJSON = (config) => {
    const fetchConfig = (Object.assign({ method: 'GET', 'Accept': 'application/json', 'Content-Type': 'application/json' }, (config.headers || {})));
    return fetch(config.url, fetchConfig)
        .then(response => response.json());
};

Additional information about the issue

No response

MartinJohns commented 2 days ago

This is working as intended / a design limitation due to the ambigious syntax for jsx elements and generics. You either need to disable jsx in your config, or use the workaround syntax <T,> instead of <T> for your generic.