FEAT: stricter TS - step 1 (#288)

* [#286] Upgrade to TS4, fix type errors

* [#285] TS: strict:true, noImplicitThis: true

* [#285] TS: strictBindCallApply: true, useUnknownInCatchVariables: true

* [#285] Improve debounce() readability

src/common/debounce.ts

@@ -1,10 +1,11 @@
-export function debounce(fn: (any) => any, ms: number): () => void {
-    let timer
-    return () => {
+export function debounce<F extends(...args: Parameters<F>) => ReturnType<F>>(
+    fn: F,
+    ms: number
+): (...args: Parameters<F>) => void {
+    let timer: ReturnType<typeof setTimeout>
+
+    return (...args) => {
         clearTimeout(timer)
-        timer = setTimeout((...args) => {
-            timer = null
-            fn.apply(this, ...args)
-        }, ms)
+        timer = setTimeout(() => fn(...args), ms)
     }
 }

src/ebay-carousel/__tests__/index.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { ComponentMeta } from '@storybook/react';
-import { EbayCarousel, EbayCarouselItem } from '../index';
+import { ComponentMeta, Story } from '@storybook/react'
+import { EbayCarousel, EbayCarouselItem, CarouselProps } from '../index';
 
 const story: ComponentMeta<typeof EbayCarousel> = {
   component: EbayCarousel,
@@ -54,7 +54,7 @@ export const Continuous = (args) => {
   );
 };
 
-const _ItemsPerSlide = (args) => {
+const _ItemsPerSlide: Story<CarouselProps> = (args) => {
     return (
         <EbayCarousel gap={16} {...args}>
             {items}

src/ebay-carousel/carousel.tsx

@@ -6,7 +6,7 @@ import { ListItemRef } from './types'
 import { getMaxOffset, getNextIndex, getOffset, getSlide } from './helpers'
 import { debounce } from '../common/debounce'
 
-type CarouselProps = ComponentProps<'div'> & {
+export type CarouselProps = ComponentProps<'div'> & {
     className?: string;
     gap?: number;
     index?: number; // Scroll to index slide

src/ebay-carousel/index.ts

@@ -1,2 +1,2 @@
-export { default as EbayCarousel } from './carousel'
+export { default as EbayCarousel, CarouselProps } from './carousel'
 export { default as EbayCarouselItem } from './carousel-item'

src/ebay-pagination/pagination.tsx

@@ -82,10 +82,10 @@ const EbayPagination: FC<PaginationProps> = ({
         const debouncedUpdate = debounce(updatePages, 16)
 
         updatePages()
-        window.addEventListener('resize', debouncedUpdate)
+        window.addEventListener('resize', () => debouncedUpdate())
 
         return () => {
-            window.removeEventListener('resize', debouncedUpdate)
+            window.removeEventListener('resize', () => debouncedUpdate())
         }
     }, [children])
 

tsconfig.json

@@ -14,7 +14,15 @@
         "outDir": "./lib",
         "declaration": true,
         "declarationMap": true,
-        "strict": false,
+        "strict": true,
+        "strictBindCallApply": true,
+        "strictFunctionTypes": false, // 21 errors
+        "strictNullChecks": false, // 150+ errors
+        "strictPropertyInitialization": false,
+        "useUnknownInCatchVariables": true,
+        "noImplicitAny": false, // 300+ errors
+        "noImplicitThis": true,
+        "alwaysStrict": true,
         "moduleResolution": "node",
         "baseUrl": "./",
         "allowSyntheticDefaultImports": true,