React TypeScript Cheat Sheet
Last updated 24th.March.2025
Want to know about React Typescript cheat sheet. Then you are at the right place, this article will guide you through it.
About The Author
Sai Ram Soma Having 12+ years of IT experience in React JS & Native, JavaScript, Typescript. Working in a startup from day one. Accustomed to learning and keeping up with the current trend. Experience in developing feature rich web applications using React JS. Experience in developing mobile applications in Android, React Native.
Contents
What is TypeScript in React JS?
TypeScript is a strongly typed superset of JavaScript that adds static typing to the language, making it easier to catch errors during development. With React JS, TypeScript enhances code maintainability, improves developer productivity, and ensures better type safety.
Why Use TypeScript with React?
- It Helps catch errors at compile time rather than runtime, reducing bugs.
- It Makes the codebase more structured and easier to understand.
- Offers Intelli Sense and autocompletion, making development faster.
- Makes it easier to manage large applications with multiple components.
Key Features of TypeScript in React
- Interfaces & Types: Define props and states explicitly, making component interactions more predictable.
- Generics: Enable reusable and flexible component typing.
- Strict Type Checking: Reduces potential runtime errors.
- Enhanced Editor Support: Works well with VS Code, providing suggestions and warnings.
Example: Using TypeScript in a React Component
tsxCopyEditimport React from ‘react’;
interface ButtonProps {
label: string;
onClick: () => void;
}
const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
return <button onClick={onClick}>{label}</button>;
};
export default Button;
In this example, ButtonProps defines the expected props (label as a string and onClick as a function), ensuring type safety.
Setting Up TypeScript in a React Project
To start using TypeScript in a React project, install it using :
shCopyEditnpx create-react-app my-app –template typescript
Or if you’re adding TypeScript to an existing React project:
shCopyEditnpm install –save-dev typescript @types/react @types/react-dom
React typescript cheat sheet
1. Basic Type :
tsCopyEditlet isDone: boolean = false;
let age: number = 30;
let firstName: string = “John”;
let list: number[] = [1, 2, 3];
let tuple: [string, number] = [“hello”, 10];
2. Type Aliases & Interfaces
tsCopyEdittype User = {
name: string;
age: number;
};
interface Person {
name: string;
age: number;
}
3. Functions
tsCopyEditfunction add(a: number, b: number): number {
return a + b;
}
const subtract = (a: number, b: number): number => a – b;
4. React Functional Components with Props
tsxCopyEditinterface ButtonProps {
label: string;
onClick: () => void;
}
const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
return <button onClick={onClick}>{label}</button>;
};
5. React State with useState Hook
tsxCopyEditimport { useState } from “react”;
const Counter = () => {
const [count, setCount] = useState<number>(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
6. React useEffect Hook
tsxCopyEditimport { useEffect, useState } from “react”;
const DataFetcher = () => {
const [data, setData] = useState<string>(“”);
useEffect(() => {
fetch(“https://api.example.com/data”)
.then((res) => res.json())
.then((result) => setData(result));
}, []);
return <p>{data}</p>;
};
7. Generics
tsCopyEditfunction identity<T>(arg: T): T {
return arg;
}
const output = identity<string>(“Hello”);
8. Optional & Default Props
tsxCopyEditinterface UserProps {
name: string;
age?: number;
}
const User: React.FC<UserProps> = ({ name, age = 18 }) => {
return <p>{name} is {age} years old.</p>;
};
9. Enums
tsCopyEditenum Status {
Success,
Failure,
Pending,
}
let currentStatus: Status = Status.Pending;
10. Type Assertion
tsCopyEditlet someValue: any = “This is a string”;
let strLength: number = (someValue as string).length;
11. Extending Interfaces
tsCopyEditinterface Animal {
name: string;
}
interface Dog extends Animal {
breed: string;
}
const pet: Dog = { name: “Buddy”, breed: “Labrador” };
12. TypeScript with Context API
tsxCopyEditimport { createContext, useContext } from “react”;
interface ThemeContextType {
theme: string;
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
const useTheme = () => {
const context = useContext(ThemeContext);
if (!context) throw new Error(“useTheme must be used within ThemeProvider”);
return context;
};
How to Setup Typescript in a React Project
TypeScript can be set up in a React project by creating a new project or adding It to an existing project.
1. Creating a New React Project with TypeScript
The easiest way to set up TypeScript in a React project is to use the Create React App (CRA) with the TypeScript template.
Step 1: Create a new React project
Run the following command in your terminal:
npx create-react-app my-app –template typescript
Note: If you don’t have npx, install Node.js first, which includes npx.
Step 2: Navigate to the project folder
cd my-app
Step 3: Start the development server
npm start
2. Adding TypeScript to an Existing React Project
If you already have a React project and want to add TypeScript, follow these steps:
Step 1: Install TypeScript and Type Definitions
Run the following command inside your project folder:
install –save-dev typescript @types/node @types/react @types/react-dom @types/jest
Step 2: Rename Files to .tsx
Rename your existing .js and .jsx files to .ts and .tsx, respectively.
- .ts is used for regular TypeScript files.
- .tsx is used for React components that contain JSX.
Step 3: Create or Update tsconfig.json
Run the following command to generate a tsconfig.json file:
This file contains TypeScript configuration options.
A basic tsconfig.json looks like this:
json{
“compilerOptions”: {
“target”: “ES6”,
“module”: “ESNext”,
“strict”: true,
“jsx”: “react-jsx”,
“moduleResolution”: “node”,
“esModuleInterop”: true,
“skipLibCheck”: true
}
}
3. Writing a Simple TypeScript React Component
Create a new component file:
src/components/Button.tsx
tsx mimport React from “react”;
interface ButtonProps {
label: string;
onClick: () => void;
}
const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
return <button onClick={onClick}>{label}</button>;
};
export default Button;
4. Running the Project
To start the TypeScript-enabled React app, run:
npm start
If everything is set up correctly, your React app will start running with TypeScript support!
Using TypeScript with React
TypeScript enhances React applications by providing type safety, better code readability, and improved development experience.
1. Create a New React App with TypeScript
If you haven’t set up TypeScript in your React app yet, create a new project using:
npx create-react-app my-app –template typescript
If you already have a React app, install TypeScript:
npm install –save-dev typescript @types/node @types/react @types/react-dom @types/jest
2. Basic TypeScript Component Example
Here’s a simple functional component using TypeScript:
tsx import React from “react”;
interface ButtonProps {
label: string;
onClick: () => void;
}
const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
return <button onClick={onClick}>{label}</button>;
};
export default Button;
The ButtonProps interface defines the expected props for the component.
React.FC<ButtonProps> ensures that the component correctly receives these props.
3. Using the Button Component in App.tsx
Core Principles of Redux
Modify App.tsx to use the Button component:
tsx import React from “react”;
import Button from “./components/Button”;
const App: React.FC = () => {
const handleClick = () => {
alert(“Button clicked!”);
};
return (
<div>
<h1>TypeScript with React Example</h1>
<Button label=”Click Me” onClick={handleClick} />
</div>
);
};
export default App;
The handleClick function is passed as a prop to handle button clicks.
4. Using TypeScript with State (useState)
Example of a Counter component with TypeScript:
tsx import React, { useState } from “react”;
const Counter: React.FC = () => {
const [count, setCount] = useState<number>(0);
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;
useState<number>(0) ensures count is always a number.
5. Using TypeScript with Event Handling
tsxCopyEditconst handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
console.log(event.target.value);
};
return <input type=”text” onChange={handleInputChange} />;
React.ChangeEvent<HTMLInputElement> correctly types the event.
6. Using TypeScript with API Calls (useEffect)
tsx import React, { useEffect, useState } from “react”;
interface User {
id: number;
name: string;
email: string;
}
const UserList: React.FC = () => {
const [users, setUsers] = useState<User[]>([]);
useEffect(() => {
fetch(“https://jsonplaceholder.typicode.com/users”)
.then((response) => response.json())
.then((data) => setUsers(data));
}, []);
return (
<div>
<h2>Users</h2>
<ul>
{users.map((user) => (
<li key={user.id}>{user.name} – {user.email}</li>
))}
</ul>
</div>
);
};
export default UserList;
The User interface ensures data consistency.
useState<User[]>([]) defines an array of User objects.
React Native TypeScript Cheat Sheet
This cheat sheet covers essential TypeScript concepts when working with React Native, including types, props, state, hooks, navigation, and API calls.
Basic Setup for TypeScript in React Native
Installing TypeScript in an Existing React Native Project
npm install –save-dev typescript @types/react @types/react-native
Create or Update tsconfig.json
json{
“compilerOptions”: {
“jsx”: “react-native”,
“strict”: true,
“target”: “ES6”,
“moduleResolution”: “node”,
“allowSyntheticDefaultImports”: true,
“skipLibCheck”: true
}
}
Rename Files
- .js → .ts
- .jsx → .tsx (for components)
Basic React Native Component in TypeScript
import React from “react”;
import { View, Text } from “react-native”;
const App: React.FC = () => {
return (
<View>
<Text>Hello, TypeScript in React Native!</Text>
</View>
);
};
export default App;
React.FC (Functional Component) ensures type safety.
Challenges with Redux
- Boilerplate Code: Setting up Redux requires writing additional code, which can be overwhelming for beginners.
- Learning Curve: Concepts like actions, reducers, and middleware may take time to grasp.
- Overkill for Small Projects: For simple applications, Redux can introduce unnecessary complexity.
TypeScript with Props and State
Props Example :
tsx interface Props {
name: string;
age?: number; // Optional prop
}
const User: React.FC<Props> = ({ name, age }) => {
return (
<Text>
Name: {name} {age && `Age: ${age}`}
</Text>
);
};
State Example with usestate :
tsxCopyEditimport React, { useState } from “react”;
import { View, Text, Button } from “react-native”;
const Counter: React.FC = () => {
const [count, setCount] = useState<number>(0);
return (
<View>
<Text>Count: {count}</Text>
<Button title=”Increment” onPress={() => setCount(count + 1)} />
</View>
);
};
Explicitly set useState<number>(0).
TypeScript with Hooks
useEffect Example :
tsx import React, { useEffect, useState } from “react”;
import { Text } from “react-native”;
const Timer: React.FC = () => {
const [time, setTime] = useState<number>(0);
useEffect(() => {
const interval = setInterval(() => setTime((prev) => prev + 1), 1000);
return () => clearInterval(interval); // Cleanup
}, []);
return <Text>Time: {time} sec</Text>;
};
Always clean up side effects with return () => {}.
TypeScript with Event Handlers
Handling Text Input Change
tsx import React, { useState } from “react”;
import { TextInput, Text, View } from “react-native”;
const InputExample: React.FC = () => {
const [text, setText] = useState<string>(“”);
const handleChange = (value: string) => {
setText(value);
};
return (
<View>
<TextInput
placeholder=”Type here…”
onChangeText={handleChange}
style={{ borderBottomWidth: 1 }}
/>
<Text>You typed: {text}</Text>
</View>
);
};
Use onChangeText={(value) => setText(value)} instead of onChange.
TypeScript with React Navigation
Install React Navigation types :
npm install @react-navigation/native @react-navigation/stack
npm install @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context
npm install @react-native-masked-view/masked-view
Define Type for Navigation Props :
tsx import { NativeStackScreenProps } from “@react-navigation/native-stack”;
type RootStackParamList = {
Home: undefined;
Details: { id: number };
};
type DetailsScreenProps = NativeStackScreenProps<RootStackParamList, “Details”>;
const DetailsScreen: React.FC<DetailsScreenProps> = ({ route }) => {
return <Text>Detail ID: {route.params.id}</Text>;
};
Use route.params to access navigation parameters safely.
API Call with Axios & TypeScript
Install Axios :
npm install axios
Fetch Data with Type Safety :
import React, { useEffect, useState } from “react”;
import { Text, FlatList } from “react-native”;
import axios from “axios”;
interface User {
id: number;
name: string;
}
const FetchUsers: React.FC = () => {
const [users, setUsers] = useState<User[]>([]);
useEffect(() => {
axios.get<User[]>(“https://jsonplaceholder.typicode.com/users”)
.then((res) => setUsers(res.data))
.catch((err) => console.error(err));
}, []);
return (
<FlatList
data={users}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => <Text>{item.name}</Text>}
/>
);
};
Use axios.get<User[]>() to define response type.
Using StyleSheet in TypeScript
import { StyleSheet } from “react-native”;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: “#fff”,
padding: 20,
},
text: {
fontSize: 18,
color: “blue”,
},
});
export default styles;
Define styles using StyleSheet.create({}) to get auto-completion.
Defining Global Types (types.ts File)
types.ts
export interface User {
id: number;
name: string;
email: string;
}
Use a separate types.ts file to manage interfaces.
Debugging TypeScript Errors in React Native
Error | Fix |
Property ‘X’ does not exist on type ‘Y’ | Check the interface and make sure the property is defined. |
Type ‘undefined’ is not assignable to type | Ensure all required properties are provided or use ? for optional props. |
Object is possibly ‘null’ | Use optional chaining (?.) or handle null cases properly. |
Advantages of Using React with TypeScript
Strongly Typed Code: TypeScript enforces static typing, helping developers catch errors at compile time rather than runtime, reducing potential bugs.
Better Code Readability & Maintainability: With well-defined types, it becomes easier to read and maintain code, especially in large-scale applications.
Improved Developer Productivity: Features like autocompletion, IntelliSense, and instant type-checking speed up development and reduce debugging time.
Enhanced Code Scalability: TypeScript provides structured code, making it easier to scale applications with a growing codebase and multiple contributors.
Seamless Integration with React Ecosystem: Works smoothly with React Hooks (useState, useEffect, etc.), Context API, and third-party libraries for type-safe components.
Better Prop & State Management: TypeScript enforces strict typing for props and state, ensuring proper data handling and reducing unexpected runtime errors.
Refactoring Without Fear: Strong typing makes code refactoring safer and more efficient, as incorrect changes are immediately flagged by the compiler.
Enhanced Code Documentation: Type annotations act as inline documentation, making it easier for developers to understand component structure and usage.
Reduced Debugging Time: Since TypeScript detects errors during development, it significantly reduces the time spent on debugging runtime issues.
Widespread Industry Adoption & Community Support: Many large companies and open-source projects use React TypeScript, ensuring continuous improvements, better tooling, and strong community support.
Props Validation in React 🚀
Props validation is crucial in React to ensure components receive the correct data types, reducing runtime errors and improving maintainability.
Props Validation with TypeScript
TypeScript provides static type checking, making props validation seamless.
Example: Validating Props with TypeScript
interface UserProps {
name: string;
age?: number; // Optional prop
}
const User: React.FC<UserProps> = ({ name, age }) => {
return (
<p>
Name: {name} {age && `| Age: ${age}`}
</p>
);
};
// Valid Usage
<User name=”John” age={30} />;
<User name=”Alice” />; // age is optional
Advantages of TypeScript for Props Validation:
Detects errors during compilation.
Eliminates the need for additional runtime validation.
Provides better IDE support (autocomplete, tooltips).
javascriptCopy codeimport { action } from ‘mobx’;
const increment = action(() => {
counterState.count++;
});
Props Validation with PropTypes (for JavaScript Users)
If you use JavaScript, prop-types is the standard way to validate props at runtime.
Installing PropTypes
npm install prop-types
Example: Validating Props with PropTypes
jsximport PropTypes from “prop-types”;
const User = ({ name, age }) => {
return (
<p>
Name: {name} {age && `| Age: ${age}`}
</p>
);
};
// Define prop types
User.propTypes = {
name: PropTypes.string.isRequired, // Required string
age: PropTypes.number, // Optional number
};
//Valid Usage
<User name=”John” age={30} />;
<User name=”Alice” />; // No warning (age is optional)
//Invalid Usage (Logs Warning in Console)
<User name={123} age=”thirty” />;
Example: Validating Props with PropTypes
Advantages of PropTypes :
- Provides runtime validation.
- Useful for JavaScript projects.
- It Helps detect incorrect data types.
Best Practices for Props Validation :
- Use TypeScript for stricter, compile-time validation (preferred).
- Use PropTypes if working on JavaScript projects.
- Make props required when necessary (e.g., is required).
- Use defaultProps to define default values.
TypeScript in Node JS
TypeScript is a strongly typed programming language that builds on JavaScript, adding static type definitions. It is widely used in Node.js applications to improve code quality, maintainability, and developer productivity.
javascriptCopy codeimport { makeAutoObservable } from ‘mobx’;
class CounterStore
{
count = 0;
constructor()
{
makeAutoObservable(this);
}
increment()
{
this.count++;
}
decrement()
{
this.count–;
}
}
const counterStore = new CounterStore();
export default counterStore;
1. Why Use TypeScript in Node.js?
- Helps catch errors at compile time rather than runtime.
- Type annotations make the code more understandable.
- Works well with modern IDEs, offering features like autocompletion and IntelliSense.
- Reduces bugs and makes code easier to refactor.
- Ideal for large-scale applications.
2. Setting Up TypeScript in a Node.js Project
Step 1: Install Node.js and Initialize a Project
Ensure Node.js is installed. Then, create a new project and initialize a package.json file:
my-node-app && cd my-node-app
npm init -y
Step 2: Install TypeScript and Required Dependencies
Install TypeScript globally or locally within the project:
npm install –save-dev typescript ts-node @types/node
- typescript: Compiler for TypeScript code.
- ts-node: Enables running TypeScript files directly without pre-compiling.
- @types/node: Provides type definitions for Node.js APIs.
Step 3: Initialize a TypeScript Configuration File
Generate a tsconfig.json file with default settings:
npx tsc –init
This file controls TypeScript’s behavior in the project. Key settings include:
jsonCopyEdit{
“compilerOptions”: {
“target”: “ES6”,
“module”: “CommonJS”,
“outDir”: “./dist”,
“rootDir”: “./src”,
“strict”: true
}
}
- target: Specifies ECMAScript version.
- module: Uses CommonJS for compatibility with Node.js.
- outDir: Compiles TypeScript files into the dist directory.
- rootDir: Source files are stored in the src directory.
- strict: Enables strict type checking.
Step 4: Create and Run a TypeScript File
- Create a src/index.ts file:
const greet = (name: string): string => {
return `Hello, ${name}`;
};
console.log(greet(“Node.js with TypeScript”));
2. Run the TypeScript file using ts-node:
npx ts-node src/index.ts
Alternatively, compile TypeScript to JavaScript and run it:
npx tsc
node dist/index.js
3. Using TypeScript with Express.js
To build a REST API, install Express and its type definitions:
npm install express
npm install –save-dev @types/express
Create an src/server.ts file:
import express, { Request, Response } from “express”;
const app = express();
const port = 3000;
app.get(“/”, (req: Request, res: Response) => {
res.send(“Hello from TypeScript and Express”);
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
Run the Server Using :
npx ts-node src/server.ts
4. Best Practices for Using TypeScript in Node.js
- Use TypeScript interfaces and types for better structure.
- Enable strict mode in tsconfig.json for enhanced type safety.
- Organize files using modular folder structures.
- Use eslint and prettier for code consistency.
- Implement error handling for robustness.
Best Practices for Using TypeScript with React as a Beginner
- Start with a TypeScript template when creating a React app to avoid manual setup.
- Use TypeScript interfaces or types to define the expected props for your components.
- TypeScript can often detect types automatically, so avoid unnecessary type annotations.
- Turn on “strict”: true in tsconfig.json for better type safety.
- Use React.FC for Functional Components, this makes it clear that the component is a function and can accept props.
- Define multiple possible types using | and make certain props optional when needed.
- When using useState, specify the correct type to prevent unexpected values.
- Avoid magic strings by defining enums or constants for predictable values.
- Ensure that useEffect, useContext, and other hooks have correctly typed dependencies.
- Install @types packages for third-party libraries to get proper TypeScript support.
- Write reusable and well-typed components to improve code maintainability.
- Use any only as a last resort; prefer unknown or specific types whenever possible.
- Instead of default props, use optional types or provide default values within the component.
- Improve your code by refining types and making your project more maintainable.
- Configure ESLint and Prettier with TypeScript rules to maintain clean and error-free code.
State TypeScript vs JSX
Both TypeScript and JSX are widely used in React development, but they serve different purposes. Below is a comparison of TypeScript and JSX to clarify their roles in a React project.
1. What is TypeScript ?
- TypeScript is a strongly typed programming language that extends JavaScript.
- It provides static type checking, improving code reliability and maintainability.
- It helps catch errors during development rather than at runtime.
2. What is JSX?
- JSX (JavaScript XML) is a syntax extension for JavaScript that allows writing HTML-like code inside JavaScript files.
- JSX makes it easier to create React components by visually structuring the UI.
- It is transpiled to JavaScript using Babel before execution in the browser.
3. Key Differences
| Feature | TypeScript | JSX |
|---|---|---|
| Purpose | Adds static typing and enhances JavaScript | Provides a way to write HTML-like code inside JavaScript |
| Usage | Helps in defining types, and interfaces, and improving code quality | Primarily used for rendering UI in React components s |
| Error Handling | Catches errors at compile time | Errors are caught at runtime if not handled properly |
| Syntax | Uses TypeScript-specific syntax and type definitions | Uses HTML-like syntax inside JavaScript |
| Compilation | Compiled to JavaScript before execution | Transpiled by Babel into JavaScript |
| Component Defenation | Requires learning utility classes | Easier with prebuilt UI components |
| Components Based | Focuses on defining the logic, types, and state of components | Helps structure and render the UI of components |
or want to continue reading about React TypeScript Cheat Sheet
4. Using TypeScript and JSX Together
- TypeScript can be used alongside JSX in a .tsx file.
- TypeScript adds type safety to JSX elements and component props.
- Combining TypeScript and JSX improves development efficiency in React projects.
5. When to Use Each ?
- Use TypeScript when you want to ensure better code quality, maintainability, and prevent runtime errors.
- Use JSX when you need a clean and intuitive way to write UI components in React.
- Use Both Together for a fully optimized React development experience.
Prerequisites for Using React TypeScript Cheat Sheet
Before using a React TypeScript cheat sheet, ensure you meet the following prerequisites:
1. Basic Knowledge of JavaScript & ES6+
- Understanding of JavaScript fundamentals (variables, functions, objects, arrays).
- Familiarity with ES6+ features such as arrow functions, destructuring, and promises.
2. Understanding of TypeScript Basics
- Knowledge of TypeScript types (string, number, boolean, array, object, any, etc.).
- Familiarity with interfaces, type aliases, and generics.
- Experience with TypeScript functions, optional parameters, and default values.
3. React Fundamentals
- Basics of React components (functional and class components).
- Understanding of props and state management.
- Experience with React Hooks (useState, useEffect, useContext).
4. Node.js and npm Installed
- Install Node.js (LTS version recommended).
- Use npm or yarn for package management.
Conclusion:
Using TypeScript with React enhances the development experience by providing static type checking, improving code quality, and reducing runtime errors.
By understanding TypeScript basics, JSX, and React fundamentals, developers can write scalable and maintainable applications.
Setting up TypeScript in a React project ensures better type safety, making debugging easier and improving overall performance.
Following best practices, leveraging TypeScript features like interfaces, type annotations, and type inference, and using the right tools such as VS Code and ESLint can significantly boost productivity.
Whether you are a beginner or an experienced developer, combining TypeScript with React is a smart choice for building effective and efficient applications.
FAQ's (Frequently asked Questions)
React Type Script Cheat Sheet
TypeScript in React is a statically typed programming language that enhances JavaScript by adding type safety. It helps catch errors during development, improves code maintainability, and enhances the overall development experience. React components can be written in TypeScript using .tsx files.
You can install TypeScript in an existing React project using:
npm install –save-dev typescript @types/react @types/react-dom
If you are creating a new project, use:
npx create-react-app my-app –template typescript
- Improved code maintainability.
- Early detection of errors through static typing.
- Better IDE support with auto-completion and error detection.
- Enhanced readability and documentation.
- Safer refactoring of code.
- JSX (JavaScript XML) is used in React to write HTML-like syntax inside JavaScript files (.js or .jsx).
- TSX (TypeScript XML) is similar to JSX but includes TypeScript features. It is used in .tsx files to provide type safety.
You can define types using interfaces or type aliases:
interface Props {
name: string;
age?: number; // Optional prop
}
const User: React.FC<Props> = ({ name, age }) => {
return <p>{name} is {age} years old.</p>;
};
When using useState, specify the expected type:
const [count, setCount] = useState<number>(0);
- Interface is used to define object shapes and can be extended.
- Type is more flexible and can define unions, intersections, and primitive types.
Both can be used for defining props and state in React.
You can type events like this:
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
console.log(“Button clicked”);
};
This ensures TypeScript recognizes the event type correctly.
Each hook should have a specific type:
const [name, setName] = useState<string>(“John”);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setName(event.target.value);
};
No, TypeScript is optional. However, using TypeScript provides better code quality, fewer runtime errors, and a more scalable codebase, making it highly recommended for large projects.
Hope you found good understanding about React Typescript Cheat Sheet, with detailed explanations. Hope this helps you.