TypeScript 当从JSX标签名触发时,联合类型缺少定义,

ijxebb2r  于 4个月前  发布在  TypeScript
关注(0)|答案(7)|浏览(65)

这是一个关于代码中出现问题的示例。

import React from 'react';
class A {
	Renderer = RendererA;
}
class B {
	Renderer = RendererB;
}

const RendererA = () => {
	return <div> A </div>;
};

const RendererB = () => {
	return <div> B </div>;
};

const TestRendererTypes = () => {
	const AB: A | B = null; // just for the demo, AB can be A or B !

	AB.Renderer; //🟩 okey cool,ts find all refs !
	const LostRef = <AB.Renderer />; //🟥 not cool ,ts seem remove refs !
	return LostRef;
};

playground

🙁 实际行为

在使用标签内时,TypeScript解码器只对一个函数jsx的引用。
它应该在这里显示两个Renderer引用!
</>

🙂 预期行为

我们应该得到这样的所有引用。(如果只使用变量引用而不使用jsx标签,则可以正常工作)
<></>
这个例子很简单,但在我的项目中,我失去了所有的引用,如果我需要快速了解渲染指向哪里,这就是问题!
而且还会给出错误的props智能感知!
在这个例子中,我还缺少其他插件!

但是,如果我添加一个直接引用,我就可以得到所有的引用,但这会污染我的代码。

似乎TS对JSX的理解有些困难。
有没有一种hacky且(干净的方式)来解决这个问题?或者告诉我你们是否有临时解决方案?
我希望我正确地表达了我的问题!
谢谢 @+
TSC:版本4.2.3
版本:1.55.0(用户设置)
提交:c185983a683d14c396952dd432459097bc7f757f
日期:2021-03-30T16:01:55.261Z
Electron:11.3.0
Chrome:87.0.4280.141
Node.js:12.18.3
V8:8.7.220.31-electron.0
操作系统:Windows_NT x64 10.0.19042

stszievb

stszievb1#

对我来说无法复现。你能分享一个项目/仓库吗?

oug3syen

oug3syen2#

Doesn’t repro for me. Can you share a project/repo?
hum wait ! , how did you get this work !! do you use a secret options or a kind of blackMagic ?

It also not work in a ts playground , and i tried all versions and many advance settings !

Are you able to tell me if you have special settings or versions ?
link to playground

xxls0lw8

xxls0lw83#

对我来说无法复现。你能分享一个项目/仓库吗?
好的,抱歉我太快地查看了图片(你有4个引用)!但是是的,你遇到了同样的问题,这就是我想说的。
我应该得到这个。(使用Photoshop编辑)

f2uvfpb9

f2uvfpb94#

哦,你指的是定义,而不是引用。那个repros。

pftdvrlh

pftdvrlh5#

哦,你在谈论定义,而不是引用。那个repros。
是的,很抱歉造成了混淆,我不太擅长英语术语。
谢谢你提供的信息!

hrirmatl

hrirmatl6#

不用担心,TypeScript术语对大多数以英语为母语的人来说也是令人困惑的😄

pn9klfpd

pn9klfpd7#

我重新制作了issu,没有JSX标签,因为这个问题在不使用React的情况下也发生了。
playground

class A {
	Renderer = RendererA;
}
class B {
	Renderer = RendererB;
}

const RendererA = (prop:{instance?:A}) => {};
const RendererB = (prop:{instance?:B}) => {};

declare const Test:A|B;
// should accept instance A|B And Point to RendererA & RendererB, why only RendererA ?

Test.Renderer({instance:Test});

我希望我能有更多的解释!

相关问题