避免 linting 问题的 React 上下文函数的正确类型声明是什么？

Question

我正在使用 React Context 并且我有：

const DocumentContext = createContext<
    [DocumentStateType, React.Dispatch<any>, React.Dispatch<any>]
>([initVal, () => { }, () => { }]);

但是我的 linter 抱怨：

Unexpected empty arrow function @typescript-eslint/no-empty-function

我知道我可以在我的 linting 设置中关闭它，但是有正确的方法吗？

Answer 1

您可以使用选项 allowArrowFunctions

Documentation

"@typescript-eslint/no-empty-function": ["error", {"allow": ["arrowFunctions"]}],

Answer 2

如果您只想抑制 linter 消息，您可以将其声明为：

const DocumentContext = createContext<
    [DocumentStateType, React.Dispatch<any>, React.Dispatch<any>]
>([initVal, () => { /* do nothing */ }, () => { /* do nothing */ }]);

或如：

const DocumentContext = createContext<
    [DocumentStateType, React.Dispatch<any>, React.Dispatch<any>]
>([initVal, () => undefined, () => undefined]);

如果您绝对确定不会在任何地方使用此默认值。也就是说，除了上下文的提供者之外，您没有使用此上下文的组件，您可以简单地将其定义为：

const DocumentContext = createContext<
    [DocumentStateType, React.Dispatch<any>, React.Dispatch<any>]
>(null as any);

避免 linting 问题的 React 上下文函数的正确类型声明是什么？

What's the proper type declaration of React context functions to avoid linting issues?

javascript

typescript

reactjs

eslint

use-context