types(NoticeBar): add NoticeBarInstance type (#9245)

src/notice-bar/NoticeBar.tsx

@@ -1,4 +1,11 @@
-import { ref, watch, reactive, PropType, defineComponent } from 'vue';
+import {
+  ref,
+  watch,
+  reactive,
+  PropType,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 
 // Utils
 import { isDef, createNamespace } from '../utils';
@@ -17,33 +24,38 @@ import { onPopupReopen } from '../composables/on-popup-reopen';
 // Components
 import { Icon } from '../icon';
 
-export type NoticeBarMode = 'closeable' | 'link';
+// Types
+import { NoticeBarMode } from './types';
 
 const [name, bem] = createNamespace('notice-bar');
 
+const props = {
+  text: String,
+  mode: String as PropType<NoticeBarMode>,
+  color: String,
+  leftIcon: String,
+  wrapable: Boolean,
+  background: String,
+  scrollable: {
+    type: Boolean as PropType<boolean | null>,
+    default: null,
+  },
+  delay: {
+    type: [Number, String],
+    default: 1,
+  },
+  speed: {
+    type: [Number, String],
+    default: 60,
+  },
+};
+
+export type NoticeBarProps = ExtractPropTypes<typeof props>;
+
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    text: String,
-    mode: String as PropType<NoticeBarMode>,
-    color: String,
-    leftIcon: String,
-    wrapable: Boolean,
-    background: String,
-    scrollable: {
-      type: Boolean as PropType<boolean | null>,
-      default: null,
-    },
-    delay: {
-      type: [Number, String],
-      default: 1,
-    },
-    speed: {
-      type: [Number, String],
-      default: 60,
-    },
-  },
 
   emits: ['close', 'replay'],
 

src/notice-bar/README.md

@@ -115,6 +115,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Notice
 | -------------- | --------------- | --------- | ------------ |
 | reset `v3.1.1` | Reset NoticeBar | -         | -            |
 
+### Types
+
+Get the type definition of the NoticeBar instance through `NoticeBarInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { NoticeBarInstance } from 'vant';
+
+const noticeBarRef = ref<NoticeBarInstance>();
+
+noticeBarRef.value?.reset();
+```
+
 ### Slots
 
 | Name       | Description         |

src/notice-bar/README.zh-CN.md

@@ -136,6 +136,19 @@ app.use(NoticeBar);
 | -------------- | -------------------- | ---- | ------ |
 | reset `v3.1.1` | 重置通知栏到初始状态 | -    | -      |
 
+### 类型定义
+
+通过 `NoticeBarInstance` 获取 NoticeBar 实例的类型定义（从 3.2.0 版本开始支持）。
+
+```ts
+import { ref } from 'vue';
+import type { NoticeBarInstance } from 'vant';
+
+const noticeBarRef = ref<NoticeBarInstance>();
+
+noticeBarRef.value?.reset();
+```
+
 ### Slots
 
 | 名称       | 内容           |

src/notice-bar/index.ts

@@ -5,4 +5,4 @@ const NoticeBar = withInstall<typeof _NoticeBar>(_NoticeBar);
 
 export default NoticeBar;
 export { NoticeBar };
-export type { NoticeBarMode } from './NoticeBar';
+export type { NoticeBarMode, NoticeBarInstance } from './types';

src/notice-bar/types.ts

@@ -0,0 +1,13 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { NoticeBarProps } from './NoticeBar';
+
+export type NoticeBarMode = 'closeable' | 'link';
+
+export type NoticeBarExpose = {
+  reset: () => void;
+};
+
+export type NoticeBarInstance = ComponentPublicInstance<
+  NoticeBarProps,
+  NoticeBarExpose
+>;