【问题标题】:How do you show that a function implements an interface?你如何证明一个函数实现了一个接口?
【发布时间】:2019-12-17 23:07:30
【问题描述】:

使用 TypeScript,您可以显示一个变量实现了一个接口:

type Component<P = { children: string | number }> = (
  props: P
) => string | number;

const Children1: Component = props => props.children;

导致:

const Children1 = props => props.children;

是否可以使用常规功能实现类似的功能?其输出将类似于:

// Where does the type information go?
function Children2(props) {
    return props.children;
}

你可以在TypeScript Playground上玩这个例子

(至于为什么,常规函数是有用的,因为你可以提升它们)

【问题讨论】:

  • 只要使用const name: type = function () {}
  • 在您的第一个示例中,无论您是否输入,转换后的输出都是相同的。键入函数不是为转译器,而是为开发人员,所以你的智能感知更好
  • @jonrsharpe 在您的示例中,输出与第一个示例相同,这意味着您不能以提升方式使用它,例如在文件底部声明函数并在顶部使用它们。
  • 但是为什么输入的参数类型和返回类型不够?

标签: typescript


【解决方案1】:

键入一个函数是这样的:

function myFunction(a: ParamType): ReturnType { 
  // your function here
}

然后根据参数和返回类型推断函数的接口。

你的函数的返回类型通常可以由打字稿解释器推断出来。如果您要声明其他类需要实现的接口,则函数类型最有用。

【讨论】:

  • 这不是表明myFunction 返回了MyFunctionType 类型的东西,而不是MyFunctionType
  • 是的,不好意思,一大早,函数的接口只是从返回类型和参数类型推断出来的。如果你需要它比这更明确,那么你需要使用一个变量..也许一个更具体的例子来说明为什么你需要显式类型而不是推断函数会有所帮助
  • 这是完全有效的,适用于简单的情况,但是,当类型信息来自库时,导入所有单独的参数类型和返回类型可能很麻烦。
  • 在这些情况下,您最好在单独的文件中将它们声明为常量并导入函数,因此提升并不是真正的问题
【解决方案2】:

您无法按照自己的方式注释函数。有一个suggestion in GitHub 支持这一点,标记为“需要调查”。如果您想看到这种情况发生,您可能希望解决该问题并给它一个 ? 和/或描述您的用例(如果它比现有的更引人注目)。

我最接近您的意图的是使用条件类型,例如预定义的 ReturnType&lt;T&gt; 和相关的 Parameters&lt;T&gt; 类型:

function Children2(...[props]: Parameters<Component>): ReturnType<Component> {
    return props.children;
}

它的行为应该类似,并且不应该扩展得太可怕。不幸的是,它很可能在泛型函数中表现不正确。如果您需要此功能并解决吊装问题,我会坚持使用 const 变量。

希望有所帮助;祝你好运!

Link to code

【讨论】:

  • 耻辱!感谢 Github 问题的链接和大致相同的建议。 :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-11-16
  • 2015-10-23
  • 2014-11-18
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多