Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

JSX Fragments are in-properly typed when not using React.Fragment #50429

Open
gkemp94 opened this issue Aug 24, 2022 · 3 comments
Open

JSX Fragments are in-properly typed when not using React.Fragment #50429

gkemp94 opened this issue Aug 24, 2022 · 3 comments
Assignees
@iisaduan
Labels
Bug A bug in TypeScript
Milestone
TypeScript 4.9.0

Comments

@gkemp94
Copy link

gkemp94 commented Aug 24, 2022 •
edited

Bug Report

🔎 Search Terms

React Fragment

🕗 Version & Regression Information

I believe this is a new inconsistency due to changes in React.

⏯ Playground Link

https://github.com/gkemp94/test-typescript-fragment

Code

import React from "react";

const test = () => "asd";

// No Errors
const jsxWithJsxFragment = <>{test}</>;

// Type '() => string' is not assignable to type 'ReactNode'.
const jsxWithReactFragment = <React.Fragment>{test}</React.Fragment>;

🙁 Actual behavior

When using <> vs <React.Fragment> the children are not properly type checked

🙂 Expected behavior

When jsx: react is specified, to type check <> the same as React.Fragment
@MartinJohns
Copy link
Contributor

Playground link

@RyanCavanaugh RyanCavanaugh added the Bug A bug in TypeScript label Aug 26, 2022
@RyanCavanaugh RyanCavanaugh added this to the TypeScript 4.9.0 milestone Aug 26, 2022
@a-tarasyuk
Copy link
Contributor

@RyanCavanaugh Should JsxOpeningFragment be part of CallLikeExpression?

TypeScript/src/compiler/types.ts

Lines 2802 to 2808 in ed6889c

export type CallLikeExpression =
| CallExpression
| NewExpression
| TaggedTemplateExpression
| Decorator
| JsxOpeningLikeElement
;

It does not have tagName (which we use in JsxOpeningLikeElement to resolve call) and other common CallLikeExpression properties - attributes, typeArguments, etc.

Or do we need to make a special kind of fragment factory (with a synthetic name) call resolving?

@DanielRosenwasser
Copy link
Member

DanielRosenwasser commented Nov 2, 2022 •
edited

It sounds like the answer is "yes it should be a call-like expression", but also you will need to virtualize a target. I don't know if we still do that, but we have helpers like getEffective____ for getting the arguments we should check against.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@iisaduan iisaduan

Labels
Bug A bug in TypeScript
Projects
None yet
Milestone
TypeScript 4.9.0
Development

No branches or pull requests
7 participants
@a-tarasyuk @DanielRosenwasser @MartinJohns @RyanCavanaugh @iisaduan @gkemp94 @navya9singh