是否可以在 TypeScript 中创建严格的“A 或 B”类型？ [复制]

Question

我在输入 React 组件时遇到了以前从未遇到过的问题。我已经简化了下面的问题。

interface Circle {
  kind?: "circle";
  radius: number;
}
 
interface Square {
  kind: "square";
  sideLength: number;
}
 
type Shape = Circle | Square;

const shape: Shape = {
  sideLength: 7,
  radius: 7,
};

Link to TypeScript Playground containing the above

在上面的示例中，我希望 shape 变量声明会在 TypeScript 中引发错误，因为 Circle 和 Square 都没有 both sideLength 和 radius。定义的对象既不是圆形也不是方形，所以在我看来它不应该是一个有效的形状。

是否可以定义类型以使以下项目有效或错误（如标签所示）。

// Valid
const shape: Shape = {
  kind: 'circle',
  radius: 7,
};

// Valid
const shape: Shape = {
  radius: 7,
};

// Valid
const shape: Shape = {
  kind: 'square',
  sideLength: 7,
};

// Error
const shape: Shape = {
  sideLength: 7,
  radius: 7,
};

// Error
const shape: Shape = {
  sideLength: 7,
};

// Error
const shape: Shape = {
  kind: 'square',
  radius: 7,
};

// Error
const shape: Shape = {
  kind: 'circle',
  sideLength: 7,
};

编辑：

为了进一步说明，在我的用例中，kind 在 Circle 上是可选的。对于那些熟悉 React 的人来说，我要解决的实际问题是样式组件暴露的 as 属性。我想要一个组件接受一个可选的as prop，它允许用户将组件（默认为button）更改为链接（a）。如果用户指定 as="a"，那么我希望 TypeScript 能够在用户尝试在现在的链接上使用特定于按钮的道具（例如，disabled）时进行兼容。 as 属性是可选的，因为我不希望所有实现者都必须通过它。在我上面的简化示例中，as 类似于kind，因此为什么kind 是可选的。

Answer 1

请注意，您已将kind 属性定义为可选属性，因此如果您创建的形状对象只有radius 属性仍然有效circle：

看看这个对象

const shape: Shape = {
  sideLength: 7,
  radius: 7,
};

这是具有一个额外属性的有效圆圈。

因此，在您所说的某些情况下要引发错误，您应该将 kind 属性设置为必需属性：

interface Circle {
  kind: "circle";
  radius: number;
}
 
interface Square {
  kind: "square";
  sideLength: number;
}
 
type Shape = Circle | Square;

const shape2: Shape = {
  radius: 7,//Error
};

PlaygroundLink