Missing properties in React Typescript component

Question

React component

import {Input} from '@xxx/forms';
<Input  label="account Name" name="account"/>

input.d.ts

import React, { Ref } from 'react';
import { InputProps as UITKInputProps } from '@xxx/input';
import { WithStyles, Density } from '@xxx/theme';
import { FormFieldProps as FormFieldPropsType } from '../FormField';
import { NecessityStyle } from '../types';
import styles from './styles';
export declare type InputProps = WithStyles<typeof styles> & UITKInputProps & {
    name: string;
    label?: string;
    id?: string;
    disabled?: boolean;
    FormFieldProps?: Omit<FormFieldPropsType, 'children' | 'name' | 'label'>;
    required?: boolean;
    necessityStyle?: NecessityStyle;
    helperText?: string;
    ref?: Ref<any>;
    fullWidth?: boolean;
    density?: Density;
};
declare const StyledInput: React.ComponentType<Pick<React.PropsWithChildren<InputProps>, "required" | "disabled" | "error" | "hidden" | "dir" | "label" | "slot" | "style" | "title" | "color" | "ref" | "children" | "onBlur" | "onChange" | "onSubmit" | "name" | "onFocus" | "defaultValue" | "id" | "textAlign" | "translate" | "margin" | "className" | "innerRef" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "type" | "fullWidth" | "autoFocus" | "value" | "inputProps" | "inputRef" | "readOnly" | "multiline" | "autoComplete" | "endAdornment" | "inputComponent" | "renderSuffix" | "rows" | "rowsMax" | "rowsMin" | "startAdornment" | "disableUnderline" | "density" | "necessityStyle" | "helperText" | "cursorPositionOnFocus" | "emptyReadOnlyMarker" | "highlightOnFocus" | "FormFieldProps"> & import("@material-ui/styles").StyledComponentProps<"disabled" | "input" | "root" | "readOnly" | "focused" | "multiline" | "inputMultiline" | "endAdornment" | "startAdornment" | "lowDensity" | "touchDensity" | "mediumDensity" | "highDensity" | "field">>;
export { StyledInput as Input };

The only required field for <Input /> is name. However, the compiler is complaining:

Type '{ name: string; }' is missing the following properties from type 'Pick<PropsWithChildren, "ref" | "label" | "slot" | "style" | "title" | "children" | "onBlur" | "onChange" | "onSubmit" | "autoComplete" | ... 276 mo re ... | "FormFieldProps">': slot, style, title, onBlur, and 267 more.

How can I declare Input component inside my component?

I'm not understand what's going on in your component....is import {Input} from '@xxx/forms' from an external library, or your own package? Where is this .d.ts file coming from? What is actually happening in your component? All you posted was the import and the line <Input label="account Name" name="account"/>...? — Seth Lutske

aleksxor aleksxor · Accepted Answer · 2021-06-29T10:59:56

While you didn't provide full type definitions for WithStyles and UITKInputProps I'd guess they are having a lot of required props inside. So your InputProps type gets expanded into a huge list of required props from those two types plus explicitly defined props with a required name field. Thus the error.

If you want your InputProps type to have the only required field name you may define it as:

export declare type InputProps 
  = Partial<WithStyles<typeof styles>>
  & Partial<UITKInputProps> 
  & {
        name: string;
        label?: string;
        id?: string;
        disabled?: boolean;
        FormFieldProps?: Omit<FormFieldPropsType, 'children' | 'name' | 'label'>;
        required?: boolean;
        necessityStyle?: NecessityStyle;
        helperText?: string;
        ref?: Ref<any>;
        fullWidth?: boolean;
        density?: Density;
    };

Missing properties in React Typescript component

1 Answers