Cory House

@housecor.com

2209 Followers 61 Following

Courses: http://pluralsight.com YouTube: http://youtube.com/@housecor Consulting: http://reactjsconsulting.com ⚛️

import { assertType, expectTypeOf } from 'vitest' import { mount } from './mount.js' test('my types work properly', () => { expectTypeOf(mount).toBeFunction() expectTypeOf(mount).parameter(0).toMatchTypeOf<{ name: string }>() // @ts-expect-error name is a string assertType(mount({ name: 42 })) })
<Box sx={{ alignItems: 'cenetr' }}>
// Prefer this type User = { /** User's ID */ id: number, /** User's name. */ name: string }; // Over this: /** * @typedef {Object} User * @property {number} id - User's ID. * @property {string} name - User's name. */
1. File Naming Conventions: - MUST use kebab-case for ALL file names CORRECT: user-profile.tsx, auth-layout.tsx, api-utils.ts INCORRECT: userProfile.tsx, AuthLayout.tsx, apiUtils.ts - MUST use .tsx extension for React components - MUST use .ts extension for utility files - MUST use lowercase for all file names - MUST separate words with hyphens - MUST NOT use spaces or underscores
const config = { entry: ["src/main.tsx"], ignore: [ // Deliberately telling Knip to ignore all test files. // This way, if a file or func is only used by a test, knip will report it as unused. "src/**/*.test.*", ] }
function useForceErrorViaSearchParam() { const [searchParams] = useSearchParams(); const error = searchParams.get("throwError"); if (error) throw new Error(error); }
import { useQuery } from "@tanstack/react-query"; type Status = "loading" | "error fetching" | "no devices found" | "available"; export const useMediaAvailability = (kind: MediaDeviceKind) => useQuery({ queryKey: ["mediaAvailability", kind], queryFn: async (): Promise<Status> => { try { const mediaDevices = await navigator.mediaDevices.enumerateDevices(); const cameraDevices = mediaDevices.filter((device) => device.kind === kind); if (cameraDevices.length && cameraDevices.some((d) => d.label)) { return "available"; } return "no devices found"; } catch (error) { return "error fetching"; } }, });
// Avoid. Needlessly wide. type User = { id: number; address?: { city?: string; state?: string; } | null | undefined } // Prefer. Simpler. Clearer. Safer. type User = { id: number; address: { city: string; state: string; } | null }