如何在打字稿上制作多种类型的属性接口

Posted

技术标签:

【中文标题】如何在打字稿上制作多种类型的属性接口【英文标题】:How can i make multiple type property interface on typescript 【发布时间】:2019-04-03 12:23:14 【问题描述】:

我想在 typescript 中使用两个不同的接口创建接口属性。这可能吗?

interface IPayload1 
  id: string;
  name: string;

interface IPayload2 
  id: string;
  price: number;


interface Demo 
  // Can this be possible?
  payload: IPayload1 | IPayload2;

【问题讨论】:

payload?: IPayload1 | IPayload2 将使其成为可选 对不起,可选词,我不想要可选参数,payload是必需的。 您的代码看起来不错。什么不工作? 【参考方案1】:

您的代码将起作用,并且可以说属性可以是使用| 的类型列表之一。这称为Union Type。

请注意,在使用联合类型时,您可能需要使用类型保护或强制转换,以防您想要访问特定于少于所有列出类型的属性。例如:

const demo: Demo = 
  payload: 
    id: '1',
    name: 'boo',
  ,
;

const demo2: Demo = 
  payload: 
    id: '1',
    price: 25,
  ,
;

// property is shared between types
demo.payload.id;

// If you do not cast, these will yield errors because the properties are not shared
(demo.payload as IPayload1).name;
(demo.payload as IPayload2).price;

【讨论】:

谢谢。这是我正在寻找的答案。 不错的答案。谢谢你:)

以上是关于如何在打字稿上制作多种类型的属性接口的主要内容,如果未能解决你的问题,请参考以下文章

如何在打字稿上重新连接(重新订阅)到 websocket

是否可以仅为打字稿上的特定类型扩展 Array.prototype?

如何在打字稿接口/类型中将枚举值类型转换为数组?

如何在文字对象上正确使用接口

如何使用打字稿和情感修复 Box 组件上的“属性“颜色”类型不兼容”

具有命名属性和不同类型的任意命名索引属性的打字稿接口[重复]