javascript - Lint sorunlarını önlemek için React context fonksiyonlarının doğru tür bildirimi nedir?


React Context kullanıyorum ve şunlara sahibim:

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

Ama linter’ım şikayet ediyor:

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

Bunu linting ayarlarımda kapatabileceğimi biliyorum, ama bunu yapmanın doğru bir yolu var mı?

Cevap #1

Eğer sadece linter mesajını bastırmak istiyorsanız, bunu şu şekilde bildirebilirsiniz:

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

veya şu şekilde:

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

Eğer bu varsayılan değeri hiçbir yerde kullanmayacağınızdan tamamen eminseniz, yani bu bağlamın sağlayıcısının ötesinde bu bağlamı kullanan bileşenleriniz yoksa, bunu basitçe şu şekilde tanımlayabilirsiniz:

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

Cevap #2

allowArrowFunctions seçeneğini kullanabilirsiniz

Belgeleme

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

İlgili makaleler