我可以在Typescript中扩展接口的一部分吗？

14 浏览
0 Comments

我可以在Typescript中扩展接口的一部分吗？

假设我有一个接口：

// 这是我从一个外部库中获取的，所以我无法控制它
interface Balloon {
  diameter: number;
  color: "red" | "blue" | "green";
}

我想创建一个类似这样的自定义接口：

interface Shirt {
  size: "m" | "l" | "xl";
  color: "red" | "blue" | "green";
}

我的问题是，是否可能将Balloon的color部分“提取”并注入到Shirt中，以便我得到类似这样的结果：

interface Shirt {
  size: "m" | "l" | "xl";
  color: Balloon.color; // 我知道这是错误的，但这是为了说明我想要实现的目标
}

0

2 答案

0 Comments

在Typescript中，有几种方法可以扩展接口的一部分。首先，我们可以使用基本接口的方式来扩展接口。例如，我们可以定义一个名为WithColor的基本接口，其中包含一个color属性，其值只能是"red"、"blue"或"green"。然后，我们可以通过在接口定义中使用extends关键字来扩展WithColor接口，从而将color属性添加到Shirt接口中。

代码示例：

interface WithColor {
    color: "red" | "blue" | "green";
}
interface Shirt extends WithColor {
    size: "m" | "l" | "xl";
}

另一种方法是使用枚举类型来定义color属性。我们可以创建一个名为Color的枚举，其中包含"red"、"blue"和"green"三个枚举值。然后，我们可以在Shirt接口中将color属性的类型设置为Color枚举。

代码示例：

enum Color {
    RED = "red",
    BLUE = "blue",
    GREEN = "green",
}
interface Shirt {
    size: "m" | "l" | "xl";
    color: Color;
}

还有一种方法是结合使用基本接口和枚举类型。我们可以定义一个Shirt接口，其中包含size属性和color属性。然后，我们可以使用Shirt["color"]的方式来指定color属性的类型，这样就可以直接使用WithColor接口中定义的color属性类型。

代码示例：

interface Shirt {
    size: "m" | "l" | "xl";
    color: "red" | "blue" | "green";
}
interface Balloon {
    size: "m" | "l" | "xl";
    color: Shirt["color"];
}

需要注意的是，尽管我们可以使用其他接口的属性类型来扩展接口，但这可能会降低代码的可维护性。如果源接口发生更改，那么使用其属性类型的接口也需要相应地进行修改。因此，建议谨慎使用这种方法。

以上就是关于在Typescript中扩展接口的一部分的几种方法。无论使用哪种方法，都可以根据具体需求选择最合适的方式来扩展接口。

0
0 Comments

在这段代码中，定义了一个接口`Balloon`，它有两个属性：`diameter`和`color`。然后定义了一个类型`Shirt`，它继承了`Balloon`接口的`color`属性，并添加了一个新属性`size`，`size`属性的取值只能是"m"、"l"或"xl"。接着定义了一个类型`Check`，它通过索引类型查询`Shirt`类型的`color`属性，得到的类型是"red"、"blue"或"green"。

问题的出现是因为我们希望能够只继承`Balloon`接口的部分属性，而不是全部属性。目前的解决方法是使用`Pick`工具类型，通过`Pick`可以选择要继承的属性。在这个例子中，我们使用`Pick`来选择`Balloon`接口的`color`属性进行继承。

如果想要了解更多有关工具类型的信息，可以点击这里。

以下是完整的代码：

interface Balloon {
    diameter: number;
    color: "red" | "blue" | "green";
}
type Shirt = {
    size: "m" | "l" | "xl";
} & Pick;
type Check = Shirt['color']; // "red" | "blue" | "green"

可以在Playground中查看代码运行结果。

0