angular - 将 Angular 从 2.x 升级到 4.x 后,类型 'emit' 上不存在属性 'People'

标签 angular webpack-2

我有一个类(class)如下:

import * as events from 'events';
export class People extends events.EventEmitter implements IMarkTool{
    public static REMOVE = "REMOVE";
    public static INVITE = "invite";
    socketService:any;
    public model: IPeople;
    constructor(model: IPeople){
      super();
    }

    public getMarkId(): string{
      return this.model.people._id;
    }

    public getName(): string{
      return this.model.people.name;
    }
    public getAvatar(): string {
      //console.log(Api.Avatar+"/"+ (this.model.people.avatar ? this.model.people.avatar : "default"));
      return Api.Avatar+"/"+(this.model.people.avatar ? this.model.people.avatar : "default");
    }
    public getUserId(): string{
      return this.model.people._id;
    }
    public getUser(): ExResIUser{
      return this.model.people;
    }

    public getType(): PeopleType{
      return this.model.type;
    }
    public remove(){
      this.emit(People.REMOVE, this.getUserId())
    }
  }

但是在运行 webpack 时出现以下错误:

“People”类型上不存在“emit”属性

据我了解,因为我是从 EventEmitter 继承的,所以它应该具有发出属性

注意:给定的代码在 Angular 2 上运行得非常好

其中EventEmitter是事件库中的一个ts模块。 enter image description here

最佳答案

npm 事件模块对于 typescript-2 有几个问题,例如不存在index.d.ts(如@estus所述)。

因此,以下是 eventJS 的等效 typescript 类,它与我的代码配合良好

let isFunction = function(obj) {
  return typeof obj == 'function' || false;
};
let isNumber=(arg)=> {
  return typeof arg === 'number';
};
let isObject=(arg)=> {
  return typeof arg === 'object' && arg !== null;
};
let isUndefined=(arg)=>{
  return arg === void 0;
};

export class MyEventEmitter {
  _events :any;
  _maxListeners :any;
  on:any;
  defaultMaxListeners:number=10;
  constructor() {
    this._events = this._events || {};
    this._maxListeners = this._maxListeners || undefined;
    this.on=this.addListener;
  }
  setMaxListeners(n) {
    if (!isNumber(n) || n < 0 || isNaN(n))
      throw TypeError('n must be a positive number');
    this._maxListeners = n;
    return this;
  }

  once(type, listener) {
    if (!isFunction(listener))
      throw TypeError('listener must be a function');

    let fired = false;
    let g= function () {
      this.listener=listener;
      this.removeListener(type, g);

      if (!fired) {
        fired = true;
        listener.apply(this, arguments);
      }
    };

    //g.listener = listener;
    this.on(type, g);

    return this;
  }
  removeListener(type, listener) {
    let list, position, length, i;

    if (!isFunction(listener))
      throw TypeError('listener must be a function');

    if (!this._events || !this._events[type])
      return this;

    list = this._events[type];
    length = list.length;
    position = -1;

    if (list === listener ||
      (isFunction(list.listener) && list.listener === listener)) {
      delete this._events[type];
      if (this._events.removeListener) {
        this.emit('removeListener', type, listener);
      }

    } else if (isObject(list)) {
      for (i = length; i-- > 0;) {
        if (list[i] === listener ||
          (list[i].listener && list[i].listener === listener)) {
          position = i;
          break;
        }
      }

      if (position < 0)
        return this;

      if (list.length === 1) {
        list.length = 0;
        delete this._events[type];
      } else {
        list.splice(position, 1);
      }

      if (this._events.removeListener)
        this.emit('removeListener', type, listener);
    }

    return this;
  }

  removeAllListeners(type) {
    let key, listeners;

    if (!this._events)
      return this;

    // not listening for removeListener, no need to emit
    if (!this._events.removeListener) {
      if (arguments.length === 0)
        this._events = {};
      else if (this._events[type])
        delete this._events[type];
      return this;
    }

    // emit removeListener for all listeners on all events
    if (arguments.length === 0) {
      for (key in this._events) {
        if (key === 'removeListener') continue;
        this.removeAllListeners(key);
      }
      this.removeAllListeners('removeListener');
      this._events = {};
      return this;
    }

    listeners = this._events[type];

    if (isFunction(listeners)) {
      this.removeListener(type, listeners);
    } else if (listeners) {
      // LIFO order
      while (listeners.length)
        this.removeListener(type, listeners[listeners.length - 1]);
    }
    delete this._events[type];

    return this;
  }

