### 使用 TypeScript 封装 `formatDate` 函数 在 TypeScript 中封装一个日期格式化函数，可以通过定义参数和返回值的类型来提供更强的类型安全性和代码提示。以下是基于引用内容[^2]并结合 TypeScript 的实现方法。 #### 定义 `formatDate` 函数 该函数接受两个参数：一个是必选的 `date` 参数（表示需要格式化的日期），另一个是可选的 `separator` 参数（用于分隔年月日，默认为 `'-'`）。最终返回一个字符串类型的日期格式。 ```typescript // src/utils/formatDate.ts export function formatDate(date: Date, separator: string = '-'): string { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return `${year}${separator}${month}${separator}${day}`; } ``` 在此处明确了 `date` 类型为 `Date`，而 `separator` 默认值设为 `'-'` 并允许传入任意字符串作为自定义分隔符。最后返回的结果是一个拼接后的字符串[^1]。 --- #### 在 Vue 组件中使用 `formatDate` 当我们在 Vue 3 `<script setup>` 环境下引入这个工具函数时，可以直接导入并调用它。 ```vue <script setup lang="ts"> import { formatDate } from '@/utils/formatDate'; const today = formatDate(new Date()); </script> <template> <p>Today: {{ today }}</p> </template> ``` 这里展示了如何将封装好的 `formatDate` 应用于模板绑定场景之中[^2]。 --- #### 添加类型声明的重要性 通过给 `formatDate` 明确指定输入输出的数据结构，可以让开发者更清楚地了解其用途以及正确使用的姿势。例如，在 IDE 或编辑器里能够获得实时语法高亮与错误警告等功能支持，从而有效提升编码效率降低潜在风险。 --- #### 可扩展性考虑 如果未来还需要更多样式的日期格式选项，则可以在现有基础上进一步完善逻辑分支或者新增额外配置项满足需求变化趋势。比如增加小时分钟秒数部分的支持等复杂情况下的适配方案设计思路如下所示： ```typescript export function fullFormatDate( date: Date, options?: { includeTime?: boolean; timeSeparator?: string }, ): string { const defaultOptions = { includeTime: false, timeSeparator: ':' }; const finalOptions = { ...defaultOptions, ...(options || {}) }; const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); let result = `${year}-${month}-${day}`; if (finalOptions.includeTime) { const hours = String(date.getHours()).padStart(2, '0'); const minutes = String(date.getMinutes()).padStart(2, '0'); const seconds = String(date.getSeconds()).padStart(2, '0'); result += ` ${hours}${finalOptions.timeSeparator}${minutes}${finalOptions.timeSeparator}${seconds}`; } return result; } ``` 这段改进版代码提供了是否包含时间的选择开关及其对应的连接字符设定灵活性[^4]。 --- ### 总结 以上就是关于如何采用 TypeScript 来构建更加健壮可靠的 `formatDate` 实现过程介绍。不仅限于基础功能覆盖范围之外还预留了一定程度上的弹性空间以便后续维护升级之需。 ---