网站首页 » 前端开发 » Angular 2+ » Angular 2+ Object literal may only specify known properties, and ‘qq’ does not exist in type ‘Person’
上一篇:
下一篇:

Angular 2+ Object literal may only specify known properties, and ‘qq’ does not exist in type ‘Person’

这是一个很神奇的报错,因为你明明看懂了它报错的提示信息,但你就是偏偏没办法解决这个错误。这种也许就是别人口中常说的不解之迷吧!但这次,在这里,这个世界性难题已经知道并可以解决了。下面就是见证奇迹的时刻,擦亮眼睛,千万别走神了。

现在我们来看看几个关键的模块:

person.ts
export class Person {
  id: string;
  name: string;
  sex: string;
  age: string;
  phone: string;
  email: string;
}
person-mock.ts
import { Person } from '../services/person';

export const PERSON: Person[] = [
  { id: "1", age: "1", name: "小明", sex: "男", phone: "15889879211", email: "123121@163. com"},
];

通过自字义的 Person 类来声明一个元素为 Person 类的数组。

person.service.ts
import { Injectable } from '@angular/core';
import { Person } from '../services/person';
import { PERSON } from '../services/person-mock';

@Injectable()
export class PersonService {
  getPerson(): Promise<Person[]> {
    return Promise.resolve(PERSON);
  }

  queryPerson = function (id): Promise<Person> {
    for (var i = 0; i < PERSON.length; i++) {
      if (PERSON[i].id == id) {
        return Promise.resolve(PERSON[i]);
      }
    }
  }
}

其它的文件就不列出来了,因为这三个文件才是今天的主角,确确来说应该是前面两个文件才是今天的主角。

上面的代码写完之后,运行程序,完全没问题。可当我给这个 Person 类添加一个属性 “qq” ,并且同时也给 PERSON 对象追加 qq 属性及值后就会出现一个让人难以理解的错误。

首先我们来看看这个报错的截图,这也这就是你曾经一直都跨不过去的一道坎,看见了也不要伤心,不要迷失了自我,毕竟这都是命中注定,都是天赐良缘:

文字版

D:/workspace/contacts/src/app/services/person-mock.ts (4,94): Type ‘{ id: string; age: string; name: string; sex: string; phone: string; email: string; qq: string; }[]’ is not assignable to type ‘Person[]’. Type ‘{ id: string; age: string; name: string; sex: string; phone: string; email: string; qq: string; }’ is not assignable to type ‘Person’. Object literal may only specify known properties, and ‘qq’ does not exist in type ‘Person’.

什么 Object literal may only specify known properties, and ‘qq’ does not exist in type ‘Person’.

最关键的一句话就是 ‘qq’ does not exist in type ‘Person’,意思就是说 Person 类中不存在 qq 属性。

于是你肯定会问,我明明是有添加了的呀,为什么总是提示没有这个 qq 属性呢?这都不重要了,现在我们来看看怎么解决这个错误吧。

要想解决这个问题,我们可以用下面这两种方法:

方法一

可以把 Person 类改成 any

只改了一个地方
import { Person } from '../services/person';

export const PERSON: any[] = [
  { id: "1", age: "1", name: "小明", sex: "男", phone: "15889879211", email: "123121@163. com", qq: "111110171" }
];

方法二

直接把对象类写到发声明中

不是很优雅的方法
export const PERSON: {
  id: string;
  name: string;
  sex: string;
  age: string;
  phone: string;
  email: string;
}[] = [
    { id: "1", age: "1", name: "小明", sex: "男", phone: "15889879211", email: "123121@163. com", qq: "111110171" }
  ];

方法三

但是作为有追求的前端程序员来说,上面的两种方法肯定不是你的最优选择,对吗?因为我就是想到 Person 类来声明,其它的方法虽然可以解决问题,但我真心觉得代码不完美。那么这样的方法有没有呢?答案是肯定的。你不需要像上面那样修改代码,不需要,你要做的就是重启程序。

回到 cmd 窗口 Ctrl + c 中断服务,然后再输入命令行启动服务

ng serve --open

程序启动完并在浏览器中自动打开后你就会发现竟然没有报错了。一切好像什么都没发生过一样,自然,美好。

这个问题困扰了我好几天,一直把注意力放在了代码中,但其实问题的解决却在意料之外。至于为什么会这样,这就得去研究下 Angular 源码了,为什么使用自定义的类时会有这个问题,而其他情况下修改的代码都能得到及时地更新,并正确运行。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-error-object-literal-may-only-specify-known-properties/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END