Diaoan's Blog

本篇进入type-challenges的Medium难度的题目，其中有大量模板字面量匹配的题目，它们的套路基本都一样，并且难度友好，本篇将着重于这类题目。如果对模板字面量还不是很了解，可以看这里：TypeScript类型体操（一）。

所谓类型体操，就是仅基于TypeScript的各种类型操作来实现一些工具类型，使用TypeScript的类型推导能力来运行具体的逻辑。借助泛型，模板字符串，推断等特性，可以绕开一些限制，构建出非常复杂的类型。知名开发者antfu在GitHub上发起了一个类型体操挑战项目type-challenges，里面收录了一系列由易到难的类型体操挑战，通过完成这些挑战可以极大地提升对TypeScript的理解，让我们在实际开发中能构建出更健壮的类型系统。

如果一个元素和它的其中一个祖先元素对同一个事件都有事件侦听器，哪一个会先触发呢？这个问题其实是取决于浏览器的。

假设在一个元素里包含一个元素：

1
2
3
4
5
6
7

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

它们都有点击事件的处理器，如果用户点击element2，就会触发element1和element2的点击事件，但是哪一个先触发呢？换句话说，事件执行的顺序是怎么样的？

在项目中遇到这样一个需求：

前端一些交互需要根据后端返回的权限数据进行鉴权，没有权限的交互，鼠标悬浮上去后，鼠标旁边要显示一个锁图标，点击后弹出无权限的提示。类似下面的效果：

阿里云的免费SSL证书的时长从一年下调到三个月了，而且还没得免费申请通配符证书，这样每三个月就得换一批证书，而且一个三级域名就要一个证书，有点太麻烦了，而且不够用。

因此一个不限量申请证书，可以续签的证书申请方式变成了刚需，网上冲浪刚刚好了解到Let’s Encrypt这个CA，正好解决了阿里云免费SSL证书不足的问题，让我们能够更加方便地为多个域名申请和续签SSL证书。

在项目中遇到这样一个需求：

点击按钮，从页面右侧出现一个侧弹，要求这个侧弹在不同的位置有不同的表现，一种是覆盖在原内容上，另一种是把侧弹左边的内容（也是一个侧弹）推开，并且出现的侧弹需要支持拉左边界修改宽度。

有一个项目是用Vue2和Ant Design Vue搭建的，其中一个需求是在main.js中发送一个请求，然后根据响应判断需不需要弹出一个Ant Design Vue的Modal弹窗。

Antd的Modal支持直接调用函数来显示弹窗，但是需求中里弹窗里面的内容不仅仅是纯文字，因此只能在Modal里的content里传入h函数或者虚拟节点了。

在Vue3中，这个需求可以直接通过引入h函数创建虚拟节点实现，但是在Vue2中是不可以的，需要用另外的写法来实现。

类似React，其实Vue也是支持JSX和渲染函数的，在Vue中使用这些功能可以发挥JavaScript的全部编程能力。