ci: enforce type safety with typescript code

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ jobs:
     name: pint
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
         with:
@@ -28,7 +28,7 @@ jobs:
     name: phpstan
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
         with:
@@ -48,7 +48,7 @@ jobs:
     name: phpunit
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
         with:
@@ -61,16 +61,33 @@ jobs:
       - name: Test
         run: composer paratest
 
+  tsc:
+    runs-on: ubuntu-22.04
+    strategy:
+      fail-fast: true
+    name: tsc
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Use Node 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install
+        run: npm install
+      - name: Type check
+        run: npm run tsc
+
   eslint:
     runs-on: ubuntu-22.04
     strategy:
       fail-fast: true
     name: eslint
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Use Node 20
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '20'
       - name: Install
@@ -85,9 +102,9 @@ jobs:
     name: vitest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Use Node 20
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '20'
       - name: Install

.hooks/pre-push

@@ -11,6 +11,9 @@ vendor/bin/phpstan analyse --memory-limit 512M
 printf "\n⏳ npm run lint:eslint\n"
 npx eslint --quiet
 
+printf "\n⏳ npm run tsc\n"
+npm run tsc
+
 printf "\n⏳ npm run test\n"
 npm run test
 

package.json

@@ -11,6 +11,7 @@
         "fix:eslint": "eslint public/js resources/js postcss.config.js tailwind.config.js vite.config.ts --fix",
         "test": "vitest run --reporter=dot",
         "test:watch": "vitest",
+        "tsc": "tsc --noEmit --skipLibCheck",
         "analyze": "cross-env ANALYZE=true npm run prod"
     },
     "dependencies": {

resources/js/features/user/settings/components/+sidebar/SettingsSidebar.test.tsx

@@ -1,3 +1,4 @@
+import { createAuthenticatedUser } from '@/common/models';
 import { render, screen } from '@/test';
 
 import { SettingsSidebar } from './SettingsSidebar';
@@ -6,7 +7,7 @@ describe('Component: SettingsSidebar', () => {
   it('renders without crashing', () => {
     // ARRANGE
     const { container } = render(<SettingsSidebar />, {
-      pageProps: { can: { updateAvatar: true }, auth: { user: {} } },
+      pageProps: { can: { updateAvatar: true }, auth: { user: createAuthenticatedUser() } },
     });
 
     // ASSERT
@@ -16,7 +17,10 @@ describe('Component: SettingsSidebar', () => {
   it('given the user is not muted, renders the avatar section', () => {
     // ARRANGE
     render(<SettingsSidebar />, {
-      pageProps: { can: { updateAvatar: true }, auth: { user: { isMuted: false } } },
+      pageProps: {
+        can: { updateAvatar: true },
+        auth: { user: createAuthenticatedUser({ isMuted: false }) },
+      },
     });
 
     // ASSERT
@@ -26,7 +30,10 @@ describe('Component: SettingsSidebar', () => {
   it('given the user is muted, does not render the avatar section', () => {
     // ARRANGE
     render(<SettingsSidebar />, {
-      pageProps: { can: { updateAvatar: true }, auth: { user: { isMuted: true } } },
+      pageProps: {
+        can: { updateAvatar: true },
+        auth: { user: createAuthenticatedUser({ isMuted: true }) },
+      },
     });
 
     // ASSERT

resources/js/ssr.tsx

@@ -1,4 +1,5 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- this file has known type issues that are safe and part of the official Inertia.js docs
+// @ts-nocheck
 
 import { createInertiaApp } from '@inertiajs/react';
 import createServer from '@inertiajs/react/server';
@@ -25,9 +26,7 @@ createServer((page) =>
     setup: ({ App, props }) => {
       global.route<RouteName> = (name, params, absolute) =>
         route(name, params as RouteParams<string & object>, absolute, {
-          // @ts-expect-error
           ...page.props.ziggy,
-          // @ts-expect-error
           location: new URL(page.props.ziggy.location),
         });
 

resources/js/tall-stack/alpine/tooltipComponent/utils/renderTooltip.ts

@@ -64,7 +64,7 @@ export function renderTooltip(
   updateTooltipPosition(
     anchorEl,
     store.tooltipEl,
-    store.trackedMouseX + offsetX,
-    store.trackedMouseY + offsetY,
+    (store.trackedMouseX ?? 0) + (offsetX ?? 0),
+    (store.trackedMouseY ?? 0) + (offsetY ?? 0),
   );
 }

resources/js/tall-stack/app.ts

@@ -1,10 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- this file has known type issues that are safe and part of the official Livewire docs
+// @ts-nocheck
+
 /* eslint-disable import/no-unresolved */
 
 // eslint-disable-next-line camelcase
 // import { livewire_hot_reload } from 'virtual:livewire-hot-reload';
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- This actually works in a TALL stack app with Livewire 3.
-// @ts-ignore
 import {
   autoExpandTextInput,
   copyToClipboard,