TypeScript：如何在泛型接口中添加条件属性？

根据类型参数向泛型接口添加条件属性

摘要

TypeScript 中的接口通过定义对象的形状来强制执行类型安全，但有时需要根据类型参数向泛型接口添加条件属性。本文将探索如何使用条件类型和映射类型来实现这一目标，从而提高代码的可定制性和灵活性。

问题陈述

我们有一个泛型接口 G<T>，它包含两个属性 IG 和 Parent。当 G<T> 实例化为类型 A 时，我们希望添加一个额外的属性 prop1。

解决方案

方法 1：使用条件类型

条件类型允许我们根据类型参数不同创建新的类型。我们可以定义一个条件类型：

type ConditionalG<T> = T extends A ? G<T> & { prop1: string } : G<T>;

如果 T 扩展 A，则返回带有 prop1 属性的 G<T>；否则返回原始 G<T>。

方法 2：使用映射类型

映射类型允许我们遍历一个类型并创建新的类型，其中每个属性都经过转换。我们可以定义一个映射类型：

type ConditionalG<T> = {
    [P in keyof G<T>]: P extends 'Parent' ? G<T>[P] : P extends 'IG' ? G<T>[P] : T extends A ? string : never;
};

它遍历 G<T> 的所有属性，保持 Parent 和 IG 属性的原始类型，如果 T 扩展 A 且属性是 prop1，则将其类型设置为 string。

使用示例

const gA: ConditionalG<A> = {
    IG: 'IG Value',
    Parent: { IA: 'IA Value' },
    prop1: 'prop1 Value',
};

const gB: ConditionalG<B> = {
    IG: 'IG Value',
    Parent: { IB: 'IB Value' },
};

在 gA 中，由于 T 扩展 A，因此添加了 prop1 属性；在 gB 中，由于 T 不扩展 A，因此没有添加 prop1 属性。

结论

通过使用条件类型或映射类型，我们可以根据类型参数向泛型接口添加条件属性。这使得我们能够创建更加灵活和可定制的接口，增强代码的可读性、可维护性和可重用性。

常见问题解答

1. 为什么使用条件属性？
   条件属性允许我们根据输入参数添加特定属性，这在创建可定制和灵活的接口时非常有用。

2. 条件类型和映射类型之间有什么区别？
   条件类型创建新的类型，而映射类型转换现有类型的属性。

3. 何时应该使用条件属性？
   当我们需要根据输入参数修改接口的结构时，应使用条件属性。

4. 有哪些其他方法可以实现条件属性？
   还有一些其他方法，例如使用内置的 Partial 和 Required 类型。

5. 条件属性有哪些优点？
   条件属性提高了代码的灵活性、可维护性和可重用性。