fix: improved typing (#174)

package.json

@@ -151,6 +151,7 @@
   "scripts": {
     "type-check": "tsc --noEmit --pretty",
     "type-check:watch": "npm run type-check -- --watch",
+    "type-check-strict:watch": "tsc --project ./tsconfig.strict.json --noEmit --pretty --watch",
     "release": "standard-version -a",
     "test:clean": "npx jest --clearCache",
     "test:acceptance": "codeceptjs run --steps",

src/App/App.test.tsx

@@ -1,27 +1,27 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 
 import storage from '../utils/storage';
 import { generateTokenWithTimeRange } from '../../jest/unit/components/__mocks__/token';
 
-import App from './App';
+import App, { AppStateInterface } from './App';
 
 jest.mock('../utils/storage', () => {
   class LocalStorageMock {
-    private store: object;
+    private store: Record<string, string>;
     public constructor() {
       this.store = {};
     }
     public clear(): void {
       this.store = {};
     }
-    public getItem(key): unknown {
+    public getItem(key: string): unknown {
       return this.store[key] || null;
     }
-    public setItem(key, value): void {
+    public setItem(key: string, value: string): void {
       this.store[key] = value.toString();
     }
-    public removeItem(key): void {
+    public removeItem(key: string): void {
       delete this.store[key];
     }
   }
@@ -33,7 +33,7 @@ jest.mock('../utils/api', () => ({
 }));
 
 describe('App', () => {
-  let wrapper;
+  let wrapper: ReactWrapper<{}, AppStateInterface, App>;
 
   beforeEach(() => {
     wrapper = mount(<App />);

src/App/App.tsx

@@ -48,7 +48,7 @@ export default class App extends Component<{}, AppStateInterface> {
   }
 
   // eslint-disable-next-line no-unused-vars
-  public componentDidUpdate(_, prevState): void {
+  public componentDidUpdate(_: AppStateInterface, prevState: AppStateInterface): void {
     const { isUserLoggedIn } = this.state;
     if (prevState.isUserLoggedIn !== isUserLoggedIn) {
       this.loadOnHandler();
@@ -99,7 +99,7 @@ export default class App extends Component<{}, AppStateInterface> {
     }
   };
 
-  public setLoading = isLoading =>
+  public setLoading = (isLoading: boolean) =>
     this.setState({
       isLoading,
     });
@@ -118,7 +118,7 @@ export default class App extends Component<{}, AppStateInterface> {
    * handles login
    * Required by: <Header />
    */
-  public handleDoLogin = async (usernameValue, passwordValue) => {
+  public handleDoLogin = async (usernameValue: string, passwordValue: string) => {
     const { username, token, error } = await makeLogin(usernameValue, passwordValue);
 
     if (username && token) {
@@ -135,7 +135,7 @@ export default class App extends Component<{}, AppStateInterface> {
     }
   };
 
-  public setLoggedUser = username => {
+  public setLoggedUser = (username: string) => {
     this.setState({
       user: {
         username,

src/App/AppError.tsx

@@ -6,17 +6,17 @@ export interface ErrorProps {
 
 export interface ErrorAppState {
   hasError: boolean;
-  error: any;
-  info: any;
+  error: Error | null;
+  info: object | null;
 }
 
 export default class ErrorBoundary extends Component<ErrorProps, ErrorAppState> {
-  constructor(props) {
+  constructor(props: ErrorProps) {
     super(props);
     this.state = { hasError: false, error: null, info: null };
   }
 
-  public componentDidCatch(error, info) {
+  public componentDidCatch(error: Error, info: object) {
     this.setState({ hasError: true, error, info });
   }
 

src/components/AvatarTooltip/AvatarTooltip.tsx

@@ -14,7 +14,7 @@ export interface AvatarDeveloper {
 
 const AvatarTooltip: FC<AvatarDeveloper> = ({ name, packageName, version, avatar, email }) => {
   const avatarComponent = <Avatar aria-label={name} src={avatar} />;
-  function renderLinkForMail(email, avatarComponent, packageName, version): JSX.Element {
+  function renderLinkForMail(email: string, avatarComponent: JSX.Element, packageName: string, version: string): JSX.Element {
     if (!email || isEmail(email) === false) {
       return avatarComponent;
     }

src/components/CopyToClipBoard/CopyToClipBoard.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 
 import CopyToClipBoard from './CopyToClipBoard';
 import { CopyIcon } from './styles';
 
 describe('<CopyToClipBoard /> component', () => {
-  let wrapper;
+  let wrapper: ReactWrapper;
 
   beforeEach(() => {
     wrapper = mount(<CopyToClipBoard text={'copy text'} />);

src/components/CopyToClipBoard/CopyToClipBoard.tsx

@@ -12,7 +12,7 @@ interface Props {
   children?: React.ReactNode;
 }
 
-const renderText = (text, children): JSX.Element => {
+const renderText = (text: string, children: React.ReactNode): JSX.Element => {
   if (children) {
     return <ClipBoardCopyText>{children}</ClipBoardCopyText>;
   }

src/components/Engines/Engines.tsx

@@ -58,7 +58,7 @@ class Engine extends Component {
     return <Grid container={true}>{items}</Grid>;
   };
 
-  private renderListItems = (heading, text) => {
+  private renderListItems = (heading: string, text: string) => {
     return (
       <List subheader={<Heading variant={'subtitle1'}>{text.split('-').join(' ')}</Heading>}>
         <EngineListItem button={true}>

src/components/Footer/Footer.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 
 import Footer from './Footer';
 
@@ -8,7 +8,7 @@ jest.mock('../../../package.json', () => ({
 }));
 
 describe('<Footer /> component', () => {
-  let wrapper;
+  let wrapper: ReactWrapper;
   beforeEach(() => {
     window.VERDACCIO_VERSION = 'v.1.0.0';
     wrapper = mount(<Footer />);

src/components/Login/Login.tsx

@@ -151,7 +151,7 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
     });
   };
 
-  public renderErrorMessage(title, description): JSX.Element {
+  public renderErrorMessage(title: string, description: string): JSX.Element {
     return (
       <span>
         <div>
@@ -162,7 +162,7 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
     );
   }
 
-  public renderMessage(title, description): JSX.Element {
+  public renderMessage(title: string, description: string): JSX.Element {
     return (
       <div className={classes.loginErrorMsg} id={'client-snackbar'}>
         <ErrorIcon className={classes.loginIcon} />

src/index.tsx

@@ -8,7 +8,7 @@ import App from './App';
 
 const rootNode = document.getElementById('root');
 
-const renderApp = (Component): void => {
+const renderApp = (Component: React.ElementType): void => {
   ReactDOM.render(
     <AppContainer>
       <Component />

src/pages/Version/Version.tsx

@@ -19,7 +19,7 @@ export function getRouterPackageName(params): string {
   return packageName;
 }
 
-function fillTitle(text): string {
+function fillTitle(text: string): string {
   return `Verdaccio - ${text}`;
 }
 

src/utils/calls.ts

@@ -2,7 +2,7 @@ import { PackageMetaInterface } from 'types/packageMeta';
 
 import API from './api';
 
-export async function callReadme(packageName, packageVersion?: string): Promise<string | {}> {
+export async function callReadme(packageName: string, packageVersion?: string): Promise<string | {}> {
   return await API.request<string | {}>(`package/readme/${packageName}${packageVersion ? `?v=${packageVersion}` : ''}`, 'GET');
 }
 

src/utils/package.ts

@@ -49,11 +49,11 @@ export function formatRepository(repository: any): string | null {
   return null;
 }
 
-export function formatDate(lastUpdate): string {
+export function formatDate(lastUpdate: string | number): string {
   return format(new Date(lastUpdate), TIMEFORMAT);
 }
 
-export function formatDateDistance(lastUpdate): string {
+export function formatDateDistance(lastUpdate: Date | string | number): string {
   return distanceInWordsToNow(new Date(lastUpdate));
 }
 

src/utils/url.ts

@@ -10,7 +10,7 @@ export function isURL(url: string): boolean {
   });
 }
 
-export function isEmail(email): boolean {
+export function isEmail(email: string): boolean {
   return isEmailValidator(email || '');
 }
 

tsconfig.strict.json

@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "noImplicitAny": true
+    }
+}