  listeners(type) {
    let ret;
    if (!this._events || !this._events[type])
      ret = [];
    else if (isFunction(this._events[type]))
      ret = [this._events[type]];
    else
      ret = this._events[type].slice();
    return ret;
  }

  listenerCount(type) {
    if (this._events) {
      let evlistener = this._events[type];

      if (isFunction(evlistener))
        return 1;
      else if (evlistener)
        return evlistener.length;
    }
    return 0;
  }

  addListener(type, listener) {
    let m;

    if (!isFunction(listener))
      throw TypeError('listener must be a function');

    if (!this._events)
      this._events = {};

    // To avoid recursion in the case that type === "newListener"! Before
    // adding it to the listeners, first emit "newListener".
    if (this._events.newListener)
      this.emit('newListener', type,
        isFunction(listener.listener) ?
          listener.listener : listener);

    if (!this._events[type])
    // Optimize the case of one listener. Don't need the extra array object.
      this._events[type] = listener;
    else if (isObject(this._events[type]))
    // If we've already got an array, just append.
      this._events[type].push(listener);
    else
    // Adding the second element, need to change to array.
      this._events[type] = [this._events[type], listener];

    // Check for listener leak
    if (isObject(this._events[type]) && !this._events[type].warned) {
      if (!isUndefined(this._maxListeners)) {
        m = this._maxListeners;
      } else {
        m = this.defaultMaxListeners;
      }

      if (m && m > 0 && this._events[type].length > m) {
        this._events[type].warned = true;
        console.error('(node) warning: possible EventEmitter memory ' +
          'leak detected. %d listeners added. ' +
          'Use emitter.setMaxListeners() to increase limit.',
          this._events[type].length);
        if (typeof console.trace === 'function') {
          // not supported in IE 10
          console.trace();
        }
      }
    }

    return this;
  }
  emit(type, ...args) {
    let er, handler, len, i, listeners;

    if (!this._events)
      this._events = {};

    // If there is no 'error' event listener then throw.
    if (type === 'error') {
      if (!this._events.error ||
        (isObject(this._events.error) && !this._events.error.length)) {
        er = args[0];
        if (er instanceof Error) {
          throw er; // Unhandled 'error' event
        } else {
          // At least give some kind of context to the user
          let err = new Error('Uncaught, unspecified "error" event. (' + er + ')');
          //err.context = er;
          throw err;
        }
      }
    }

    handler = this._events[type];

    if (isUndefined(handler))
      return false;

    if (isFunction(handler)) {
      switch (arguments.length) {
        // fast cases
        case 1:
          handler.call(this);
          break;
        case 2:
          handler.call(this, arguments[1]);
          break;
        case 3:
          handler.call(this, arguments[1], arguments[2]);
          break;
        // slower
        default:
          args = Array.prototype.slice.call(arguments, 1);
          handler.apply(this, args);
      }
    } else if (isObject(handler)) {
      args = Array.prototype.slice.call(arguments, 1);
      listeners = handler.slice();
      len = listeners.length;
      for (i = 0; i < len; i++)
        listeners[i].apply(this, args);
    }

    return true;
  }
}

关于angular - 将 Angular 从 2.x 升级到 4.x 后,类型 'emit' 上不存在属性 'People',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44476788/

相关文章:

angular - 我应该如何在 Angular 8 中为 @ViewChild 使用新的静态选项?

css - 有没有办法用webpack动态加载css文件

webpack - webpack 构建时间缓慢(高级模块优化)

WebPack加载器配置: To exclude or to include node_modules?

javascript - webpack:具有 webworker 和多个 block 的 commonchunksplugin

Angular 4+ ag-grid 卡在加载中

具有多个 View 的 Angular 2 组件

angular - 仅计算 Angular Material 选择列表的选定值

webpack - 将引导代码包含在两个不同的 block 中

Angular 2 无法读取 null 的属性 'config'