How to overwrite React component props type from third-party library

42 Views Asked by At

I have my project build using:

yarn workspaces typescript 5.3.2 react 18.2 vite 4.4.9

i am using import { HvDatePicker } from '@hitachivantara/uikit-react-core', and i would like to overwrite its props.

i have created uikit-react-core.d.ts:

import React, { ForwardRefExoticComponent, RefAttributes } from 'react'
import { HvDatePickerProps as Original } from '@hitachivantara/uikit-react-core'

declare module '@hitachivantara/uikit-react-core' {
 export interface HvDatePickerProps extends Original {
    labels?: {
      applyLabel?: string | React.ReactElement
      cancelLabel?: string | React.ReactElement
      clearLabel?: string | React.ReactElement
      invalidDateLabel?: string | React.ReactElement
    }
  }

  export const HvDatePicker: ForwardRefExoticComponent<
    HvDatePickerProps & RefAttributes<HTMLDivElement>
  >
}

original type definitions looks like so (node_modules/@hitachivantara/uikit-react-core/dist/types/index.d.ts):

export declare interface HvDatePickerProps extends Omit<HvFormElementProps, "onChange">, Pick<HvBaseDropdownProps, "disablePortal" | "expanded" | "defaultExpanded" | "onToggle"> {
    "aria-errormessage"?: string;
    onChange?: (date?: Date, endDate?: Date) => void;
    onCancel?: () => void;
    onClear?: () => void;
    labels?: {
        applyLabel?: string;
        cancelLabel?: string;
        clearLabel?: string;
        invalidDateLabel?: string;
    };
    value?: Date;
    startValue?: Date;
    endValue?: Date;
    rangeMode?: boolean;
    horizontalPlacement?: "left" | "right";
    locale?: string;
    showActions?: boolean;
    showClear?: boolean;
    escapeWithReference?: boolean;
    startAdornment?: React.ReactNode;
    dropdownProps?: Partial<HvBaseDropdownProps>;
    calendarProps?: Partial<HvCalendarProps>;
    classes?: HvDatePickerClasses;
}
export declare const HvDatePicker: ForwardRefExoticComponent<HvDatePickerProps & RefAttributes<HTMLDivElement>>;

i also modify vite-env.d.ts (add reference):

/// <reference types="vite/client" />
/// <reference types="./uikit-react-core.d.ts" />

my IDE (webstorm) shows me that: enter image description here

enter image description here

but it failed on build:

enter image description here

I have also tried to modify package tsconfig file:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "allowImportingTsExtensions": true,
    "skipLibCheck": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "typeRoots": ["./src/uikit-react-core.d.ts"],
    "types": ["@testing-library/jest-dom"],
    "esModuleInterop": true,

    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "src/uikit-react-core.d.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

also tried to add "paths" to map @hitachivantara/uikit-react-core to the .d.ts file, but it start to fail on other places where i have used other elements from that library, probably i need somehow "re-export" rests of stuff

what i am doing wrong ?

0

There are 0 best solutions below