打字稿将函数标记为实现接口答案

【问题标题】：typescript mark function as implementing an interface打字稿将函数标记为实现接口
【发布时间】：2021-04-18 09:41:36
【问题描述】：

我想表明一个函数应该实现某个接口。

例如：

import { BrowserEvents, eventHandler, Event } from './browser-events'; 

export function setup(){
 const browserEvents = new BrowserEvents();
 browserEvents.onClicks(handleClicks);

 function handleClicks(ev: Event) {
   ev.preventDefault();
 }
}

我想告诉 typescript handleClicks 应该匹配类型 eventHandler。显然，如果handleClicks的签名与onClicks不匹配，ts会抛出错误。但我想像这样的语法“在源头”显示错误：

// (not valid syntax!)
function handleClicks(ev: Event) implements eventHandler {
  ev.preventDefault();
}

我也可以将函数用作变量，就像这样，但它会迫使我在使用之前移动函数：

const handleClicks: eventHandler = (ev: Event) => {
  ev.preventDefault();
}

browserEvents.onClicks(handleClicks);

那么，是否有强制常规函数遵守签名的语法？

【问题讨论】：

标签： javascript typescript function types

【解决方案1】：

认为你可以做这样的事情：

（但不确定您要返回什么，所以我将其输入为void）

interface FunctionInterface {
  (e: eventHandler): void;
}

function f1(e): FunctionInterface {
  e.preventDefault();
}

const f2: FunctionInterface = e => {
  e.preventDefault()
};

【讨论】：

不错，但是function foo(): SomeType { } 将SomeType 设置为foo 的返回值。
您是否引用了SomeType 作为具有上述函数语法的接口？我刚刚在 repl 中测试了它
是的。 See Here。出现错误 - Type 'number' is not assignable to type 'FunctionInterface'.(2322)