TypeScript类函数成员初始化与调用检查的语法咨询

一、初始化函数类型成员为null/undefined的正确语法 #

你的userInfoChangedCallback当前类型是UserCallback，而null/undefined不属于这个函数类型的范畴，所以首先需要扩展成员的类型，允许它是函数或者null/undefined，再完成初始化。

两种常见写法：

• 初始化为null：

  private userInfoChangedCallback: UserCallback | null = null;
  

• 初始化为undefined：

  private userInfoChangedCallback: UserCallback | undefined = undefined;
  

二、调用前的正确检查方式 #

你当前代码里的if判断逻辑完全反了——如果userInfoChangedCallback为null，你反而去调用它，这会直接抛出错误。正确逻辑是确认回调存在后再调用，常用检查方式有两种：

1. 严格排除null/undefined：

   if (this.userInfoChangedCallback !== null) {
       this.userInfoChangedCallback(new User(username, displayName));
   }
   

   （如果用undefined就检查!== undefined，或者用!= null同时覆盖null和undefined的情况）

2. 利用真值判断（函数是真值，null/undefined是假值）：

   if (this.userInfoChangedCallback) {
       this.userInfoChangedCallback(new User(username, displayName));
   }
   

三、修正后的完整代码 #

import { User } from './User'; // 修正原代码里的冒号为分号
export type UserCallback = (user: User | null) => void;

export class MyClass {
    // 扩展类型并初始化为null
    private userInfoChangedCallback: UserCallback | null = null;

    setCallback(callback: UserCallback) {
        this.userInfoChangedCallback = callback;
    }

    register = async(username: string, displayName: string, password: string) => {
        // do some things here...

        // 修正判断逻辑，确认回调存在后再调用
        if (this.userInfoChangedCallback !== null) {
            this.userInfoChangedCallback(new User(username, displayName));
        }
    }
}

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