microsoft / microsoft/TypeScript

Declaration emit inlines types incorrectly

Open
#57,779 2 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Domain: Declaration Emit Help Wanted Possible Improvement
Dominant language
Go
Stars
111k
Forks
14.4k
Avg merge
1d 19h
Merged PRs (30d)
117

Description

🔎 Search Terms

declaration emit inline

🕗 Version & Regression Information

I was unable to test this prior to 4.4 since React types are no longer compatible with that version.

⏯ Playground Link

No response

💻 Code
import * as React from "react";

export class Component extends React.Component<{ children: React.ReactNode }> {
  render() {
    if (Math.random()) {
      return <div>{this.props.children}</div>;
    } else {
      return this.props.children;
    }
  }
}

Full repro: https://github.com/eps1lon/ts-module-auto-export/tree/bad-inline

🙁 Actual behavior

Return value from render() is not referencing React.ReactNode but inlines its (incomplete) union members:

import * as React from "react";
export declare class Component extends React.Component<{
    children: React.ReactNode;
}> {
    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
}
🙂 Expected behavior

Return type references the type alias. Inlining union members is incorrect (we may add or remove members or treat members as internal, local types) generally and here specially not even using all members.

export declare class Component extends React.Component<{
  children: React.ReactNode;
}> {
  render(): React.ReactNode | import("react/jsx-runtime").JSX.Element;
}
Additional information about the issue

The fact that it inlines the type here is a special case of https://github.com/microsoft/TypeScript/issues/37151. https://github.com/microsoft/TypeScript/issues/37151 is a more general since it's not always clear when inlining is correct or not. I'd be curious to know what would break if TS would not stop inlining in this special case.

But this issue is also broader since the inline is incomplete.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked ts-module-auto-export bad-inline reproduction and inspect TypeScript's declaration emit output for Component.render. Compare the emitted return type with the expected React.ReactNode reference, then use issue #37151 to understand the related inlining behavior; done means the union is emitted completely and through the type alias as shown.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
compilers
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.