typescript interface 覆盖

我们想对Antd的TimePicker组件进行封装，理由在于他必须接受一个moment对象，而我们的后端接口给我们的是字符串对象。

x.d.ts文件编写说明

于是，我们想要

一个接受字符串，onchange时候传回来format后的字符串这样一个组件。

因为我们这个组件的大多数属性和原来TimePicker的props是一样的，所以我们直接继承它

import type { TimePickerProps } from 'antd';
interface TimePickerPropsPlus extends TimePickerProps {
  value?: string;
  onChange?: (value: string) => void;
  format: string;
}

但是这样会遇到一个警告提示：

 参数“value”和“value” 的类型不兼容。

•  不能将类型“Moment | null”分配给类型“string”。
•  不能将类型“null”分配给类型“string”。

以及

 属性“onChange”的类型不兼容。

•  不能将类型“((value: string) => void) | undefined”
• 分配给类型“((value: Moment | null, dateString: string) => void) | undefined”。

我们无法覆盖掉原来value的类型
谷歌了下，找到了一下

有2种方案

一个是覆盖指定的单个类型:

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>

使用方式:

interface A {
  a: number;
  b: number;
}

interface B extends Omit<A, 'a'> {
  a: boolean;
}

另外一个是批量覆盖:
 

type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

使用方式:

interface A {
    name: string;
    color?: string;
}
type B = Merge<A, {
    name: string | number;
    favorite?: boolean;
}>;

最终

我们的代码改成如下:

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
type  TimePickerPropsPlus= Merge<
  TimePickerProps,
  {
    value?: string;
    onChange?: (value: string) => void;
    format: string;
  }
>;

参考链接：
https://qa.1r1g.com/sf/ask/2889964801/
Omit：

TypeScript项目实践之 Omit 特性 - 掘金
Extract：

[Day09] TS：什麼！型別也有分配律？理解 Extract 和 Exclude 的實作 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天