types: using unknown instead of any (#8152)

* types: using unknown instead of any

* chore: UnknownProp

src/action-bar-icon/index.tsx

@@ -1,4 +1,4 @@
-import { createNamespace } from '../utils';
+import { createNamespace, UnknownProp } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar';
 
 // Composition
@@ -19,7 +19,7 @@ export default createComponent({
     icon: String,
     color: String,
     badge: [Number, String],
-    iconClass: null,
+    iconClass: UnknownProp,
   },
 
   setup(props, { slots }) {

src/action-sheet/index.tsx

@@ -17,7 +17,7 @@ export type ActionSheetAction = {
   loading?: boolean;
   disabled?: boolean;
   callback?: (action: ActionSheetAction) => void;
-  className?: any;
+  className?: unknown;
 };
 
 export default createComponent({

src/cell/index.tsx

@@ -1,7 +1,7 @@
-import { PropType } from 'vue';
+import { PropType, CSSProperties } from 'vue';
 
 // Utils
-import { createNamespace, isDef } from '../utils';
+import { createNamespace, isDef, UnknownProp } from '../utils';
 
 // Composition
 import { useRoute, routeProps } from '../composables/use-route';
@@ -23,10 +23,10 @@ export const cellProps = {
   isLink: Boolean,
   required: Boolean,
   iconPrefix: String,
-  titleStyle: null as any,
-  titleClass: null as any,
-  valueClass: null as any,
-  labelClass: null as any,
+  valueClass: UnknownProp,
+  labelClass: UnknownProp,
+  titleClass: UnknownProp,
+  titleStyle: (null as unknown) as PropType<string | CSSProperties>,
   arrowDirection: String as PropType<CellArrowDirection>,
   border: {
     type: Boolean,

src/checkbox-group/index.tsx

@@ -19,7 +19,7 @@ export type CheckboxGroupToggleAllOptions =
 export type CheckboxGroupProvide = CheckerParent & {
   props: {
     max: number | string;
-    modelValue: any[];
+    modelValue: unknown[];
   };
   updateModelValue: (value: unknown[]) => void;
 };
@@ -32,7 +32,7 @@ export default createComponent({
     iconSize: [Number, String],
     checkedColor: String,
     modelValue: {
-      type: Array as PropType<any[]>,
+      type: Array as PropType<unknown[]>,
       default: () => [],
     },
   },

src/checkbox/Checker.tsx

@@ -1,5 +1,5 @@
 import { ref, computed, defineComponent, PropType } from 'vue';
-import { addUnit } from '../utils';
+import { addUnit, UnknownProp } from '../utils';
 import Icon from '../icon';
 
 export type CheckerShape = 'square' | 'round';
@@ -15,10 +15,10 @@ export type CheckerParent = {
 };
 
 export const checkerProps = {
-  name: null as any,
+  name: UnknownProp,
   disabled: Boolean,
   iconSize: [Number, String],
-  modelValue: null as any,
+  modelValue: UnknownProp,
   checkedColor: String,
   labelPosition: String as PropType<CheckerLabelPosition>,
   labelDisabled: Boolean,

src/checkbox/index.tsx

@@ -54,7 +54,7 @@ export default createComponent({
       if (parent && props.bindGroup) {
         return parent.props.modelValue.indexOf(props.name) !== -1;
       }
-      return props.modelValue;
+      return !!props.modelValue;
     });
 
     const toggle = (newValue = !checked.value) => {

src/checkbox/test/__snapshots__/index.spec.ts.snap

@@ -4,6 +4,7 @@ exports[`should adjust label position when using label-position prop 1`] = `
 <div role="checkbox"
      class="van-checkbox"
      tabindex="0"
+     aria-checked="false"
 >
   <span class="van-checkbox__label van-checkbox__label--left">
     Label

src/contact-list/index.tsx

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { createNamespace, UnknownProp } from '../utils';
 import { RED } from '../utils/constant';
 
 // Components
@@ -25,7 +25,7 @@ export default createComponent({
   props: {
     list: Array as PropType<ContactListItem[]>,
     addText: String,
-    modelValue: null as any,
+    modelValue: UnknownProp,
     defaultTagText: String,
   },
 

src/dialog/Dialog.tsx

@@ -2,7 +2,7 @@ import { PropType, reactive } from 'vue';
 
 // Utils
 import { callInterceptor, Interceptor } from '../utils/interceptor';
-import { createNamespace, addUnit, pick } from '../utils';
+import { createNamespace, addUnit, pick, UnknownProp } from '../utils';
 import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
 
 // Components
@@ -32,7 +32,7 @@ export default createComponent({
     message: String,
     callback: Function as PropType<(action?: DialogAction) => void>,
     allowHtml: Boolean,
-    className: null,
+    className: UnknownProp,
     beforeClose: Function as PropType<Interceptor>,
     messageAlign: String as PropType<DialogMessageAlign>,
     showCancelButton: Boolean,

src/dialog/index.tsx

@@ -1,4 +1,9 @@
-import { App, TeleportProps } from 'vue';
+import {
+  App,
+  CSSProperties,
+  TeleportProps,
+  ComponentPublicInstance,
+} from 'vue';
 import { inBrowser } from '../utils';
 import { Interceptor } from '../utils/interceptor';
 import { mountComponent, usePopupState } from '../utils/mount-component';
@@ -15,14 +20,14 @@ export type DialogOptions = {
   message?: string;
   overlay?: boolean;
   teleport?: TeleportProps['to'];
-  className?: any;
+  className?: unknown;
   allowHtml?: boolean;
   lockScroll?: boolean;
   transition?: string;
   beforeClose?: Interceptor;
   messageAlign?: DialogMessageAlign;
   overlayClass?: string;
-  overlayStyle?: Record<string, any>;
+  overlayStyle?: CSSProperties;
   closeOnPopstate?: boolean;
   cancelButtonText?: string;
   showCancelButton?: boolean;
@@ -33,8 +38,8 @@ export type DialogOptions = {
   closeOnClickOverlay?: boolean;
 };
 
-// TODO remove any
-let instance: any;
+// eslint-disable-next-line
+let instance: ComponentPublicInstance<{}, any>;
 
 function initInstance() {
   const Wrapper = {
@@ -82,7 +87,7 @@ Dialog.defaultOptions = {
   transition: 'van-dialog-bounce',
   beforeClose: null,
   overlayClass: '',
-  overlayStyle: null,
+  overlayStyle: undefined,
   messageAlign: '',
   cancelButtonText: '',
   cancelButtonColor: null,

src/dropdown-item/index.js

@@ -1,7 +1,7 @@
 import { reactive, Teleport } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { createNamespace, UnknownProp } from '../utils';
 import { DROPDOWN_KEY } from '../dropdown-menu';
 
 // Composition
@@ -20,8 +20,8 @@ export default createComponent({
     title: String,
     disabled: Boolean,
     teleport: [String, Object],
-    modelValue: null,
-    titleClass: null,
+    modelValue: UnknownProp,
+    titleClass: UnknownProp,
     options: {
       type: Array,
       default: () => [],

src/field/index.tsx

@@ -18,6 +18,7 @@ import {
   isObject,
   isPromise,
   isFunction,
+  UnknownProp,
   resetScroll,
   formatNumber,
   preventDefault,
@@ -60,7 +61,7 @@ export default createComponent({
     formatter: Function as PropType<(value: string) => string>,
     maxlength: [Number, String],
     labelWidth: [Number, String],
-    labelClass: null as any,
+    labelClass: UnknownProp,
     labelAlign: String as PropType<FieldTextAlign>,
     inputAlign: String as PropType<FieldTextAlign>,
     placeholder: String,

src/image-preview/ImagePreview.js

@@ -1,6 +1,7 @@
 import { nextTick, onMounted, reactive, ref, watch } from 'vue';
 
 // Utils
+import { UnknownProp } from '../utils';
 import { bem, createComponent } from './shared';
 import { callInterceptor } from '../utils/interceptor';
 
@@ -17,8 +18,8 @@ import ImagePreviewItem from './ImagePreviewItem';
 export default createComponent({
   props: {
     show: Boolean,
-    className: null,
     closeable: Boolean,
+    className: UnknownProp,
     beforeClose: Function,
     showIndicators: Boolean,
     images: {

src/overlay/index.tsx

@@ -1,5 +1,11 @@
 import { PropType, Transition, CSSProperties } from 'vue';
-import { noop, isDef, preventDefault, createNamespace } from '../utils';
+import {
+  noop,
+  isDef,
+  UnknownProp,
+  preventDefault,
+  createNamespace,
+} from '../utils';
 import { useLazyRender } from '../composables/use-lazy-render';
 
 const [createComponent, bem] = createNamespace('overlay');
@@ -9,7 +15,7 @@ export default createComponent({
     show: Boolean,
     zIndex: [Number, String],
     duration: [Number, String],
-    className: null,
+    className: UnknownProp,
     customStyle: Object as PropType<CSSProperties>,
     lockScroll: {
       type: Boolean,

src/picker/PickerColumn.tsx

@@ -3,7 +3,13 @@ import { ref, watch, reactive, PropType } from 'vue';
 
 // Utils
 import { deepClone } from '../utils/deep-clone';
-import { range, isObject, createNamespace, preventDefault } from '../utils';
+import {
+  range,
+  isObject,
+  UnknownProp,
+  preventDefault,
+  createNamespace,
+} from '../utils';
 
 // Composition
 import { useParent } from '@vant/use';
@@ -42,7 +48,7 @@ export type PickerOption = string | PickerObjectOption;
 export type PickerObjectColumn = {
   values?: PickerOption[];
   children?: PickerColumn;
-  className?: any;
+  className?: unknown;
   defaultIndex?: number;
   // for custom filed names
   [key: string]: any;
@@ -58,7 +64,7 @@ export default createComponent({
   props: {
     readonly: Boolean,
     allowHtml: Boolean,
-    className: String,
+    className: UnknownProp,
     textKey: {
       type: String,
       required: true,

src/popup/index.tsx

@@ -13,7 +13,7 @@ import {
   onDeactivated,
   onBeforeUnmount,
 } from 'vue';
-import { createNamespace, isDef } from '../utils';
+import { createNamespace, isDef, UnknownProp } from '../utils';
 
 // Composition
 import { useEventListener } from '@vant/use';
@@ -45,9 +45,9 @@ export const popupSharedProps = {
   // teleport
   teleport: [String, Object] as PropType<TeleportProps['to']>,
   // overlay custom style
-  overlayStyle: Object,
+  overlayStyle: Object as PropType<CSSProperties>,
   // overlay custom class name
-  overlayClass: null,
+  overlayClass: UnknownProp,
   // Initial rendering animation
   transitionAppear: Boolean,
   // whether to show overlay

src/radio-group/index.tsx

@@ -1,5 +1,5 @@
 import { watch } from 'vue';
-import { createNamespace } from '../utils';
+import { UnknownProp, createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 import { useLinkField } from '../composables/use-link-field';
 import { CheckerParent } from '../checkbox/Checker';
@@ -10,7 +10,7 @@ export const RADIO_KEY = 'vanRadio';
 
 export type RadioGroupProvide = CheckerParent & {
   props: {
-    modelValue: any;
+    modelValue: unknown;
   };
   updateModelValue: (value: unknown) => void;
 };
@@ -20,7 +20,7 @@ export default createComponent({
     disabled: Boolean,
     iconSize: [Number, String],
     direction: String,
-    modelValue: null as any,
+    modelValue: UnknownProp,
     checkedColor: String,
   },
 

src/switch/index.tsx

@@ -1,4 +1,4 @@
-import { createNamespace, addUnit } from '../utils';
+import { createNamespace, addUnit, UnknownProp } from '../utils';
 import { useLinkField } from '../composables/use-link-field';
 import Loading from '../loading';
 
@@ -9,15 +9,15 @@ export default createComponent({
     size: [Number, String],
     loading: Boolean,
     disabled: Boolean,
-    modelValue: null as any,
+    modelValue: UnknownProp,
     activeColor: String,
     inactiveColor: String,
     activeValue: {
-      type: null as any,
+      type: UnknownProp,
       default: true,
     },
     inactiveValue: {
-      type: null as any,
+      type: UnknownProp,
       default: false,
     },
   },

src/tab/index.js

@@ -1,5 +1,5 @@
 import { ref, watch, nextTick } from 'vue';
-import { createNamespace } from '../utils';
+import { createNamespace, UnknownProp } from '../utils';
 import { TABS_KEY } from '../tabs';
 
 // Composition
@@ -18,9 +18,9 @@ export default createComponent({
     name: [Number, String],
     badge: [Number, String],
     title: String,
-    titleStyle: null,
-    titleClass: null,
     disabled: Boolean,
+    titleClass: UnknownProp,
+    titleStyle: null,
   },
 
   setup(props, { slots }) {

src/toast/Toast.tsx

@@ -1,7 +1,7 @@
-import { watch, onMounted, onUnmounted, PropType } from 'vue';
+import { watch, PropType, onMounted, onUnmounted, CSSProperties } from 'vue';
 
 // Utils
-import { createNamespace, isDef } from '../utils';
+import { createNamespace, isDef, UnknownProp } from '../utils';
 import { lockClick } from './lock-click';
 
 // Components
@@ -19,13 +19,13 @@ export default createComponent({
     icon: String,
     show: Boolean,
     message: [Number, String],
-    className: null,
+    className: UnknownProp,
     iconPrefix: String,
     lockScroll: Boolean,
     loadingType: String as PropType<LoadingType>,
     forbidClick: Boolean,
-    overlayClass: null,
-    overlayStyle: Object,
+    overlayClass: UnknownProp,
+    overlayStyle: Object as PropType<CSSProperties>,
     closeOnClick: Boolean,
     closeOnClickOverlay: Boolean,
     type: {

src/toast/index.tsx

@@ -15,13 +15,13 @@ export type ToastOptions = {
   duration?: number;
   teleport?: TeleportProps['to'];
   position?: ToastPosition;
-  className?: any;
+  className?: unknown;
   transition?: string;
   iconPrefix?: string;
   loadingType?: LoadingType;
   forbidClick?: boolean;
   closeOnClick?: boolean;
-  overlayClass?: any;
+  overlayClass?: unknown;
   overlayStyle?: Record<string, any>;
   closeOnClickOverlay?: boolean;
 };

src/tree-select/index.tsx

@@ -22,7 +22,7 @@ export type TreeSelectItem = {
   badge?: number | string;
   children?: TreeSelectChild[];
   disabled?: boolean;
-  className?: any;
+  className?: unknown;
 };
 
 export default createComponent({

src/utils/base.ts

@@ -1,8 +1,13 @@
+import { PropType } from 'vue';
+
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 export function noop() {}
 
 export const inBrowser = typeof window !== 'undefined';
 
+// unknown type for Vue prop
+export const UnknownProp = (null as unknown) as PropType<unknown>;
+
 export function isDef<T>(val: T): val is NonNullable<T> {
   return val !== undefined && val !== null;
 }