Feat(Select, DatePicker): add type to catch unsupported props

packages/vkui/src/components/DatePicker/DatePicker.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { leadingZero } from '@vkontakte/vkjs';
 import { range } from '../../helpers/range';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
-import { HTMLAttributesWithRootRef } from '../../types';
+import { HasOnlyExpectedProps, HTMLAttributesWithRootRef } from '../../types';
 import { CustomSelect } from '../CustomSelect/CustomSelect';
-import { Input } from '../Input/Input';
+import { Input, type InputProps } from '../Input/Input';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './DatePicker.module.css';
 
@@ -167,9 +167,10 @@ const DatePickerNative = ({
     },
     [onDateChange],
   );
+  const inputProps: HasOnlyExpectedProps<typeof restProps, InputProps> = restProps;
   return (
     <Input
-      {...restProps}
+      {...inputProps}
       type="date"
       onChange={onStringChange}
       min={convertToInputFormat(min)}

packages/vkui/src/components/Select/Select.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { HasOnlyExpectedProps } from '../../types';
 import {
   CustomSelect,
   type CustomSelectOptionInterface,
   type SelectProps,
 } from '../CustomSelect/CustomSelect';
-import { NativeSelect } from '../NativeSelect/NativeSelect';
-
+import { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';
 export type SelectType = 'default' | 'plain' | 'accent';
 
 /**
@@ -35,17 +35,20 @@ export const Select = <OptionT extends CustomSelectOptionInterface>({
     dropdownOffsetDistance,
     dropdownAutoWidth,
     forceDropdownPortal,
-    selectType,
     noMaxHeight,
     autoHideScrollbar,
     autoHideScrollbarDelay,
     labelTextTestId,
     nativeSelectTestId,
-    ...nativeProps // TODO: https://github.com/Microsoft/TypeScript/issues/12936
+    after,
+    mode,
+    ...restProps
   } = props;
 
   const hasPointer = useAdaptivityHasPointer();
 
+  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;
+
   return (
     <React.Fragment>
       {(hasPointer === undefined || hasPointer) && <CustomSelect {...props} />}

packages/vkui/src/types.ts

@@ -89,3 +89,40 @@ export type GetPropsWithFunctionKeys<T> = {
 }[keyof T];
 
 export type PickOnlyFunctionProps<T> = Pick<T, GetPropsWithFunctionKeys<T>>;
+
+/**
+ * Даёт возможность поймать ошибку, если в компонент передаются лишние свойства.
+ *
+ * @example
+ * // пример использования
+ * const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;
+ *
+ * @example
+ * // расширенный пример
+ * type SelectProps {
+ *   mode: string,
+ *   multiline: boolean;
+ *   selectType?: SelectType;
+ * }
+ *
+ * type NativeSelectProps {
+ *   selectType?: SelectType;
+ * }
+ *
+ * const selectProps: SelectProps = {
+ *   mode: "card",
+ *   multiline: true,
+ *   selectType: "default",
+ * }
+ *
+ * // будет ошибка, так как multiline в NativeSelectProps нет
+ * const {mode, ...restProps} = selectProps;
+ * const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;
+ *
+ * // а вот так ошибки не будет, так как restProps больше не содержит multiline
+ * const {mode, multiline, ...restProps} = selectProps;
+ * const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;
+ */
+export type HasOnlyExpectedProps<Props, ExpectedProps> = {
+  [K in keyof Props]: K extends keyof ExpectedProps ? ExpectedProps[K] : never;
+};