打字稿：你如何用布尔或回调函数定义联合类型？

Posted 2023-03-13

【中文标题】打字稿：你如何用布尔或回调函数定义联合类型？

【英文标题】：Typescript: how do you define a union type with boolean or a callback function?

【发布时间】：2019-03-20 19:17:39

【问题描述】：

如何为回调函数或布尔值设置联合类型？我试过这个，但我得到了：

export interface IActions 
  dragend?: ((m:any)=>void) | boolean;
  click?:  ((m:any)=>void) | boolean;
  dblclick?:  ((m:any)=>void) | boolean;



    // using the following type guard in code
    // also tried `this.setting.click instanceof Function`
    if (typeof this.setting.click != 'boolean')
      this.setting.click(m);
     else 
      // default action
    

错误：

错误 TS2349：无法调用其类型缺少调用签名的表达式。输入'布尔| ((m: any) => void)' 没有兼容的调用签名。

【问题讨论】：

你的编译器设置是什么，没有严格的空检查你的代码可以工作，严格的空检查我得到的错误和你的不同。

【参考方案1】：

您可以使用type guards 创建自动为您键入变量的 if 语句。

编写这些守卫的一种方法是：

（原谅我的命名……我今天感觉不是很有创意！）

type Action = (m: any) => void;
type ActionOrBoolean = Action | boolean;

function isActionOrBooleanAction(actionOrBoolean: ActionOrBoolean): actionOrBoolean is Action 
    return typeof actionOrBoolean != 'boolean';


function isActionOrBooleanBoolean(actionOrBoolean: ActionOrBoolean): actionOrBoolean is boolean 
    return typeof actionOrBoolean == 'boolean';

它们可以像这样使用：

let v3: ActionOrBoolean = (Math.random() > 0.5)
  ? (p1: any) => 
  : true;

if(isActionOrBooleanBoolean(v3)) 
    v3 = false;
 else if(isActionOrBooleanAction(v3)) 
    v3("");

最后，这里有一个jsFiddle，表明一切正常。

writeLine("v1: " + v1);
writeLine("v1 isActionOrBooleanAction: " + isActionOrBooleanAction(v1));
writeLine("v1 isActionOrBooleanBoolean: " + isActionOrBooleanBoolean(v1));

writeLine("v2: " + v2);
writeLine("v2 isActionOrBooleanAction: " + isActionOrBooleanAction(v2));
writeLine("v2 isActionOrBooleanBoolean: " + isActionOrBooleanBoolean(v2));

// Example
let v3: ActionOrBoolean = (Math.random() > 0.5)
  ? (p1: any) => 
  : true;

if(isActionOrBooleanBoolean(v3)) 
    v3 = false;
 else if(isActionOrBooleanAction(v3)) 
    v3("");

输出：

v1: 是的

v1 isActionOrBooleanAction: false

v1 isActionOrBooleanBoolean: true

v2: 函数 (p1)

v2 isActionOrBooleanAction: true

v2 isActionOrBooleanBoolean: false