From 4d7488c258fc0d8fdd807aa8c346a832e07d9eda Mon Sep 17 00:00:00 2001
From: rzzf <cszhjh@gmail.com>
Date: Sun, 18 Jan 2026 15:22:53 +0800
Subject: [PATCH] refactor(components): [alert] use type-based definitions
 (#23401)

* refactor(components): [alert] use type-based definitions

* refactor: fix type error

* docs: update
---
 packages/components/alert/src/alert.ts  | 44 +++++++++++++++++++++++--
 packages/components/alert/src/alert.vue | 13 ++++++--
 2 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts
index 52c8c8141e..3887dc57f8 100644
--- a/packages/components/alert/src/alert.ts
+++ b/packages/components/alert/src/alert.ts
@@ -1,9 +1,47 @@
 import { TypeComponentsMap, buildProps, keysOf } from '@element-plus/utils'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
 
 export const alertEffects = ['light', 'dark'] as const
 
+export interface AlertProps {
+  /**
+   * @description alert title.
+   */
+  title?: string
+  /**
+   * @description descriptive text.
+   */
+  description?: string
+  /**
+   * @description alert type.
+   */
+  type?: keyof typeof TypeComponentsMap
+  /**
+   * @description whether alert can be dismissed.
+   */
+  closable?: boolean
+  /**
+   * @description text for replacing x button
+   */
+  closeText?: string
+  /**
+   * @description whether show icon
+   */
+  showIcon?: boolean
+  /**
+   * @description should content be placed in center.
+   */
+  center?: boolean
+  /**
+   * @description theme style
+   */
+  effect?: 'light' | 'dark'
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `AlertProps` instead.
+ */
 export const alertProps = buildProps({
   /**
    * @description alert title.
@@ -52,7 +90,9 @@ export const alertProps = buildProps({
     default: 'light',
   },
 } as const)
-export type AlertProps = ExtractPropTypes<typeof alertProps>
+/**
+ * @deprecated Removed after 3.0.0, Use `AlertProps` instead.
+ */
 export type AlertPropsPublic = ExtractPublicPropTypes<typeof alertProps>
 
 export const alertEmits = {
diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index 8e15e68245..88b4c62878 100644
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@@ -53,7 +53,9 @@ import {
   isComment,
 } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
-import { alertEmits, alertProps } from './alert'
+import { alertEmits } from './alert'
+
+import type { AlertProps } from './alert'
 
 const { Close } = TypeComponents
 
@@ -61,7 +63,14 @@ defineOptions({
   name: 'ElAlert',
 })
 
-const props = defineProps(alertProps)
+const props = withDefaults(defineProps<AlertProps>(), {
+  title: '',
+  description: '',
+  type: 'info',
+  closable: true,
+  closeText: '',
+  effect: 'light',
+})
 const emit = defineEmits(alertEmits)
 const slots = useSlots()