TypeScript确定类型单击处理程序将返回

时间:2019-04-24 20:53:15

标签: typescript promise onclick

我有一个自定义按钮控件,其单击处理程序可以按如下所示返回promise或void:

// --- Options for button control
export interface buttonOptions {
   aProperty: string
   anotherProperty: number
   onClick: Promise<IButtonClickResult> | void
}

// --- Click handler added for click event inside control class
protected clickHandler(): Promise<IButtonClickResult> | void {
   if(returnsPromise) displaySpinner()

   various operations

   this.options.onClick(this)
}

该控件是使用构建器模式创建的,因此可以这样创建:

buttonClass.build()
  .options({
      aProperty: 'Hope this works',
      anotherProperty: 1,
      onClick: () => {
          return new Promise<IButtonClickResult>((resolve, reject) => {         

            // --- I suppose I could pass reference to resolve or reject to async function and allow that function to resolve or reject the promise
            asyncOperation(resolve, reject)                         
          }).then((result) => button.onClickSuccess(result)).catch((error) => button.onclickError(error))
还可以为

onClick分配一个函数,该函数返回void:

console.log('I was clicked')

如果点击处理程序返回一个诺言,我想在按钮上添加一个微调器,直到诺言得到解决或拒绝为止,然后我将通过.then或通过.catch的原始按钮内容替换微调器。 >

我的问题是如何确定是否将在按钮的单击处理程序中返回承诺,以便我知道是否在按钮上显示微调框。

任何帮助将不胜感激。我尝试了typeof和instanceof,但无济于事。可能是我没有正确使用它们?抱歉,我对TypeScript和NodeJS还是陌生的。

1 个答案:

答案 0 :(得分:2)

由于您正在处理联合类型,因此可以简单地测试退出void分支的方式(假设您已打开strictNullChecks):

const result: Promise<IButtonClickResult> | void = this.onClick(...args);
if (result === undefined) {
  // Nothing returned, don't do the async thing
} else {
  // result is of type Promise here and Typescript will let you call .then, etc.
}