TypeScript中为接口字段赋值外部库函数后调用异常问题

问题重现 #

尝试将expo-sensors库的Accelerometer.requestPermissionsAsync方法赋值给自定义接口字段，运行时却出现permChecker未定义的错误：

import { Accelerometer } from 'expo-sensors';

type SensorInterface = {
  permChecker: () => Promise<PermissionResponse>;
};

type MonitorService = {
  accelerometer: SensorInterface;
};

export const monitorService: MonitorService = {
  accelerometer: {
    permChecker: Accelerometer.requestPermissionsAsync,
  },
};

调用代码：

const sensors = ['accelerometer'];
for (const sensor of sensors) {
      const service: SensorInterface = monitorService[sensor as keyof MonitorService];
      console.log(`service = ${JSON.stringify(service)}`); // 打印显示service为{}
      const perm = await service.permChecker(); // 报错：permChecker未定义
}

原因分析 #

1. JSON.stringify的误导：函数无法被JSON序列化，用JSON.stringify(service)打印会丢失permChecker字段，看起来像未定义，但实际函数是存在的。
2. 函数上下文丢失：Accelerometer.requestPermissionsAsync作为类方法，直接赋值会丢失原有this上下文，导致调用时无法正常执行，表现为类似未定义的错误。
3. 类型缺失：代码未导入PermissionResponse类型，虽不直接引发运行时错误，但可能导致编译警告，间接影响代码逻辑。

解决方案 #

1. 修复函数上下文绑定 #

用箭头函数包裹外部库方法，确保调用时上下文正确：

export const monitorService: MonitorService = {
  accelerometer: {
    permChecker: () => Accelerometer.requestPermissionsAsync(),
  },
};

2. 正确打印调试信息 #

避免用JSON.stringify打印包含函数的对象，直接打印对象本身：

console.log('service:', service); // 能正常显示permChecker函数

3. 补全类型导入 #

导入缺失的PermissionResponse类型，确保类型检查正确：

import { Accelerometer, PermissionResponse } from 'expo-sensors';

4. 验证模块导入正确性 #

确保在使用monitorService的文件中，正确导入该变量：

import { monitorService } from './path-to-your-file';

最终可运行代码 #

import { Accelerometer, PermissionResponse } from 'expo-sensors';

type SensorInterface = {
  permChecker: () => Promise<PermissionResponse>;
};

type MonitorService = {
  accelerometer: SensorInterface;
};

export const monitorService: MonitorService = {
  accelerometer: {
    permChecker: () => Accelerometer.requestPermissionsAsync(),
  },
};

调用代码：

import { monitorService } from './your-file-path';

const sensors = ['accelerometer'];
for (const sensor of sensors) {
  const service = monitorService[sensor as keyof MonitorService];
  console.log('service:', service);
  try {
    const perm = await service.permChecker();
    console.log('Permission result:', perm);
  } catch (err) {
    console.error('Permission request failed:', err);
  }
}

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