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

@@ -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 = {

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()