我们想对Antd的TimePicker组件进行封装，理由在于他必须接受一个moment对象，而我们的后端接口给我们的是字符串对象。
于是，我们想要
一个接受字符串，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 人的一天
