有条件地扩展接口答案

【问题标题】：Angular extending Interface conditionally有条件地扩展接口
【发布时间】：2020-04-28 12:11:25
【问题描述】：

我有下面的接口结构

export interface Details {
    name: string;
    age: number;
    sex: string;
  }

  export interface PersonalDetails extends Details {
salary: number;
  }

当我在我的组件中调用它时

  public params: Details = <Details>{};

如果我在 ngOnInit() 中检查了某个用户，我希望参数是 PersonalDetails 而不是 Details 的实例。

如何更改参数的启动以指向 PersonalDetails？

【问题讨论】：

标签： angular typescript interface

【解决方案1】：

接口主要是绑定在对象中的特定类型的框架，您不需要像类一样初始化它们，因为它们没有构造函数。但是，您可以通过声明与接口相同的结构来创建对象，例如：

personalDetails: PersonalDetails = {name: 'Bob', age: 32, sex: 'Male', salary: 450000}

【讨论】：

【解决方案2】：

这是我的方法，它利用了函数重载：

function getActualParams(params: PersonalDetails): PersonalDetails
function getActualParams(params: Details): Details
function getActualParams(params: PersonalDetails | Details): PersonalDetails | Details {
  if ('salary' in params) {
    return params as PersonalDetails;
  }

  return params;
}

const o1: Details = { name: 'a', age: 18, sex: 'M' };
const r1 = getActualParams(o1); // Details

const o2: PersonalDetails = { name: 'a', age: 18, sex: 'M', salary: 12 }
const r2 = getActualParams(o2);

Playground

【讨论】：