React and TypeScript Explained
Key Concepts
- TypeScript Basics
- TypeScript Types
- TypeScript Interfaces
- TypeScript Generics
- TypeScript Enums
- TypeScript Classes
- TypeScript Modules
- TypeScript Decorators
- React with TypeScript
- TypeScript Props in React
- TypeScript State in React
- TypeScript Events in React
- TypeScript Hooks in React
TypeScript Basics
TypeScript is a superset of JavaScript that adds static types to the language. It helps catch errors early and improves code quality. TypeScript code is compiled to JavaScript, which can be run in any browser or Node.js environment.
Example:
let message: string = "Hello, TypeScript!";
console.log(message);
TypeScript Types
TypeScript supports various types including primitive types (number, string, boolean), complex types (array, tuple), and custom types (interface, type alias). Type annotations are used to specify the type of variables, function parameters, and return values.
Example:
let count: number = 42;
let isActive: boolean = true;
let names: string[] = ["Alice", "Bob"];
TypeScript Interfaces
Interfaces in TypeScript define the shape of an object. They are used to enforce a contract on the structure of objects and can be extended or implemented by classes.
Example:
interface User {
id: number;
name: string;
email: string;
}
let user: User = {
id: 1,
name: "John Doe",
email: "john@example.com"
};
TypeScript Generics
Generics in TypeScript allow you to create reusable components that work with a variety of types. They provide a way to parameterize types, making your code more flexible and maintainable.
Example:
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("Hello");
TypeScript Enums
Enums in TypeScript allow you to define a set of named constants. They provide a way to give more friendly names to sets of numeric or string values.
Example:
enum Direction {
Up,
Down,
Left,
Right
}
let direction: Direction = Direction.Up;
TypeScript Classes
Classes in TypeScript are blueprints for creating objects. They support inheritance, encapsulation, and polymorphism. TypeScript classes can have properties, methods, constructors, and access modifiers.
Example:
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number) {
console.log(${this.name} moved ${distance} meters.);
}
}
let dog = new Animal("Dog");
dog.move(10);
TypeScript Modules
Modules in TypeScript allow you to organize your code into separate files and namespaces. They help manage dependencies and avoid global scope pollution. TypeScript supports both internal and external modules.
Example:
// math.ts
export function add(a: number, b: number): number {
return a + b;
}
// app.ts
import { add } from './math';
console.log(add(2, 3));
TypeScript Decorators
Decorators in TypeScript are a way to add annotations and metadata to classes, methods, properties, and parameters. They are used to modify or extend the behavior of these elements without changing their code.
Example:
function log(target: any, key: string, descriptor: PropertyDescriptor) {
console.log(Calling ${key});
}
class Calculator {
@log
add(a: number, b: number): number {
return a + b;
}
}
let calc = new Calculator();
calc.add(2, 3);
React with TypeScript
React with TypeScript allows you to build type-safe React applications. TypeScript helps catch errors early and provides better tooling support for React components, props, and state.
Example:
import React from 'react';
interface Props {
name: string;
}
const Greeting: React.FC<Props> = ({ name }) => {
return <div>Hello, {name}!</div>;
};
export default Greeting;
TypeScript Props in React
Props in React can be typed using TypeScript interfaces. This ensures that the component receives the correct types of props and helps prevent runtime errors.
Example:
interface Props {
title: string;
count: number;
}
const Counter: React.FC<Props> = ({ title, count }) => {
return (
<div>
<h1>{title}</h1>
<p>Count: {count}</p>
</div>
);
};
TypeScript State in React
State in React can be typed using TypeScript to ensure that the state variables have the correct types. This helps catch errors early and provides better autocompletion and type checking.
Example:
import React, { useState } from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState<number>(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
TypeScript Events in React
Events in React can be typed using TypeScript to ensure that the event handlers receive the correct types of events. This helps prevent runtime errors and provides better type safety.
Example:
import React from 'react';
const Form: React.FC = () => {
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log('Form submitted');
};
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
};
TypeScript Hooks in React
Hooks in React can be typed using TypeScript to ensure that the hook functions receive the correct types of parameters and return values. This helps catch errors early and provides better type safety.
Example:
import React, { useState, useEffect } from 'react';
const Timer: React.FC = () => {
const [time, setTime] = useState<number>(0);
useEffect(() => {
const interval = setInterval(() => {
setTime(time + 1);
}, 1000);
return () => clearInterval(interval);
}, [time]);
return (
<div>
<p>Time: {time} seconds</p>
</div>
);
};
Analogies
Think of TypeScript as a blueprint for a house. Just as a blueprint ensures that the house is built according to a specific design, TypeScript ensures that your code is built according to specific types and structures. Each room (component) in the house has a specific purpose and layout, just like each TypeScript type has a specific purpose and structure.
Another analogy is a recipe. Just as a recipe ensures that each ingredient is measured and each step is followed, TypeScript ensures that each type is specified and each function is implemented correctly. Each ingredient (type) in the recipe has a specific role, just like each TypeScript type has a specific role in your code.