docs: demo ts (#8196)

package.json

@@ -57,7 +57,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "7.x",
-    "@vant/icons": "^1.5.2",
+    "@vant/icons": "^1.5.3",
     "@vant/lazyload": "^1.0.2",
     "@vant/popperjs": "^1.0.4",
     "@vant/use": "^1.0.5"

src/calendar/demo/index.vue

@@ -118,9 +118,10 @@
   />
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
+import { DayItem } from '../components/Day';
 
 const i18n = {
   'zh-CN': {
@@ -131,7 +132,7 @@ const i18n = {
     youthDay: '青年节',
     calendar: '日历',
     maxRange: '日期区间最大范围',
-    selectCount: (count) => `选择了 ${count} 个日期`,
+    selectCount: (count: number) => `选择了 ${count} 个日期`,
     selectSingle: '选择单个日期',
     selectMultiple: '选择多个日期',
     selectRange: '选择日期区间',
@@ -155,7 +156,7 @@ const i18n = {
     youthDay: 'Youth Day',
     calendar: 'Calendar',
     maxRange: 'Max Range',
-    selectCount: (count) => `${count} dates selected`,
+    selectCount: (count: number) => `${count} dates selected`,
     selectSingle: 'Select Single Date',
     selectMultiple: 'Select Multiple Date',
     selectRange: 'Select Date Range',
@@ -176,7 +177,7 @@ const i18n = {
 export default {
   setup() {
     const t = useTranslate(i18n);
-    const state = reactive({
+    const state = reactive<Record<string, any>>({
       date: {
         maxRange: [],
         selectSingle: null,
@@ -221,7 +222,11 @@ export default {
       state.firstDayOfWeek = 0;
     };
 
-    const dayFormatter = (day) => {
+    const dayFormatter = (day: DayItem) => {
+      if (!day.date) {
+        return day;
+      }
+
       const month = day.date.getMonth() + 1;
       const date = day.date.getDate();
 
@@ -244,7 +249,7 @@ export default {
       return day;
     };
 
-    const show = (type, id) => {
+    const show = (type: string, id: string) => {
       resetSettings();
       state.id = id;
       state.type = type;
@@ -284,32 +289,32 @@ export default {
       }
     };
 
-    const formatDate = (date) => {
+    const formatDate = (date: Date) => {
       if (date) {
         return `${date.getMonth() + 1}/${date.getDate()}`;
       }
     };
 
-    const formatFullDate = (date) => {
+    const formatFullDate = (date: Date) => {
       if (date) {
         return `${date.getFullYear()}/${formatDate(date)}`;
       }
     };
 
-    const formatMultiple = (dates) => {
+    const formatMultiple = (dates: Date[]) => {
       if (dates.length) {
         return t('selectCount', dates.length);
       }
     };
 
-    const formatRange = (dateRange) => {
+    const formatRange = (dateRange: Date[]) => {
       if (dateRange.length) {
         const [start, end] = dateRange;
         return `${formatDate(start)} - ${formatDate(end)}`;
       }
     };
 
-    const onConfirm = (date) => {
+    const onConfirm = (date: Date | Date[]) => {
       state.showCalendar = false;
       state.date[state.id] = date;
     };

src/dropdown-menu/demo/index.vue

@@ -57,9 +57,10 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, reactive, ref, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
+import { ComponentInstance } from '../../utils';
 import { RED } from '../../utils/constant';
 
 const i18n = {
@@ -105,7 +106,7 @@ const i18n = {
 
 export default {
   setup() {
-    const item = ref(null);
+    const item = ref<ComponentInstance>();
     const t = useTranslate(i18n);
 
     const state = reactive({

src/icon/demo/index.vue

@@ -93,7 +93,7 @@
   </van-tabs>
 </template>
 
-<script>
+<script lang="ts">
 import icons from '@vant/icons';
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
@@ -101,7 +101,7 @@ import { RED } from '../../utils/constant';
 import Notify from '../../notify';
 
 // from https://30secondsofcode.org
-function copyToClipboard(str) {
+function copyToClipboard(str: string) {
   const el = document.createElement('textarea');
   el.value = str;
   el.setAttribute('readonly', '');
@@ -109,18 +109,21 @@ function copyToClipboard(str) {
   el.style.left = '-9999px';
   document.body.appendChild(el);
 
-  const selected =
-    document.getSelection().rangeCount > 0
-      ? document.getSelection().getRangeAt(0)
-      : false;
+  const selection = document.getSelection();
+
+  if (!selection) {
+    return;
+  }
+
+  const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
 
   el.select();
   document.execCommand('copy');
   document.body.removeChild(el);
 
   if (selected) {
-    document.getSelection().removeAllRanges();
-    document.getSelection().addRange(selected);
+    selection.removeAllRanges();
+    selection.addRange(selected);
   }
 }
 
@@ -154,7 +157,7 @@ export default {
     const t = useTranslate(i18n);
     const tab = ref(0);
 
-    const copy = (icon, option = {}) => {
+    const copy = (icon: string, option: Record<string, unknown> = {}) => {
       let tag = `<van-icon name="${icon}"`;
       if ('dot' in option) {
         tag = `${tag} ${option.dot ? 'dot' : ''}`;

src/image-preview/demo/index.vue

@@ -33,10 +33,10 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import ImagePreview from '..';
+import ImagePreview, { ImagePreviewOptions } from '..';
 import Toast from '../../toast';
 
 const i18n = {
@@ -49,7 +49,7 @@ const i18n = {
     customConfig: '传入配置项',
     startPosition: '指定初始位置',
     componentCall: '组件调用',
-    index: (index) => `第${index + 1}页`,
+    index: (index: number) => `第${index + 1}页`,
   },
   'en-US': {
     closed: 'closed',
@@ -60,7 +60,7 @@ const i18n = {
     customConfig: 'Custom Config',
     startPosition: 'Set Start Position',
     componentCall: 'Component Call',
-    index: (index) => `Page: ${index}`,
+    index: (index: number) => `Page: ${index}`,
   },
 };
 
@@ -92,11 +92,11 @@ export default {
       state.show = true;
     };
 
-    const onChange = (index) => {
+    const onChange = (index: number) => {
       state.index = index;
     };
 
-    const showImagePreview = (options = {}) => {
+    const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
       const instance = ImagePreview({
         images,
         ...options,
@@ -104,7 +104,7 @@ export default {
 
       if (options.beforeClose) {
         setTimeout(() => {
-          instance.close();
+          instance?.close();
         }, 2000);
       }
     };

src/uploader/demo/index.vue

@@ -53,9 +53,10 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
+import { FileListItem } from '../utils';
 import Toast from '../../toast';
 
 const i18n = {
@@ -146,7 +147,7 @@ export default {
       ],
     });
 
-    const beforeRead = (file) => {
+    const beforeRead = (file: File) => {
       if (file.type !== 'image/jpeg') {
         Toast(t('invalidType'));
         return false;
@@ -154,11 +155,11 @@ export default {
       return true;
     };
 
-    const afterRead = (file, detail) => {
+    const afterRead = (file: FileListItem, detail: unknown) => {
       console.log(file, detail);
     };
 
-    const afterReadFailed = (item) => {
+    const afterReadFailed = (item: FileListItem) => {
       item.status = 'uploading';
       item.message = t('uploading');
 
@@ -168,7 +169,7 @@ export default {
       }, 1000);
     };
 
-    const onOversize = (file, detail) => {
+    const onOversize = (file: FileListItem, detail: unknown) => {
       console.log(file, detail);
       Toast(t('overSizeTip'));
     };

yarn.lock

@@ -1931,10 +1931,10 @@
     eslint-plugin-import "^2.22.1"
     eslint-plugin-vue "^7.1.0"
 
-"@vant/icons@^1.5.2":
-  version "1.5.2"
-  resolved "https://registry.npm.taobao.org/@vant/icons/download/@vant/icons-1.5.2.tgz#3f3ea353a0eacd38c113757bd31836489facb10b"
-  integrity sha1-Pz6jU6DqzTjBE3V70xg2SJ+ssQs=
+"@vant/icons@^1.5.3":
+  version "1.5.3"
+  resolved "https://registry.npm.taobao.org/@vant/icons/download/@vant/icons-1.5.3.tgz?cache=0&sync_timestamp=1613997305954&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Ficons%2Fdownload%2F%40vant%2Ficons-1.5.3.tgz#b7779f67bf608d417a82452fbede406dfa46b439"
+  integrity sha1-t3efZ79gjUF6gkUvvt5AbfpGtDk=
 
 "@vant/lazyload@^1.0.2":
   version "1.0.2"