Welcome to the foundational module on TypeScript's basic types, specifically tailored for React developers. Understanding these types is crucial for building robust, maintainable, and error-free React applications. This section will cover the fundamental building blocks of TypeScript that you'll use daily.

In React, components manage state and props. TypeScript's type system allows you to define the shape and expected values of this data. This prevents common runtime errors like passing a string where a number is expected, or accessing a property that doesn't exist on an object. This leads to more predictable code and a better developer experience.

TypeScript includes several primitive types that mirror JavaScript's primitives, but with added type safety.

Represents textual data. In React, this is commonly used for component props like labels, titles, or content.

Example:

const greeting: string = 'Hello, React!';

Represents numeric data, including integers and floating-point numbers. Useful for counts, IDs, or numerical values in your components.

Example:

const itemCount: number = 5;

Represents a truth value, either

true

false

Example:

const isLoading: boolean = false;

Example:

let user: string | undefined;

Represents a unique and immutable primitive value, often used as keys for object properties to avoid naming collisions. Less common in basic React component props but useful in more advanced scenarios.

Example:

const uniqueId: symbol = Symbol('id');

Represents whole numbers larger than 2^53 - 1. Useful for handling very large integers, though less common in typical React UI development.

Example:

const largeNumber: bigint = 9007199254740991n;

Beyond primitives, TypeScript offers powerful ways to define more complex data structures, which are essential for defining React component props and state.

Represents a collection of values of the same type. In React, you'll often work with arrays of data to render lists of items.

Example:

const names: string[] = ['Alice', 'Bob', 'Charlie'];

const numbers: Array = [1, 2, 3];

A tuple is an array with a fixed number of elements whose types are known. The type of each element can be different. Useful for functions that return multiple values.

Example:

const userProfile: [string, number] = ['John Doe', 30];

Enums allow you to define a set of named constants. They can be numeric or string-based. Useful for representing a fixed set of states or options.

Example:

enum Status { Pending, Approved, Rejected }

The

any

Example:

let data: any = 42; data = 'hello';

The

void

undefined

void

Example:

function logMessage(message: string): void { console.log(message); }

The

never

Example:

function throwError(message: string): never { throw new Error(message); }

The

object

Record

Example:

function processObject(obj: object) { console.log(obj); }

TypeScript is smart! It can often infer the type of a variable based on the value you assign to it. This means you don't always have to explicitly declare types, making your code cleaner.

However, for function parameters and return types, explicit typing is highly recommended for clarity and robustness, especially in React components.

Sometimes, you might know more about the type of a value than TypeScript does. Type assertions allow you to tell the compiler the type of a value. There are two syntaxes: angle-bracket syntax and the

as

Mastering these basic types is your first step towards leveraging TypeScript effectively in your React projects. They form the foundation for defining props, state, and ensuring your code is predictable and less prone to errors.