Type checking in the build process

.github/workflows/tests.yml

@@ -31,12 +31,6 @@ jobs:
           node-version: '22'
           cache: 'npm'
 
-      - name: Install Node Dependencies
-        run: npm ci
-
-      - name: Build Assets
-        run: npm run build
-
       - name: Install Dependencies
         run: composer install --no-interaction --prefer-dist --optimize-autoloader
 
@@ -46,5 +40,14 @@ jobs:
       - name: Generate Application Key
         run: php artisan key:generate
 
+      - name: Install Node Dependencies
+        run: npm ci
+
+      - name: Validate typescript
+        run: npm run type:check
+
+      - name: Build Assets
+        run: npm run build
+
       - name: Tests
         run: ./vendor/bin/phpunit

package.json

@@ -8,7 +8,7 @@
         "format": "prettier --write resources/",
         "format:check": "prettier --check resources/",
         "lint": "eslint . --fix",
-        "types": "tsc --noEmit"
+        "type:check": "tsc --noEmit"
     },
     "devDependencies": {
         "@eslint/js": "^9.19.0",

resources/js/pages/auth/reset-password.tsx

@@ -8,18 +8,19 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
 
-interface ResetPasswordProps {
-    token: string;
-    email: string;
-}
-
 type ResetPasswordForm = {
     token: string;
     email: string;
     password: string;
     password_confirmation: string;
 };
 
+interface ResetPasswordProps {
+    token: string;
+    email: string;
+}
+
+
 export default function ResetPassword({ token, email }: ResetPasswordProps) {
     const { data, setData, post, processing, errors, reset } = useForm<Required<ResetPasswordForm>>({
         token: token,

resources/js/pages/settings/profile.tsx

@@ -19,10 +19,10 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-interface ProfileForm {
+type ProfileForm = {
     name: string;
     email: string;
-}
+};
 
 export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
     const { auth } = usePage<SharedData>().props;

resources/js/pages/welcome.tsx

@@ -1,5 +1,6 @@
 import { type SharedData } from '@/types';
 import { Head, Link, usePage } from '@inertiajs/react';
+import { Property } from 'csstype';
 
 export default function Welcome() {
     const { auth } = usePage<SharedData>().props;
@@ -218,8 +219,7 @@ export default function Welcome() {
                                     />
                                 </g>
                                 <g
-                                    /** @ts-expect-error 'plus-darker' doesn't seem to be defined in the 'csstype' module */
-                                    style={{ mixBlendMode: 'plus-darker' }}
+                                    style={{ mixBlendMode: 'plus-darker' as Property.MixBlendMode }}
                                     className="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                                 >
                                     <path