fix: ts strict type errors

.eslintrc.js

@@ -48,6 +48,7 @@ module.exports = {
         'react-hooks/exhaustive-deps': 'error', // Checks effect dependencies
         'max-len': ['error', { ignoreComments: true, code: 180 }],
         'no-param-reassign': 'off',
+        'no-undef': 'off',
     },
     globals: {
         __IS_DEV__: true,

src/app/providers/StoreProvider/config/StateSchema.ts

@@ -33,10 +33,10 @@ export interface ReduxStoreWithManager extends EnhancedStore<StateSchema> {
 
 export interface ThunkExtraArg {
 	api: AxiosInstance,
-	navigate: (to: To, options?: NavigateOptions) => void
+	navigate?: (to: To, options?: NavigateOptions) => void
 }
 
 export interface ThunkConfig<T> {
 	rejectValue: T,
-	extra: ThunkExtraArg
+	extra: ThunkExtraArg,
 }

src/app/providers/StoreProvider/config/store.ts

@@ -21,7 +21,8 @@ export function createReduxStore(
     const reducerManager = createReducerManager(rootReducers);
 
     const store = configureStore({
-        reducer: reducerManager.reduce,
+        // @ts-ignore
+        reducer: reducerManager.reduce as ReducersMapObject<StateSchema>,
         devTools: __IS_DEV__,
         preloadedState: initialState,
         middleware: (getDefaultMiddleware) => getDefaultMiddleware({

src/app/providers/StoreProvider/ui/StoreProvider.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { Provider } from 'react-redux';
 import { createReduxStore } from 'app/providers/StoreProvider/config/store';
 import { StateSchema } from 'app/providers/StoreProvider/config/StateSchema';
-import { DeepPartial, ReducersMapObject } from '@reduxjs/toolkit';
+import { ReducersMapObject } from '@reduxjs/toolkit';
 import { useNavigate } from 'react-router-dom';
 
 interface StoreProviderProps {

src/app/providers/ThemeProvider/lib/useTheme.ts

@@ -2,23 +2,23 @@ import { useContext } from 'react';
 import { LOCAL_STORAGE_THEME_KEY, Theme, ThemeContext } from './ThemeContext';
 
 interface UseThemeResult {
-    toggleTheme: () => void;
-    theme: Theme;
+  toggleTheme: () => void;
+  theme: Theme;
 }
 
 export function useTheme(): UseThemeResult {
     const { theme, setTheme } = useContext(ThemeContext);
 
     const toggleTheme = () => {
         const newTheme = theme === Theme.DARK ? Theme.LIGHT : Theme.DARK;
-        setTheme(newTheme);
+        setTheme?.(newTheme);
         // чтобы работали стили в модалках и других частях приложения (используется по умолчанию везде как единая точка входа)
         document.body.className = newTheme;
         localStorage.setItem(LOCAL_STORAGE_THEME_KEY, newTheme);
     };
 
     return {
-        theme,
+        theme: theme || Theme.LIGHT,
         toggleTheme,
     };
 }

src/app/types/global.d.ts

@@ -1,20 +1,24 @@
 declare module '*.scss' {
-    interface IClassNames {
-        [className: string]: string
-    }
-    const classNames: IClassNames;
-    export = classNames;
+	interface IClassNames {
+		[className: string]: string
+	}
+	const classNames: IClassNames;
+	export = classNames;
 }
 
 declare module '*.png';
 declare module '*.jpg';
 declare module '*.jpeg';
 declare module '*.svg' {
-    import React from 'react';
+	import React from 'react';
 
-    const SVG: React.VFC<React.SVGProps<SVGSVGElement>>;
-    export default SVG;
+	const SVG: React.VFC<React.SVGProps<SVGSVGElement>>;
+	export default SVG;
 }
 
 declare const __IS_DEV__: boolean;
 declare const __API__: string;
+
+type DeepPartial<T> = T extends object ? {
+	[P in keyof T]?: DeepPartial<T[P]>;
+} : T;

src/entities/Counter/model/selectors/getCounter/getCounter.test.ts

@@ -1,4 +1,3 @@
-import { DeepPartial } from '@reduxjs/toolkit';
 import { StateSchema } from 'app/providers/StoreProvider';
 import { getCounter } from './getCounter';
 

src/entities/Counter/model/selectors/getCounterValue/getCounterValue.test.ts

@@ -1,5 +1,4 @@
 import { getCounterValue } from 'entities/Counter/model/selectors/getCounterValue/getCounterValue';
-import { DeepPartial } from '@reduxjs/toolkit';
 import { StateSchema } from 'app/providers/StoreProvider';
 
 describe('getCounterValue.test', () => {

src/entities/User/model/slice/userSlice.ts

@@ -12,13 +12,13 @@ export const userSlice = createSlice({
         setAuthData: (state, action:PayloadAction<User>) => {
             state.authData = action.payload;
         },
-        initAuthData: (state, action:PayloadAction<User>) => {
+        initAuthData: (state) => {
             const user = localStorage.getItem(USER_LOCALSTORAGE_KEY);
             if (user) {
                 state.authData = JSON.parse(user);
             }
         },
-        logout: (state, action:PayloadAction<User>) => {
+        logout: (state) => {
             state.authData = undefined;
             localStorage.removeItem(USER_LOCALSTORAGE_KEY);
         },

src/features/AuthByUsername/model/selectors/getLoginError/getLoginError.test.ts

@@ -1,4 +1,3 @@
-import { DeepPartial } from '@reduxjs/toolkit';
 import { StateSchema } from 'app/providers/StoreProvider';
 import { getLoginError } from './getLoginError';
 

src/features/AuthByUsername/model/selectors/getLoginIsLoading/getLoginLoading.test.ts

@@ -1,4 +1,3 @@
-import { DeepPartial } from '@reduxjs/toolkit';
 import { StateSchema } from 'app/providers/StoreProvider';
 import { getLoginIsLoading } from './getLoginIsLoading';
 

src/features/AuthByUsername/model/selectors/getLoginPassword/getLoginPassword.test.ts

@@ -1,4 +1,3 @@
-import { DeepPartial } from '@reduxjs/toolkit';
 import { StateSchema } from 'app/providers/StoreProvider';
 import { getLoginPassword } from './getLoginPassword';
 

src/features/AuthByUsername/model/selectors/getLoginUsername/getLoginUsername.test.ts

@@ -1,4 +1,3 @@
-import { DeepPartial } from '@reduxjs/toolkit';
 import { StateSchema } from 'app/providers/StoreProvider';
 import { getLoginUsername } from './getLoginUsername';
 

src/features/AuthByUsername/model/slice/loginSlice.test.ts

@@ -1,4 +1,3 @@
-import { DeepPartial } from '@reduxjs/toolkit';
 import { LoginSchema } from '../types/loginSchema';
 import { loginActions, loginReducer } from './loginSlice';
 

src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx

@@ -52,7 +52,6 @@ const LoginForm = memo(({ className, onSuccess }: LoginFormProps) => {
     const onLoginClick = useCallback(
         async () => {
             const result = await dispatch(loginByUsername({ username, password }));
-            console.log(result.meta.requestStatus);
             if (result.meta.requestStatus === 'fulfilled') {
                 onSuccess();
             }

src/shared/api/api.ts

@@ -4,6 +4,6 @@ import { USER_LOCALSTORAGE_KEY } from 'shared/const/localstorage';
 export const $api = axios.create({
     baseURL: __API__,
     headers: {
-        authorization: localStorage.getItem(USER_LOCALSTORAGE_KEY),
+        authorization: localStorage.getItem(USER_LOCALSTORAGE_KEY) || '',
     },
 });

src/shared/config/storybook/StoreDecorator/StoreDecorator.tsx

@@ -1,17 +1,17 @@
 import { Story } from '@storybook/react';
 import { StateSchema, StoreProvider } from 'app/providers/StoreProvider';
-import { DeepPartial, ReducersMapObject } from '@reduxjs/toolkit';
 import { loginReducer } from 'features/AuthByUsername';
+import { ReducersList } from 'shared/lib/components/DynamicModuleLoared/DynamicModuleLoared';
 import { profileReducer } from '../../../../entities/Profile';
 
-const defaultAsyncReducers: DeepPartial<ReducersMapObject<StateSchema>> = {
+const defaultAsyncReducers: ReducersList = {
     loginForm: loginReducer,
     profile: profileReducer,
 };
 
 export const StoreDecorator = (
     state: DeepPartial<StateSchema>,
-    asyncReducers?: DeepPartial<ReducersMapObject<StateSchema>>,
+    asyncReducers?: ReducersList,
 ) => (StoryComponent: Story) => (
     <StoreProvider initialState={state} asyncReducers={{ ...defaultAsyncReducers, ...asyncReducers }}>
         <StoryComponent />

src/shared/lib/classNames/classNames.ts

@@ -1,4 +1,4 @@
-type Mods = Record<string, boolean | string>
+export type Mods = Record<string, boolean | string | undefined>
 
 export function classNames(
     cls: string,

src/shared/lib/components/DynamicModuleLoared/DynamicModuleLoared.tsx

@@ -28,15 +28,15 @@ export const DynamicModuleLoader: FC<DynamicModuleLoaderProps> = (props) => {
     const dispatch = useDispatch();
 
     useEffect(() => {
-        Object.entries(reducers).forEach(([name, reducer]: ReducersListEntry) => {
-            store.reducerManager.add(name, reducer);
+        Object.entries(reducers).forEach(([name, reducer]) => {
+            store.reducerManager.add(name as StateSchemaKey, reducer);
             dispatch({ type: `@INIT ${name} reducer` });
         });
 
         return () => {
             if (removeAfterUnmount) {
-                Object.entries(reducers).forEach(([name, reducer]: ReducersListEntry) => {
-                    store.reducerManager.remove(name);
+                Object.entries(reducers).forEach(([name, reducer]) => {
+                    store.reducerManager.remove(name as StateSchemaKey);
                     dispatch({ type: `@DESTROY ${name} reducer` });
                 });
             }

src/shared/lib/tests/componentRender/componentRender.tsx

@@ -4,7 +4,6 @@ import i18nForTests from 'shared/config/i18n/i18nForTests';
 import { I18nextProvider } from 'react-i18next';
 import { MemoryRouter } from 'react-router-dom';
 import { StateSchema, StoreProvider } from 'app/providers/StoreProvider';
-import { DeepPartial } from '@reduxjs/toolkit';
 
 export interface componentRenderOptions {
   route?: string;

src/shared/ui/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { classNames } from 'shared/lib/classNames/classNames';
+import { classNames, Mods } from 'shared/lib/classNames/classNames';
 import {
     ButtonHTMLAttributes, FC, memo, ReactNode,
 } from 'react';
@@ -31,14 +31,14 @@ export const Button = memo((props: ButtonProps) => {
     const {
         className,
         children,
-        theme,
+        theme = ButtonTheme.OUTLINE,
         square,
         isDisabled,
         size = ButtonSize.M,
         ...otherProps
     } = props;
 
-    const mods:Record<string, boolean> = {
+    const mods:Mods = {
         [cls.square]: square,
         [cls.isDisabled]: isDisabled,
     };

src/shared/ui/Modal/Modal.tsx

@@ -1,11 +1,12 @@
 import React, {
+    MutableRefObject,
     ReactNode,
     useCallback,
     useEffect,
     useRef,
     useState,
 } from 'react';
-import { classNames } from 'shared/lib/classNames/classNames';
+import { classNames, Mods } from 'shared/lib/classNames/classNames';
 import { Portal } from 'shared/ui/Portal/Portal';
 import cls from './Modal.module.scss';
 
@@ -30,7 +31,7 @@ export const Modal = (props: ModalProps) => {
 
     const [isClosing, setIsClosing] = useState(false);
     const [isMounted, setIsMounted] = useState(false);
-    const timerRef = useRef<ReturnType<typeof setTimeout>>();
+    const timerRef = useRef() as MutableRefObject<ReturnType<typeof setTimeout>>;
 
     useEffect(() => {
         if (isOpen) {
@@ -65,7 +66,7 @@ export const Modal = (props: ModalProps) => {
         });
     }, [isOpen, onKeyDown]);
 
-    const mods:Record<string, boolean> = {
+    const mods:Mods = {
         [cls.opened]: isOpen,
         [cls.isClosing]: isClosing,
     };

src/widgets/Sidebar/ui/SidebarItem/SidebarItem.tsx

@@ -12,15 +12,16 @@ interface SidebarItemProps {
 
 export const SidebarItem = memo(({ item, collapsed }: SidebarItemProps) => {
     const { t } = useTranslation();
+
     return (
         <AppLink
             theme={AppLinkTheme.SECONDARY}
-            to={item.path}
+            to={item?.path || ''}
             className={classNames(cls.item, { [cls.collapsed]: collapsed })}
         >
-            <item.Icon className={cls.icon} />
+            {item?.Icon && <item.Icon className={cls.icon} />}
             <span className={cls.link}>
-                {t(item.text)}
+                {t(item?.text || '')}
             </span>
         </AppLink>
     );