typescript修改npm包的类型定义

我们在使用TS进行开发的时候有时候会遇到第三方库的类型限制导致TS校验不同的情况，这样就需要我们自己重新去定义这个第三库的类型声明文件，今天遇到这个坑，记录一下解决办法。

正常的一个TS文件如下，就是页面展示一个日期选择器，用的组件是三方库 chakra-dayzed-datepicker

import { RangeDatepicker } from 'chakra-dayzed-datepicker'
function Demo(){
  const [timeDate, setTimeDate] = useState<Date[]>([new Date('2023/08/10'),new Date('2023/09/10')])// 填充默认时间
  return  <RangeDatepicker selectedDates={timeDate}/>
}

需求背景

进入页面的初始化时候，默认日期为空

一分钟搞定

import { RangeDatepicker } from 'chakra-dayzed-datepicker'
   function Demo(){
       const [timeDate, setTimeDate] = useState<Date[]|undefined[]>([,])// 填充默认时间为空
       return  <RangeDatepicker selectedDates={timeDate}/>
   }

但是，RangeDatepicker 这个组件就报错了


不能将类型“Date[] | undefined[]”分配给类型“Date[]”。
不能将类型“undefined[]”分配给类型“Date[]”。
不能将类型“undefined”分配给类型“Date”

现在问题变成怎么修改 *** chakra-dayzed-datepicker*** 的声明类型

import React from 'react';
import { Props as DayzedHookProps } from 'dayzed';
import { CalendarConfigs, DatepickerConfigs, DatepickerProps, PropsConfigs } from './utils/commonTypes';
interface RangeCalendarPanelProps {
    dayzedHookProps: DayzedHookProps;
    configs: CalendarConfigs;
    propsConfigs?: PropsConfigs;
    selected?: Date | Date[];
}
export declare const RangeCalendarPanel: React.FC<RangeCalendarPanelProps>;
export interface RangeDatepickerProps extends DatepickerProps {
    selectedDates: Date[]; 
    configs?: DatepickerConfigs;
    disabled?: boolean;
    defaultIsOpen?: boolean;
    closeOnSelect?: boolean;
    onDateChange: (date: Date[]) => void;
    id?: string;
    name?: string;
    usePortal?: boolean;
}
export declare const RangeDatepicker: React.FC<RangeDatepickerProps>;
export {};

直接修改NPM包肯定是不行的，这NPM部署安装一下就是新的所以我们需要
重新定义一下RangeDatepickerProps

具体步骤如下

1.在项目tsconfig.json同级目录新建一个types目录
2.创建文件RangeDatepicker.d.ts
3.修改tsconfig.json配置的compilerOptions属性指定chakra-dayzed-datepicker的申明文件

"compilerOptions": {
   "paths": {
     "chakra-dayzed-datepicker": ["./types/rangeDatepicker"]
   }
 },

rangeDatepicker.d.ts文件内容如下

//rangeDatepicker.d.ts
import { RangeDatepickerProps as LibRangeDatepickerProps } from 'chakra-dayzed-datepicker/src/'
// 导出RangeDatepickerProps
export * from 'chakra-dayzed-datepicker'// 默认接口导出
type RangeDatepickerPropsLess = Omit<LibRangeDatepickerProps, 'selectedDates'>// Omit 干掉selectedDates
interface RangeDatepickerProps extends RangeDatepickerPropsLess {
  selectedDates: Array<Date | undefined> // 复写 selectedDates
}
export declare const RangeDatepicker: React.FC<RangeDatepickerProps>

本文作者：番茄炒蛋
本文地址： https://www.noway.pub/2023/09/08/NPM_interface/
版权声明：转载请注明出处！