一次解决TS类型警告的傻X经过

故事是这样开始的，有个需求是需要一个时间选择控件，提供额外的清理控件中内容的按钮。

<template>
  <a-space direction="vertical" :size="12">
    <a-date-picker v-model:value="value1" />
  </a-space>
  <a-button @click="clearDate">清除时间</a-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
const value1 =  ref<Dayjs>()
const clearDate = () => {
  value1.value = ''
  // value1.value = null
  // value1.value = dayjs()
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

代码功能上是正常的，但赋值时会出现TS类型检测的告警，这张图有考点，最后有答案。

尝试了几种方式均无法解决问题

• value1.value = ‘’

  警告

• value1.value = null

  警告

• value1.value = dayjs()

  会去当前时间，不满足需求

搜索了半天发现大家都没有遇到这个问题，奇怪。

dayjs的issue中也没发现蛛丝马迹，奇怪。

突然想到，antd的这个组件不是有个allowClear属性，不就是干这个的吗？那应该是支持的。

于是在antd中来回翻滚，终于在generateSinglePicker.tsx文件中找到了如下代码：

const DatePicker = getPicker(undefined, 'ADatePicker');
const WeekPicker = getPicker('week', 'AWeekPicker');
const MonthPicker = getPicker('month', 'AMonthPicker');
const YearPicker = getPicker('year', 'AYearPicker');
const TimePicker = getPicker('time', 'TimePicker'); // 给独立组件 TimePicker 使用，此处名称不用更改
const QuarterPicker = getPicker('quarter', 'AQuarterPicker');
1
2
3
4
5
6

这不就是给dayjs赋各种类型的值吗？这个undefined看起来十分可以。

于是，尝试为其赋值undefined。于是，世界都清爽了。

回过头看，之前的截图：

这他妈不是清楚的写着接收undefined吗？