为功能组件创建接口答案

【问题标题】：Create interface for functional component为功能组件创建接口
【发布时间】：2021-01-25 20:56:13
【问题描述】：

我正在使用 react js 和 typescript。我对下一个情况有问题：
如何为下一条语句重写接口：

export const useHook: () =&gt; { isLoaded: boolean } = () =&gt; { ... }

你怎么看，打字稿加了：() => { isLoaded: boolean }。但我不喜欢这个，我想改变界面。上面的代码怎么写接口？

【问题讨论】：

type HookType = () => { isLoaded: boolean }; export const useHook: HookType = () => { ... } 这有帮助吗？
() => { isLoaded: boolean } 不是打字稿添加的，而是您在代码中编写的。所以你想为你的函数使用不同的类型？另外，您的 sn-p 不起作用。
你为什么在标题中提到功能组件？您不会在问题中使用它们。

标签： reactjs typescript

【解决方案1】：

只需定义接口并将其作为类型传递。

interface LoadState {
    isLoaded: Boolean,
}

export const useHook: (): LoadState => ({ isLoaded: true })

【讨论】：

【解决方案2】：

您可以将：{ isLoaded: boolean } 更改为接口：

interface test {
    isLoaded: boolean
}

const useHook: () => test = () => { return {isLoaded: true} }

如果你想拥有一个包含useHook函数本身的接口，你也可以这样做：

interface test {
    isLoaded: boolean
}

const useHook: () => test = () => { return {isLoaded: true} }

interface myInterface{
    useHook: typeof useHook
}

export const obj : myInterface = {useHook}

【讨论】：