Angular 4,'{xx,xx}’类型中缺少属性’XX’

代替：

let PROJECTS: Project[] = [
     { projectId: 1,endDate: new Date("2017-1-13") }
];

你应该做：

let PROJECTS: Project[] = [
     new Project(1,"Sample",new Date("2016-12-12"),new Date("2017-1-13") ),new Project(2,"Sample 2",new Date("2017-1-13")
];

说明

项目是一个类. getDaysRemaining()是该类的成员.要创建类的实例,可以使用新的Project(…).

{projectId：1,…}是一个不是类Project实例的对象.因此,所有成员都在括号之间定义为属性.

您可以通过{{{{{{{{{{{{{
project1：1,…} instanceof Project – 结果为false.

ES6？ TypeScript与JavaScript语言的最新进展有很多共同的语法.您可以在ES6中定义类,就像在TypeScript中一样.当然,除了类型和修饰符之外,JavaScript不是静态类型语言,而是动态类型语言.

class Project {

    constructor(projectId,description,startDate,endDate) {
        this.projectId = projectId;
        this.description = description;
        this.startDate = startDate;
        this.endDate = endDate;
    }

     getDaysRemaining() {
          var result = this.endDate.valueOf() - Date.now().valueOf();
          result = Math.ceil(result / (1000 * 3600 * 24));
          return result < 0 ? 0 : result;
     }
}

在ES6中,您可以执行新的Project(),为所有参数提供undefined,但是在TypeScript中不能,因为缺少构造函数参数,并且在编译时检查了这个事实,如果有一个好的IDE检查TypeScript语法,那么在设计时.

在TypeScript中允许此操作的一个选项是定义可选参数,如下所示(请参阅参数附近的问号)：

constructor(
      public projectId?: number,public description?: string,public startDate?: Date,public endDate?: Date
 ) { }

常见问题 – 从源(如Web服务)获取一些数据

从Web服务获取项目数据时可能会遇到这种情况.在这种情况下,数据将被反序列化为普通对象{projectId：1,…}.从该数据中获取项目实例无法隐式完成,还需要完成其他工作.

最简单的方法是在工厂方法中将每个属性从一侧传递到另一侧：

class Project implements IProject {
    ...
    static create(data: IProject) {
        return new Project(data.projectId,data.description,data.startDate,data.endDate);
    }
    ...
}

并且您可以使用接口(而不是任何)为您的数据在键入时提供额外的帮助,并实现它(类Project实现IProject)：

interface IProject {
    projectId: number;
    description: string;
    startDate: Date;
    endDate: Date;
}

另一种选择是使用可选参数,但这可能不适用于所有情况：

class Project implements IProject {
     ...
     constructor(
          public projectId?: number,public endDate?: Date
     ) { }

     static create(data: IProject) {
          return Object.assign(new Project(),data);
     }
     ...
}

因此,如果要像上面那样实现,接口将具有可选参数(检查问号)：

interface IProject {
    projectId?: number;
    description?: string;
    startDate?: Date;
    endDate?: Date;
}

将TypeScript转换为JavaScript时的编译和接口将从最终代码中删除所有接口. JavaScript中没有“接口”概念.这是TypeScript的构造,其目的是提供其他类型信息.

试着坚持 – S =单一责任原则

在上面的代码中,Project有两个职责(不是一个).第一是保存一些项目数据.第二是计算剩余天数 – getDaysRemaining.对于单个班级来说,这可能太多了.

一个干净的解决方案可能是将其分成两部分.

有一个界面来表示项目的数据：

interface IProject {
    projectId: number;
    description: string;
    startDate: Date;
    endDate: Date;
}

并将getDaysRemaining()移动到另一个类,如：

class ProjectSchedulingService {
    getDaysRemaining(project: IProject) {
        var result = project.endDate.valueOf() - Date.now().valueOf();
        result = Math.ceil(result / (1000 * 3600 * 24));
        return result < 0 ? 0 : result;
    }
}

这样做的好处是数据 – IProject – 是独立的,其他功能可以放在其他自己的工作中 – 比如ProjectSchedulingService.

另一个优点是IProject可以帮助处理普通对象,而不是实例化其他类.您可以从Web服务获取数据,将其转换为接口并以键入的方式工作.

另一个优点是业务可以分为多个类 – 比如ProjectSchedulingService–因此可以单独进行单元测试,而不是拥有数据及其中所有相关业务的繁重单片类.

另一个优点是拥有多个类有助于更容易地定义类之间的依赖关系,从而保持业务语义,并能够模拟类和单元的所有依赖关系来测试手头类的业务.

以Angular为例,您可以根据需要注入多个服务(类).拥有一个单一的服务意味着传递只需要其中一部分的东西.从而打破了界面隔离.

这可能听起来很愚蠢,因为代码很小,但随着时间的推移,这将继续增长,而下一代开发人员可能仍然以相同的单片方式继续开发而不是重构.经过一段时间后,由于维护代码的难度,许多估计值会增加或被破坏. cyclomatic complexity也变得最差,也是单元测试的代码覆盖率.