Angular 9集成Facebook Pixel时遇到编译错误求助

最近我在Angular 9项目里配置Facebook Pixel时，写了facebook-pixel-service.ts服务文件，但编译时遇到了好几个TypeScript错误，折腾了一番终于全部解决，把过程整理出来给大家参考。

我遇到的错误 #

编译时弹出的错误和警告包括：

• 'non-arrow functions are forbidden' 代码风格警告
• 类型() => void无法分配给类型undefined
• 类型HTMLElement无法分配给类型undefined
• 函数参数赋值时频繁提示“对象可能为'undefined'”

错误原因与解决步骤 #

1. 解决“non-arrow functions are forbidden”警告 #

这个是项目ESLint规则限制导致的，只需要把原来的普通自执行函数改成箭头函数就能消除警告。

2. 解决类型不匹配与对象可能为undefined的错误 #

剩下的类型错误都是因为TypeScript的严格类型检查机制，我们需要明确参数的可选性并处理可能为undefined的对象：

• 给自执行函数的参数添加可选标记?，告诉TypeScript这些参数允许为undefined
• 使用**可选链操作符?.**处理可能为undefined的属性/方法调用，避免报错
• 对于DOM元素获取操作，通过非空断言或者前置判断来处理可能返回undefined的情况

修正后的完整代码 #

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class FacebookPixelService {
  private loadOk = false;

  constructor() {}

  load() {
    if (!this.loadOk) {
      // 改用箭头函数解决ESLint警告，同时给参数添加可选类型
      ((f: any, b, e, v, n?: any, t?: any, s?: any) => {
        if (f.fbq) { return; }
        n = f.fbq = () => {
          // 使用可选链处理可能为undefined的callMethod
          n?.callMethod?.apply(n, arguments);
          n?.queue?.push(arguments);
        };
        if (!f._fbq) { f._fbq = n; }
        n.push = n; 
        n.loaded = true; 
        n.version = '2.0'; 
        n.queue = [];
        t = b.createElement(e);
        t.async = true; 
        t.src = v;
        // 给DOM元素添加非空断言，或者用可选链处理
        s = b.getElementsByTagName(e)[0]!; 
        s.parentNode.insertBefore(t, s);
      })(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
      
      // 注意：这里替换成你实际的Pixel ID
      (window as any).fbq('init', 'your-fb-pixel-id');
      (window as any).fbq('track', 'PageView');
      this.loadOk = true; 
      console.log('Facebook pixel init run!');
    } else {
      (window as any).fbq('track', 'PageView'); 
      console.log('Facebook PageView event fired!');
    }
  }
}

额外提示 #

记得把代码里的your-fb-pixel-id替换成你自己的Facebook Pixel ID，不然初始化会失败哦。

内容的提问来源于stack exchange，提问作者Jason Fung