React with TypeScript

React with TypeScript combines the popular UI library React with the statically typed superset of JavaScript, TypeScript, to build more robust, maintainable, and scalable web applications. TypeScript brings static typing to JavaScript, meaning that variable types are checked at compile time rather than runtime. This helps catch common programming errors early in the development cycle, significantly reducing bugs and improving code quality.

Why Use TypeScript with React?

1. Enhanced Code Quality and Reliability: By defining explicit types for props, state, and other data structures, TypeScript enforces contracts between different parts of your application. This helps prevent type-related errors that might otherwise only appear at runtime, leading to more stable applications.
2. Improved Developer Experience (DX): TypeScript provides powerful tooling features like intelligent autocompletion, accurate refactoring, and inline error feedback directly in your IDE. This makes development faster and more enjoyable, as developers receive immediate feedback on type mismatches.
3. Clearer Component Interfaces: TypeScript forces developers to clearly define the expected shape of props that a component receives and the structure of its internal state. This makes components easier to understand, use, and refactor, especially in large codebases or collaborative environments.
4. Easier Maintenance and Collaboration: With explicit types, new team members can quickly grasp the data flow and expected inputs/outputs of components without having to dive deep into implementation details. This significantly improves maintainability and facilitates smoother collaboration.
5. Scalability: For large-scale applications, managing complexity becomes a significant challenge. TypeScript's type system helps manage this complexity by providing a clear structure and enforcing consistency across the codebase, making it easier to scale the application over time.

Key Concepts and Setup:

* Project Setup: You can easily set up a React with TypeScript project using Create React App (`npx create-react-app my-app --template typescript`) or a build tool like Vite (`npm create vite@latest my-app -- --template react-ts`).
* Typing Functional Components:
* You often define the shape of your component's props using an `interface` or `type` alias.
* Functional Components can be explicitly typed using `React.FC` (or `React.FunctionComponent`) along with your prop interface, e.g., `const MyComponent: React.FC<MyComponentProps> = ({ prop1 }) => { ... };`. `React.FC` automatically provides the `children` prop, but it's often preferred to type children explicitly using `React.PropsWithChildren<MyComponentProps>` for better control.
* Typing State (`useState`): When using the `useState` hook, you can provide a generic type argument to specify the type of your state variable, e.g., `const [count, setCount] = React.useState<number>(0);`. If the initial state makes the type obvious, it can sometimes be inferred.
* Typing Events: Event handlers in React often require specific event types provided by React itself. For example, a button click event is `React.MouseEvent<HTMLButtonElement>`, and an input change event is `React.ChangeEvent<HTMLInputElement>`.
* Typing Refs (`useRef`): For `useRef`, you also provide a generic type, often including `null` for the initial state, e.g., `const inputRef = React.useRef<HTMLInputElement | null>(null);`.

import React, { useState, useRef, ChangeEvent, MouseEvent } from 'react';

// 1. Typing Component Props using an Interface
interface GreeterProps {
  name: string;
  age?: number; // Optional prop
  onGreet: (message: string) => void;
}

// 2. Functional Component with React.FC and typed props
const Greeter: React.FC<GreeterProps> = ({ name, age, onGreet }) => {
  // 3. Typing State with useState
  const [greetingMessage, setGreetingMessage] = useState<string>('');
  const [inputValue, setInputValue] = useState<string>('');
  const [counter, setCounter] = useState<number>(0);

  // 4. Typing a Ref with useRef
  const inputRef = useRef<HTMLInputElement | null>(null);

  // 5. Typing Event Handlers
  const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {
    setInputValue(event.target.value);
  };

  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>): void => {
    // Optionally focus the input when button is clicked
    if (inputRef.current) {
      inputRef.current.focus();
    }
    const message = `Hello, ${name}! You are ${age ? age : 'unknown'} years old.`;
    setGreetingMessage(message);
    onGreet(message); // Call parent callback
    setCounter(prev => prev + 1);
  };

  return (
    <div style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '8px' }}>
      <h2>Greeter Component</h2>
      <p>My name is: {name}</p>
      {age && <p>I am {age} years old.</p>}
      <button onClick={handleButtonClick}>Generate Greeting</button>
      {greetingMessage && <p style={{ color: 'blue' }}>{greetingMessage}</p>}
      <p>Button clicked {counter} times.</p>

      <hr />

      <label htmlFor="greetInput">Enter custom message:</label>
      <input
        id="greetInput"
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        ref={inputRef}
        placeholder="Type something..."
      />
      <p>Input Value: {inputValue}</p>
    </div>
  );
};

// Example of how to use the Greeter component in an App component
const App: React.FC = () => {
  const handleParentGreet = (message: string) => {
    console.log("Greeting received in App component:", message);
    alert(message);
  };

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>
      <h1>React with TypeScript Example</h1>
      <Greeter name="Alice" age={30} onGreet={handleParentGreet} />
      <Greeter name="Bob" onGreet={handleParentGreet} /> {/* Age is optional */}
    </div>
  );
};

export default App;