AI Rules Hub
AI Rules Hub
Log In
AI Rules HubAI Rules Hub
Log InSign Up
ReactTypeScript

Strict React + TypeScript Rules

These rules enforce enterprise-level type safety, maintainability, and predictable React architecture.

Install via CLI
$ npx @airuleshub/cli@latest add strict-react-typescript-rules

Rule Content

1️⃣ Strict tsconfig.json

json
{  "compilerOptions": {    "target": "ES2022",    "lib": ["DOM", "DOM.Iterable", "ES2022"],    "module": "ESNext",    "jsx": "react-jsx",    "strict": true,    "noUncheckedIndexedAccess": true,    "exactOptionalPropertyTypes": true,    "noImplicitOverride": true,    "noFallthroughCasesInSwitch": true,    "noPropertyAccessFromIndexSignature": true,    "useUnknownInCatchVariables": true,    "forceConsistentCasingInFileNames": true,    "isolatedModules": true,    "skipLibCheck": false  }}

2️⃣ Never Use any

Use unknown and narrow types safely.

3️⃣ Always Type Component Props

tsx
interface ButtonProps {  label: string;  onClick: () => void;}
export function Button({ label, onClick }: ButtonProps): JSX.Element {  return <button onClick={onClick}>{label}</button>;}

4️⃣ Always Define Component Return Types

tsx
export function Header(): JSX.Element {  return <header>App</header>;}

5️⃣ Do NOT Use React.FC

Prefer explicit function components with typed props.

6️⃣ Properly Type useState

tsx
interface User {  id: string;  name: string;}
const [user, setUser] = useState<User | null>(null);

7️⃣ Strict Event Typing

tsx
const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {  setValue(e.target.value);};

8️⃣ Use Discriminated Unions for State

tsx
type FetchState =  | { status: "idle" }  | { status: "loading" }  | { status: "success"; data: string }  | { status: "error"; error: Error };

9️⃣ Never Use Non-Null Assertion (!)

Always check for null explicitly.

🔟 Always Type useRef

tsx
const inputRef = useRef<HTMLInputElement | null>(null);

1️⃣1️⃣ Strict Context Typing

tsx
interface AuthContextType {  user: User | null;  login: (email: string) => Promise<void>;}

🏆 Golden Enterprise Rules

  • ❌ No any
  • ❌ No implicit return types
  • ❌ No React.FC
  • ❌ No non-null assertion
  • ❌ No unsafe casting
  • ✅ Discriminated unions
  • ✅ Explicit typing everywhere
  • ✅ Strict ESLint + tsconfig

Command Palette

Search for a command to run...