javascript - 关于ts中，怎将一个参数写为多个类型，并且在函数中能依据不同类型做不同的处理，以我的代码为例，如下，应该怎么改？

Question

以Cesium.ScreenSpaceEventType.LEFT_CLICK和Cesium.ScreenSpaceEventType.MOUSE_MOVE为例，当setInputAction方法的第二个参数为Cesium.ScreenSpaceEventType.LEFT_CLICK时该方法的回调函数的click参数的类型为Cesium.ScreenSpaceEventHandler.PositionedEvent；
setInputAction方法的第二个参数为Cesium.ScreenSpaceEventType.MOUSE_MOVE时该方法的回调函数的click参数的类型为Cesium.ScreenSpaceEventHandler.MotionEvent，现在我已经将第二个参数改为动态的了，那回调函数的click参数类型怎么改呢？
我尝试将

this.handler.setInputAction((click: Cesium.ScreenSpaceEventHandler.PositionedEvent) {}, DRAW_SCREEN_SPACE_EVENT_TYPES[drawEntityParams.graphics])

改为联合类型：

type ClickType = Cesium.ScreenSpaceEventHandler.PositionedEvent | Cesium.ScreenSpaceEventHandler.MotionEvent;this.handler.setInputAction((click: ClickType) {    if (click instanceof Cesium.ScreenSpaceEventHandler.MotionEvent) {       // TODO       return;     }}, DRAW_SCREEN_SPACE_EVENT_TYPES[drawEntityParams.graphics])

click instanceof Cesium.ScreenSpaceEventHandler.MotionEvent这行ts提示
'类型“typeof ScreenSpaceEventHandler”上不存在属性“MotionEvent”',

当前完整的代码如下：

import * as Cesium from 'cesium';import type { DrawEntityParams, StyleConfig, EntityCollect, GraphicalType } from '@/components/Map/draw.d'import { generateRandomString } from '@/utils/utils';const DEFAULT_DRAW_IMAGE_ICON = new URL('@/components/Map/components/assets/point.svg', import.meta.url).href;const DRAW_SCREEN_SPACE_EVENT_TYPES: {  [key: string]: Cesium.ScreenSpaceEventType;} = {  point: Cesium.ScreenSpaceEventType.LEFT_CLICK,  billboard: Cesium.ScreenSpaceEventType.LEFT_CLICK,  polygon: Cesium.ScreenSpaceEventType.MOUSE_MOVE,  polyline: Cesium.ScreenSpaceEventType.MOUSE_MOVE,  box: Cesium.ScreenSpaceEventType.MOUSE_MOVE,  rectangle: Cesium.ScreenSpaceEventType.MOUSE_MOVE,  ellipse: Cesium.ScreenSpaceEventType.MOUSE_MOVE};export default class Draw {  viewer: Cesium.Viewer; // 当前的视图容器提供程序  config: StyleConfig; // 用于创建实体的颜色配置  entityCollect: EntityCollect; // 记录已经绘制的实体  handler: Cesium.ScreenSpaceEventHandler; // 用户交互程序对象  constructor(viewer: Cesium.Viewer, config: StyleConfig) {    /**      * cesium实例对象     */    this.viewer = viewer;    /**     * 绘制要素的相关配置     * 默认配置     */    this.config = config || {      borderColor: Cesium.Color.BLUE,      borderWidth: 2,      material: Cesium.Color.GREEN.withAlpha(0.5),    }    /**     * 初始化保存绘制实体的集合     */    this.entityCollect = { point: [], rectangle: [], polyline: [], polygon: [], billboard: [], box: [], ellipse: [] }    // 初始化用户屏幕事件对象    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)  };  /**   * 通过屏幕二维坐标获取点击位置得详细信息   */  private getPositionInfo(position: Cesium.Cartesian2, graphics?: GraphicalType) {    // 点击位置笛卡尔坐标    let cartesian = this.viewer.camera.pickEllipsoid(position, this.viewer.scene.globe.ellipsoid);    if (!cartesian) return;    // 笛卡尔转弧度坐标    let cartographic = Cesium.Cartographic.fromCartesian(cartesian, this.viewer.scene.globe.ellipsoid, new Cesium.Cartographic())    // 经度    let lng = Cesium.Math.toDegrees(cartographic.longitude);    // 维度    let lat = Cesium.Math.toDegrees(cartographic.latitude);    // 海拔高度    let height = Number(this.viewer.scene.globe.getHeight(cartographic)?.toFixed(2));    // 实体的唯一标注    let id = graphics ? `${graphics}_${generateRandomString()}` : generateRandomString();    return {      cartesian,      cartographic,      lng,      lat,      height,      id    }  };  /**   * 绘制实体   *    */  drawEntity(drawEntityParams: DrawEntityParams) {    const { graphics, _type, callback } = drawEntityParams;    this.handler.destroy();    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)    this.handler.setInputAction((click: Cesium.ScreenSpaceEventHandler.PositionedEvent) => {      const positionInfo = this.getPositionInfo(click.position, drawEntityParams.graphics);      if (!positionInfo) return;      const { lng, lat, id, height } = positionInfo;      const entity = this.viewer.entities.add({        position: Cesium.Cartesian3.fromDegrees(lng, lat, height),        id,        billboard: {          // 图像地址，URI或Canvas的属性          image: DEFAULT_DRAW_IMAGE_ICON,          // 设置颜色和透明度          color: Cesium.Color.WHITE.withAlpha(0.8),          // 高度（以像素为单位）          height: 50,          // 宽度（以像素为单位）          width: 50,          // 大小是否以米为单位          sizeInMeters: false,          // 相对于坐标的垂直位置          verticalOrigin: Cesium.VerticalOrigin.CENTER,          // 相对于坐标的水平位置          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,          // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量          pixelOffset: new Cesium.Cartesian2(0, -12.5),          // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。          scale: 1.0,          // 显示在距相机的距离处的属性，多少区间内是可以显示的          // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),          // 是否显示          show: true,          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,          disableDepthTestDistance: Number.POSITIVE_INFINITY        }      });      const entityInfo = { id, position: [lng, lat], entity, graphics, _type };      this.entityCollect.point.push(entityInfo);      if (callback) callback(entityInfo)    }, DRAW_SCREEN_SPACE_EVENT_TYPES[drawEntityParams.graphics])    this.handler.setInputAction(() => {      this.handler.destroy();    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)  };  /**   * 获取绘制的实体集合   */  get getEntityCollect() {    return this.entityCollect  }}

补充：
我按照采纳的回答修改了代码，
然后在setInputAction的回调方法内通过 click instanceof Cesium.ScreenSpaceEventHandler.MotionEvent,来处理两个不同情况，但是ts提示了类型
“typeof ScreenSpaceEventHandler”上不存在属性“MotionEvent”
代码如下：

this.handler.setInputAction((click: ClickType<typeof eventType>) => {    if (click instanceof Cesium.ScreenSpaceEventHandler.MotionEvent) {        // TODO    } else {        // TODO    }}, DRAW_SCREEN_SPACE_EVENT_TYPES[drawEntityParams.graphics])

然后在GPT的帮助下，写了如下方法，一切就都正常了：

function isPositionedEvent(click: ClickType<Cesium.ScreenSpaceEventType>): click is Cesium.ScreenSpaceEventHandler.PositionedEvent {  return 'position' in click;}this.handler.setInputAction((click: ClickType<typeof eventType>) => {    if (!isPositionedEvent(click)) {        console.log(click.endPosition)      } else {        console.log(click.position)    }}, DRAW_SCREEN_SPACE_EVENT_TYPES[drawEntityParams.graphics])

我想知道为什么不能使用click instanceof Cesium.ScreenSpaceEventHandler.MotionEvent?
GPT给我的解决方案是否合理？
我这样写复杂的方式是否合理？

因为完全可以通过以下方式分不同情况编码, 只是多写了几次this.handler.setInputAction,比如：

const graphicsFuns = {      billboard: () => {        this.handler.setInputAction((click: Cesium.ScreenSpaceEventHandler.PositionedEvent) => {          const positionInfo = this.getPositionInfo(click.position, drawEntityParams.graphics);          if (!positionInfo) return;          const { lng, lat, id, height } = positionInfo;          const entity = this.viewer.entities.add({            position: Cesium.Cartesian3.fromDegrees(lng, lat, height),            id,            billboard: {              // ...            }          });          const entityInfo = { id, position: [lng, lat], entity, graphics, _type };          this.entityCollect.point.push(entityInfo);          if (callback) callback(entityInfo)        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)      },      polyline: () => {        this.handler.setInputAction((click: Cesium.ScreenSpaceEventHandler.MotionEvent) => {          const positionInfo = this.getPositionInfo(click.endPosition, drawEntityParams.graphics);          if (!positionInfo) return;          const { lng, lat, id, height } = positionInfo;          const entity = this.viewer.entities.add({            position: Cesium.Cartesian3.fromDegrees(lng, lat, height),            id,            polyline: {              // ...            }          });          const entityInfo = { id, position: [lng, lat], entity, graphics, _type };          this.entityCollect.point.push(entityInfo);          if (callback) callback(entityInfo)        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)      }    };

Answer 1

写一个映射：

type EventTypeMap = {  [K in Cesium.ScreenSpaceEventType]: K extends Cesium.ScreenSpaceEventType.LEFT_CLICK    ? Cesium.ScreenSpaceEventHandler.PositionedEvent    : Cesium.ScreenSpaceEventHandler.MotionEvent;};

再写一个类型：

type ClickType<T extends Cesium.ScreenSpaceEventType> = EventTypeMap[T];

最后：

drawEntity(drawEntityParams: DrawEntityParams) {  const eventType = DRAW_SCREEN_SPACE_EVENT_TYPES[drawEntityParams.graphics];  this.handler.setInputAction((click: ClickType<typeof eventType>) => {    // ...  }, eventType);  // ...}