同步发布于我的网站 🚀

• 概述
• 错误描述
  • 原代码
  • 报错信息
• 原因分析
• 解决方案
  • 修改导入语句
  • 使用泛型
• 代码解释
• 总结

概述

在使用 Vue3 和 dayjs 时，可能会遇到一个常见的错误：“Import declaration conflicts with local declaration of ‘dayjs’”。本文将详细介绍这个错误的原因以及如何解决它。

错误描述

原代码

import dayjs from 'dayjs';
import dayjs from 'dayjs'; // 重复导入

import type { Dayjs } from 'dayjs';

...

const multipleSelectModel = defineModel('multiple-selector-model', {
  default: [] as Dayjs[],
});

报错信息

Import declaration conflicts with local declaration of 'dayjs'

原因分析

这个错误的原因在于同一个变量名 dayjs 被多次导入或声明。在 JavaScript 中，每个变量名在一个作用域内只能声明一次。重复导入会导致编译器报错。

解决方案

修改导入语句

确保 dayjs 只被导入一次，并且避免重复声明。以下是修改后的代码：

import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';

...

const multipleSelectModel = defineModel<Dayjs[]>('multiple-selector-model', {
  default: [],
});

使用泛型

在 defineModel 中使用泛型来指定默认值的类型，这样可以避免类型断言的冗余：

const multipleSelectModel = defineModel<Dayjs[]>('multiple-selector-model', {
  default: [],
});

代码解释

1. 导入 dayjs：

   import dayjs from 'dayjs';
   

   这行代码从 dayjs 库中导入 dayjs 函数。

2. 导入类型 Dayjs：

   import type { Dayjs } from 'dayjs';
   

   这行代码从 dayjs 库中导入 Dayjs 类型，用于类型检查。

3. 定义模型：

   const multipleSelectModel = defineModel<Dayjs[]>('multiple-selector-model', {
     default: [],
   });
   

   这行代码定义了一个名为 multiple-selector-model 的模型，并指定了其默认值为一个空的 Dayjs 数组。

总结

通过确保 dayjs 只被导入一次并使用泛型来指定类型，可以有效避免“Import declaration conflicts with local declaration of ‘dayjs’”错误。希望本文对您有所帮助。