Adds imports in module decleration

README.md

@@ -68,6 +68,7 @@ Issues can be funded by anyone and the money will be transparently distributed t
 - [Recipes](#recipes)
   - [Baseline tsconfig.json](#baseline-tsconfigjson)
   - [Default and Named Module Exports](#default-and-named-module-exports)
+  - [Imports in Module Decleration](#imports-in-module-decleration)
   - [Type Augmentation for npm libraries](#type-augmentation-for-npm-libraries)
   - [Override type-definitions for npm libraries](#override-type-definitions-for-npm-libraries)
 - [FAQ](#faq)
@@ -109,7 +110,7 @@ class MyComponent extends React.Component<Props, State> { ...
 ```
 
 #### `React.ComponentProps<typeof Component>`
-Gets type of Component Props, so you don't need to export Props from your component ever! (Works for both FC and Class components)
+Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;
 ```
@@ -1135,41 +1136,45 @@ export default combineReducers<TodosState, TodosAction>({
 ### Testing reducer
 
 ```tsx
-import { todosReducer as reducer, todosActions as actions } from './';
+import {
+  todosReducer as reducer,
+  todosActions as actions,
+  TodosState,
+} from './';
 
 /**
  * FIXTURES
  */
-const activeTodo = { id: '1', completed: false, title: 'active todo' };
-const completedTodo = { id: '2', completed: true, title: 'completed todo' };
-
-const initialState = reducer(undefined, {} as any);
+const getInitialState = (initial?: Partial<TodosState>) =>
+  reducer(initial as TodosState, {} as any);
 
 /**
  * STORIES
  */
 describe('Todos Stories', () => {
   describe('initial state', () => {
     it('should match a snapshot', () => {
+      const initialState = getInitialState();
       expect(initialState).toMatchSnapshot();
     });
   });
 
   describe('adding todos', () => {
     it('should add a new todo as the first element', () => {
-      const action = actions.add('new todo');
-      const state = reducer(initialState, action);
+      const initialState = getInitialState();
+      expect(initialState.todos).toHaveLength(0);
+      const state = reducer(initialState, actions.add('new todo'));
       expect(state.todos).toHaveLength(1);
-      expect(state.todos[0].id).toEqual(action.payload.id);
+      expect(state.todos[0].title).toEqual('new todo');
     });
   });
 
   describe('toggling completion state', () => {
     it('should mark active todo as complete', () => {
-      const action = actions.toggle(activeTodo.id);
-      const state0 = { ...initialState, todos: [activeTodo] };
-      expect(state0.todos[0].completed).toBeFalsy();
-      const state1 = reducer(state0, action);
+      const activeTodo = { id: '1', completed: false, title: 'active todo' };
+      const initialState = getInitialState({ todos: [activeTodo] });
+      expect(initialState.todos[0].completed).toBeFalsy();
+      const state1 = reducer(initialState, actions.toggle(activeTodo.id));
       expect(state1.todos[0].completed).toBeTruthy();
     });
   });
@@ -1595,6 +1600,18 @@ import Select from '@src/components/select';
 
 [⇧ back to top](#table-of-contents)
 
+### Imports in Module Decleration
+
+> When creating 3rd party modules declarations all the imports should be put inside the module decleration, otherwise it will be treated as augmentation and show error
+```ts
+declare module "react-custom-scrollbars" {
+    import * as React from "react";
+
+    export interface positionValues {
+    ...
+```
+[⇧ back to top](#table-of-contents)
+
 ### Type Augmentation for npm libraries
 Strategies to fix issues coming from external type-definitions files (*.d.ts)
 

README_SOURCE.md

@@ -68,6 +68,7 @@ Issues can be funded by anyone and the money will be transparently distributed t
 - [Recipes](#recipes)
   - [Baseline tsconfig.json](#baseline-tsconfigjson)
   - [Default and Named Module Exports](#default-and-named-module-exports)
+  - [Imports in Module Decleration](#imports-in-module-decleration)
   - [Type Augmentation for npm libraries](#type-augmentation-for-npm-libraries)
   - [Override type-definitions for npm libraries](#override-type-definitions-for-npm-libraries)
 - [FAQ](#faq)
@@ -109,7 +110,7 @@ class MyComponent extends React.Component<Props, State> { ...
 ```
 
 #### `React.ComponentProps<typeof Component>`
-Gets type of Component Props, so you don't need to export Props from your component ever! (Works for both FC and Class components)
+Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;
 ```
@@ -623,6 +624,18 @@ import Select from '@src/components/select';
 
 [⇧ back to top](#table-of-contents)
 
+### Imports in Module Decleration
+
+> When creating 3rd party modules declarations all the imports should be put inside the module decleration, otherwise it will be treated as augmentation and show error
+```ts
+declare module "react-custom-scrollbars" {
+    import * as React from "react";
+
+    export interface positionValues {
+    ...
+```
+[⇧ back to top](#table-of-contents)
+
 ### Type Augmentation for npm libraries
 Strategies to fix issues coming from external type-definitions files (*.d.ts)
 

playground/src/features/todos/reducer.spec.ts

@@ -1,38 +1,42 @@
-import { todosReducer as reducer, todosActions as actions } from './';
+import {
+  todosReducer as reducer,
+  todosActions as actions,
+  TodosState,
+} from './';
 
 /**
  * FIXTURES
  */
-const activeTodo = { id: '1', completed: false, title: 'active todo' };
-const completedTodo = { id: '2', completed: true, title: 'completed todo' };
-
-const initialState = reducer(undefined, {} as any);
+const getInitialState = (initial?: Partial<TodosState>) =>
+  reducer(initial as TodosState, {} as any);
 
 /**
  * STORIES
  */
 describe('Todos Stories', () => {
   describe('initial state', () => {
     it('should match a snapshot', () => {
+      const initialState = getInitialState();
       expect(initialState).toMatchSnapshot();
     });
   });
 
   describe('adding todos', () => {
     it('should add a new todo as the first element', () => {
-      const action = actions.add('new todo');
-      const state = reducer(initialState, action);
+      const initialState = getInitialState();
+      expect(initialState.todos).toHaveLength(0);
+      const state = reducer(initialState, actions.add('new todo'));
       expect(state.todos).toHaveLength(1);
-      expect(state.todos[0].id).toEqual(action.payload.id);
+      expect(state.todos[0].title).toEqual('new todo');
     });
   });
 
   describe('toggling completion state', () => {
     it('should mark active todo as complete', () => {
-      const action = actions.toggle(activeTodo.id);
-      const state0 = { ...initialState, todos: [activeTodo] };
-      expect(state0.todos[0].completed).toBeFalsy();
-      const state1 = reducer(state0, action);
+      const activeTodo = { id: '1', completed: false, title: 'active todo' };
+      const initialState = getInitialState({ todos: [activeTodo] });
+      expect(initialState.todos[0].completed).toBeFalsy();
+      const state1 = reducer(initialState, actions.toggle(activeTodo.id));
       expect(state1.todos[0].completed).toBeTruthy();
     });
   });