First part of migration to strict types completed 🚀

Author: chicio

_data/webpack.yml

@@ -1 +1 @@
-hash: 9d713e6c839f73f75474
+hash: 4e931446014858453336

_ts/blog/pull-to-refresh.ts

@@ -45,21 +45,7 @@ const getTouchesCoordinatesFrom = (event: TouchEvent): Point => {
   )
 }
 
-
-const pullToRefresh = (): void => {
-  if (!('serviceWorker' in navigator)) {
-    return
-  }
-
-  const pullToRefreshElement: HTMLElement | null = document.querySelector('#pull-to-refresh')
-  const pullToRefreshStatusElement: HTMLElement | null = document.querySelector('#pull-to-refresh-status')
-  const pullToRefreshLoaderElement: HTMLElement | null = document.querySelector('#pull-to-refresh-loader')
-  const pullableContent: HTMLElement | null = document.querySelector('.pullable-content')
-
-  if(!areAllAvailable(pullToRefreshElement, pullToRefreshStatusElement, pullToRefreshLoaderElement, pullableContent)) {
-    return
-  }
-
+const startPullToRefresh = (pullToRefreshElement: HTMLElement, pullToRefreshStatusElement: HTMLElement, pullToRefreshLoaderElement: HTMLElement, pullableContent: HTMLElement): void => {
   const pullToRefreshElementHeight = 100
   const pullToRefreshStatusRepository = createPullToRefreshStatusRepository()
   const decelerationFactor = 0.5
@@ -71,7 +57,7 @@ const pullToRefresh = (): void => {
     pullToRefreshLoaderElement.style.opacity = `${pullToRefreshLoaderOpacity}`
   }
 
-  const isDraggingForPullToRefresh = (yMovement): boolean => window.scrollY <= 0 && yMovement <= 0
+  const isDraggingForPullToRefresh = (yMovement: number): boolean => window.scrollY <= 0 && yMovement <= 0
 
   const closePullToRefresh = (): void => {
     addCssClass(pullToRefreshElement, 'end-pull')
@@ -158,4 +144,24 @@ const pullToRefresh = (): void => {
   })
 }
 
+const pullToRefresh = (): void => {
+  if (!('serviceWorker' in navigator)) {
+    return
+  }
+
+  const pullToRefreshElement: HTMLElement | null = document.querySelector<HTMLElement>('#pull-to-refresh')
+  const pullToRefreshStatusElement: HTMLElement | null = document.querySelector<HTMLElement>('#pull-to-refresh-status')
+  const pullToRefreshLoaderElement: HTMLElement | null = document.querySelector<HTMLElement>('#pull-to-refresh-loader')
+  const pullableContent: HTMLElement | null = document.querySelector<HTMLElement>('.pullable-content')
+
+  if(areAllAvailable(pullToRefreshElement, pullToRefreshStatusElement, pullToRefreshLoaderElement, pullableContent)) {
+    startPullToRefresh(
+      pullToRefreshElement as HTMLElement,
+      pullToRefreshStatusElement as HTMLElement, 
+      pullToRefreshLoaderElement as HTMLElement, 
+      pullableContent as HTMLElement
+    )
+  }
+}
+
 export { pullToRefresh }

_ts/common/lazy-load-images.ts

@@ -3,7 +3,7 @@ import { addCssClass, removeCssClass } from './css-class'
 
 const loadImage = (image: HTMLImageElement, observer: IntersectionObserver): void => {
   const placeholderUrl: string = image.src
-  image.src = image.dataset.src
+  image.src = image.dataset.src as string
   image.onload = (): void => {
     if (image.src !== placeholderUrl) {
       observer.unobserve(image)

_ts/home/scene-3D.ts

@@ -5,7 +5,7 @@ const isWebGLEnabled = (): boolean => {
   try {
     return !!window.WebGLRenderingContext && (!!c.getContext('experimental-webgl') || !!c.getContext('webgl'));
   } catch (e) {
-    return null;
+    return false;
   }
 }
 

_ts/home/scene-threejs.ts

@@ -112,7 +112,7 @@ const setWindowResizeListener = (camera: PerspectiveCamera, renderer: WebGLRende
 }
 
 const setup = (renderer: WebGLRenderer, camera: PerspectiveCamera, scene: Scene): void => {
-  document.getElementById('rendering-surface').appendChild(renderer.domElement)
+  document.getElementById('rendering-surface')?.appendChild(renderer.domElement)
   scene.background = new Color(0x303F9F)
   setWindowResizeListener(camera, renderer)
 }

_ts/home/tabs.ts

@@ -1,35 +1,35 @@
 import { addCssClass, removeCssClass } from '../common/css-class'
 
-const forEach = (list: NodeList, operation: (item: Node) => void): void => {
+const forEach = (list: NodeListOf<HTMLElement>, operation: (item: HTMLElement) => void): void => {
   for (let i = 0; i < list.length; i++) {
     operation(list.item(i))
   }
 }
 
-const deactivateAll = (tabs: NodeList): void => forEach(tabs, (tab: HTMLElement) => removeCssClass(tab, 'active'))
+const deactivateAll = (tabs: NodeListOf<HTMLElement>): void => forEach(tabs, (tab: HTMLElement) => removeCssClass(tab, 'active'))
 
 const activateTabFor = (event: Event): void => {
   const element: HTMLElement = (event.currentTarget as HTMLElement)
   addCssClass(element, 'active')
 }
 
 const deactivateAllTabPanes = (): void => forEach(
-  document.querySelectorAll('.tab-pane'),
+  document.querySelectorAll<HTMLElement>('.tab-pane'),
   (tabPane: HTMLElement) => removeCssClass(tabPane, 'active')
 )
 
 const activateTabPaneFor = (event: Event): void => {
   const element: HTMLElement = (event.target as HTMLElement)
   const activePaneId: string | null = element.getAttribute('href')
   if (activePaneId) {
-    const activePane: HTMLElement | null = document.querySelector(activePaneId)
+    const activePane: HTMLElement | null = document.querySelector<HTMLElement>(activePaneId)
     if (activePane) {
       addCssClass(activePane, 'active')
     }
   }
 }
 
-const tabClick = (tabs: NodeList, event: Event): void => {
+const tabClick = (tabs: NodeListOf<HTMLElement>, event: Event): void => {
   event.preventDefault()
   deactivateAll(tabs)
   activateTabFor(event)
@@ -38,7 +38,7 @@ const tabClick = (tabs: NodeList, event: Event): void => {
 }
 
 const tabs = (): void => {
-  const tabs: NodeList = document.querySelectorAll('ul.nav-tabs > li')
+  const tabs: NodeListOf<HTMLElement> = document.querySelectorAll('ul.nav-tabs > li')
   forEach(tabs, (tab: HTMLElement) => {
     tab.addEventListener('click', (event: Event) => tabClick(tabs, event))
   })

_ts/sw.ts

@@ -69,14 +69,14 @@ setCatchHandler((options: RouteHandlerCallbackOptions): Promise<Response> => {
   const isAOfflinePageImageRequest = (options: RouteHandlerCallbackOptions): boolean =>
     !(typeof options.request === 'string') &&
     options.request.destination == 'image' &&
-    options.url.pathname == OFFLINE_PAGE_NO_NETWORK_IMAGE_URL
+    options.url?.pathname == OFFLINE_PAGE_NO_NETWORK_IMAGE_URL
 
   if (isADocumentRequest(options)) {
-    return caches.match(OFFLINE_PAGE_URL);
+    return caches.match(OFFLINE_PAGE_URL) as Promise<Response>;
   }
 
   if (isAOfflinePageImageRequest(options)) {
-    return caches.match(OFFLINE_PAGE_NO_NETWORK_IMAGE_URL);
+    return caches.match(OFFLINE_PAGE_NO_NETWORK_IMAGE_URL) as Promise<Response>;
   }
 
   return Promise.resolve(Response.error());

tsconfig.json

@@ -4,7 +4,7 @@
     "module": "ES2020",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
     "moduleResolution": "node",
     "allowJs": true,                       /* Allow javascript files to be compiled. */
-    "strict": false,                           /* Enable all strict type-checking options. */
+    "strict": true,                           /* Enable all strict type-checking options. */
     "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     "lib": ["esnext", "webworker", "dom"], 
     "skipLibCheck": true,                     /* Skip type checking of declaration files. */