Question

.wrap {
  text-align: center;
}

.area-pop.active {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 999;
  background: rgba(0, 0, 0, .8);
  left: 0;
  opacity: 1;
  display: flex;
  align-items: center;
}

.modal-pop-content.active {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
}

.modal-pop-content {
  width: 50%;
  background-repeat: no-repeat;
  background-size: 400px;
  background-position: 30% center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0 auto;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -webkit-transition: -webkit-transform 1500ms ease-in-out;
  -moz-transition: -moz-transform 1500ms ease-in-out;
  -o-transition: -o-transform 1500ms ease-in-out;
  transition: transform 1500ms ease-in-out;
}

h2.modal-pop-title,
.modal-pop-content .content-area {
  color: #fff;
}

.modal-pop-content .content-area {
  color: #fff;
  line-height: 28px;
  display: flex;
}

.emp-photo img {
  width: 90%;
}

.emp-photo {
  width: 50%;
}

.emp-content-area {
  width: 70%;
}

.close {
  position: absolute;
  color: #fff;
  font-size: 32px;
  right: 30%;
  top: 1%;
  cursor: pointer;
}

.area-pop:not(.active) {
  display: none;
  opacity: 0;
}

h3.emp-title a {
  color: #000;
}

h3.emp-title {
  font-size: 16px;
  text-align: center;
}

为什么上面的示例中的<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap"> <div class="elementor-element elementor-element-bc3e463 elementor-widget elementor-widget-image is-mac" data-id="bc3e463" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <div class="elementor-image"> <img width="170" height="239" src="https://upload.wikimedia.org/wikipedia/en/thumb/1/17/Bugs_Bunny.svg/220px-Bugs_Bunny.svg.png" class="attachment-full size-full" alt=""> </div> </div> </div> <div class="elementor-element elementor-element-2db4bcd elementor-widget elementor-widget-text-editor is-mac" data-id="2db4bcd" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <div class="elementor-text-editor elementor-clearfix"> <h3 class="emp-title"><a href="#" data-attr="john smith" class="modal-click">John Smith</a></h3> </div> </div> </div> </div> <div class="area-pop"> <div class="close">X</div> <div class="modal-pop-content" style=""> <h2 class="modal-pop-title">JOHN SMITH</h2> <div class="content-area"> <div class="emp-photo"><img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/17/Bugs_Bunny.svg/220px-Bugs_Bunny.svg.png"></div> <div class="emp-content-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce luctus, tellus ut feugiat aliquet, urna metus cursus neque, a placerat quam ipsum vel augue. Nunc pellentesque euismod massa eu commodo. Ut at nulla mauris. Duis nisi mi, gravida vitae ornare nec, porta non ligula. Phasellus non arcu blandit, commodo sapien quis, vestibulum orci. Donec eu sollicitudin lectus. Aliquam scelerisque, nisi a accumsan volutpat, erat orci cursus nulla, in laoreet arcu libero non elit. Sed tincidunt, ante ut finibus egestas, mauris ante mollis quam, id scelerisque erat tortor eu massa. Aliquam eu justo ex. Donec vitae elit cursus, efficitur turpis sit amet, aliquet turpis. Vestibulum vel accumsan nunc. In aliquam felis ac tortor viverra, eget tempus tortor ullamcorper. In a porttitor odio. Aenean sollicitudin est eu risus faucibus, sit amet imperdiet arcu ornare.</div> </div> </div> </div>不能急切地解决为function broken<T>(value: T) { type Test = keyof T extends keyof T ? 1 : 0 }？对于编译器，我有些不了解的问题应该为我解答。

有趣的是，有一种解决方法：

Test

游乐场here

Answer 1

该问题的答案可能涉及TypeScript 3.3中引入的a bug fix。对条件类型求值的新方法的描述是：

对于条件类型T extends U ? X : Y，我们用来确定是否推迟条件类型解析的算法是：


当无法将Y分配给T时，我们解析为U。考虑与T和U相关的所有类型参数（即T绝对不能分配给U），

否则，当X可分配给T时，我们解析为U 考虑T和U中引用的所有类型参数无关（即T绝对可以分配给U），

否则我们会推迟解决方案。

所以看来keyof T extends keyof T ? 1 : 0被推迟了，因为当keyof T1和keyof T2是不相关的类型时，T1无法分配给T2。这种延迟并非完全错误，但似乎确实是一个限制。

实际上，如果我try your code in TS 3.2.1急切解决，那么这是针对TS3.3引入的更改。

奇怪的是，我对该错误修复程序的算法描述的阅读似乎也应适用于您的解决方法。我不确定[keyof T] extends [keyof T]为何会改变，因为如果[keyof T1]和[keyof T2]不相关，T1肯定不是可分配给T2的。因此，这里仍然存在一些谜团。尚未能够破解它，所以我可能现在就放弃。哦，好吧！

看起来reported this exact issue的某个人X extends X ? 1 : 0并没有得到解决（他们还注意到将其包裹在一个元组中“修复”了该问题），并且该问题被标记为错误，所以也许可以解决？

好的，希望能有所帮助；祝你好运！

为什么不能急切解决这种具有通用keyof的条件？

1 个答案: