Using TypeScript for Type-Safe React Native Development

Course: React Native Training

Topic: Using TypeScript for Type-Safe React Native Development

Course Link: React Native Training at JustAcademy

Demo Link: Register for a Free Course Demo

JustAcademy Website: Visit JustAcademy

1. Introduction to TypeScript in React Native

TypeScript is a programming language built on JavaScript that adds static type checking. It helps developers describe the expected structure of variables, functions, objects, API responses, component properties, and application state. TypeScript code is transformed into JavaScript before it runs, so React Native applications continue to execute JavaScript on their target platforms.

In React Native development, TypeScript makes it easier to build applications that are reliable, maintainable, and easier to understand as they grow. It helps catch many mistakes during development rather than waiting for an error to occur on a user's device.

1.1 What Is Type Safety?

Type safety means using types to restrict the kinds of values that can be assigned, passed to functions, or returned from operations. For example, a variable declared as a number should not receive a string unless the type explicitly permits it.

// JavaScript
let age = 25;
age = "twenty-five"; // JavaScript permits this assignment.

// TypeScript
let userAge: number = 25;
// userAge = "twenty-five"; // Type error

TypeScript reports the invalid assignment during development. The exact protection depends on the types written, the compiler settings, and whether external data has been validated.

1.2 Why Use TypeScript in React Native?

• Early error detection: Identify many incorrect assignments, arguments, and return values before running the application.
• Clear component contracts: Define which props a component accepts and which are required.
• Better editor support: Receive autocomplete, navigation to definitions, and inline type diagnostics.
• Safer refactoring: Find places that need updating when a data model or function signature changes.
• Improved collaboration: Make data structures and function expectations easier for team members to understand.
• More maintainable code: Keep complex navigation, state management, and API integration easier to reason about.

2. Learning Objectives

After completing this topic, learners should be able to:

• Explain the role of TypeScript in React Native development.
• Configure a React Native project to use TypeScript.
• Understand basic types, type inference, arrays, objects, unions, and literal types.
• Create type-safe functional components and reusable props interfaces.
• Use types for React state, event handlers, lists, and navigation parameters.
• Describe API response types and validate data received from external services.
• Use generics, utility types, and type narrowing in practical code.
• Recognize common TypeScript errors and apply effective debugging practices.

3. Setting Up TypeScript in a React Native Project

New React Native projects created with current recommended tooling can include TypeScript support. If you are working in an existing project, check its setup and follow the official instructions for the framework and version you use.

3.1 Important Project Files

3.2 JavaScript and TypeScript File Extensions

• .js: JavaScript source file.
• .jsx: JavaScript source file containing JSX.
• .ts: TypeScript source file without JSX.
• .tsx: TypeScript source file containing JSX, commonly used for React components.

For example, a reusable data model can be stored in User.ts, while a component that renders a user profile can be stored in UserProfile.tsx.

3.3 Example TypeScript Configuration

A typical React Native TypeScript project uses a configuration compatible with its React Native or framework tooling. The following illustrates common options; it is not a replacement for the configuration supplied by your project template.

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "noEmit": true,
    "skipLibCheck": true
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Important: Existing React Native projects may need additional settings, type definitions, or framework-specific configuration. Prefer the generated configuration and official setup instructions for the version you are using.

4. Understanding Basic TypeScript Types

TypeScript supports several primitive types that describe the values used in an application.

4.1 Type Inference

TypeScript can often determine a variable's type from its initial value. This is called type inference.

let username = "Riya";
let points = 100;
let isLoggedIn = false;

// Inferred types:
// username: string
// points: number
// isLoggedIn: boolean

// username = 42; // Type error

Use explicit annotations when they improve clarity, define a public contract, or prevent an overly narrow inferred type. You do not need to annotate every variable when TypeScript can infer its type accurately.

4.2 Arrays

Arrays can be declared using the element type followed by square brackets or the generic Array form.

const productNames: string[] = ["Phone", "Tablet", "Watch"];
const prices: Array<number> = [12000, 18000, 5000];

productNames.push("Laptop");
// productNames.push(100); // Type error

4.3 Object Types

Object types define the properties an object should contain and the expected type of each property.

const user: {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
} = {
  id: 1,
  name: "Anaya",
  email: "[email protected]",
  isActive: true
};

For objects used across multiple components or files, an interface or type alias is usually easier to maintain.

5. Interfaces and Type Aliases

Interfaces and type aliases both describe data shapes. They are commonly used to model users, products, settings, API data, and component props.

5.1 Defining an Interface

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

const currentUser: User = {
  id: 101,
  name: "Meera",
  email: "[email protected]",
  isActive: true
};

5.2 Defining a Type Alias

type Product = {
  id: string;
  title: string;
  price: number;
  inStock: boolean;
};

const product: Product = {
  id: "P101",
  title: "Wireless Headphones",
  price: 2499,
  inStock: true
};

5.3 Interface vs. Type Alias

Both are valid for defining component props. Choose a consistent style for your project and use the construct that best describes the data.

5.4 Optional and Readonly Properties

interface Profile {
  readonly id: number;
  name: string;
  bio?: string;
}

const profile: Profile = {
  id: 1,
  name: "Kabir"
};

profile.name = "Kabir Sharma";
// profile.id = 2; // Type error: readonly property

The ? symbol means a property may be omitted. A readonly property prevents reassignment through that typed reference; it does not deeply freeze the object at runtime.

6. Creating Type-Safe React Native Components

React Native components receive data and callbacks through props. Defining their types makes it clear what a component needs and helps prevent missing or incorrectly typed values.

6.1 Basic Component with Typed Props

import React from "react";
import { Text, View } from "react-native";

interface WelcomeProps {
  name: string;
  message?: string;
}

const WelcomeCard: React.FC<WelcomeProps> = ({
  name,
  message = "Welcome to our app!"
}) => {
  return (
    <View>
      <Text>Hello, {name}</Text>
      <Text>{message}</Text>
    </View>
  );
};

export default WelcomeCard;

Here, name is required, while message is optional and has a default value. Modern React code can also type props directly on the function parameter without using React.FC.

type GreetingProps = {
  name: string;
};

function Greeting({ name }: GreetingProps) {
  return <Text>Hello, {name}!</Text>;
}

6.2 Passing Props Correctly

<WelcomeCard name="Ishita" />

<WelcomeCard
  name="Rahul"
  message="Your dashboard is ready."
/>

// Missing the required name prop:
// <WelcomeCard />

// Wrong type for name:
// <WelcomeCard name={123} />

TypeScript reports errors when required props are missing or values do not match their declared types.

6.3 Typing Reusable Button Components

import React from "react";
import { Pressable, Text, StyleSheet } from "react-native";

interface AppButtonProps {
  title: string;
  onPress: () => void;
  disabled?: boolean;
}

export function AppButton({
  title,
  onPress,
  disabled = false
}: AppButtonProps) {
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      style={[styles.button, disabled && styles.disabled]}
      accessibilityRole="button"
      accessibilityState={{ disabled }}
    >
      <Text style={styles.label}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    padding: 12,
    backgroundColor: "#246BFD",
    borderRadius: 8
  },
  disabled: {
    opacity: 0.5
  },
  label: {
    color: "#FFFFFF",
    textAlign: "center"
  }
});

The callback type () => void indicates that the component expects a function that can be called without arguments and whose return value is not used. Reusable components like this can provide consistent behavior throughout an application.

7. Typing React State with useState

The useState hook stores values that change over time. TypeScript can infer the state type from the initial value, but explicit generic types are useful when the initial value does not represent every possible state.

7.1 Number State

import React, { useState } from "react";
import { View, Text, Button } from "react-native";

export default function CounterScreen() {
  const [count, setCount] = useState<number>(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button
        title="Increase"
        onPress={() => setCount(previous => previous + 1)}
      />
    </View>
  );
}

7.2 State That May Be Empty

interface User {
  id: number;
  name: string;
}

const [user, setUser] = useState<User | null>(null);

// Later, after obtaining a user:
setUser({ id: 1, name: "Aarav" });

// Check before accessing properties:
if (user !== null) {
  console.log(user.name);
}

The union type User | null accurately represents the possibility that no user has been loaded yet.

7.3 Array State

interface Todo {
  id: string;
  title: string;
  completed: boolean;
}

const [todos, setTodos] = useState<Todo[]>([]);

function addTodo(title: string) {
  const newTodo: Todo = {
    id: String(Date.now()),
    title,
    completed: false
  };

  setTodos(previous => [...previous, newTodo]);
}

Use immutable updates when changing arrays and objects in React state. This helps React identify changes and keeps state updates predictable.

8. Type-Safe Text Inputs and Event Handlers

React Native uses component props such as onChangeText and onPress rather than browser DOM events for common interactions. React Native component types provide the expected callback signatures.

8.1 TextInput Example

import React, { useState } from "react";
import { View, Text, TextInput } from "react-native";

export default function NameForm() {
  const [name, setName] = useState<string>("");

  return (
    <View>
      <Text>Enter your name</Text>
      <TextInput
        value={name}
        onChangeText={setName}
        placeholder="Your name"
        autoCapitalize="words"
      />
      <Text>Hello, {name || "Guest"}</Text>
    </View>
  );
}

8.2 Typing a Callback Function

type SaveHandler = (value: string) => void;

interface SaveFieldProps {
  value: string;
  onSave: SaveHandler;
}

function saveValue(value: string): void {
  console.log("Saved:", value);
}

Explicit callback types are particularly useful when passing functions between parent and child components or sharing behavior across screens.

9. Union Types and Literal Types

Union types allow a value to have one of several possible types. Literal types restrict a value to specific strings, numbers, or booleans. These features are useful for screen modes, loading states, selected tabs, and API status values.

9.1 Union Types

type Identifier = string | number;

function printIdentifier(id: Identifier): void {
  console.log(id);
}

printIdentifier("USER-101");
printIdentifier(101);

9.2 Literal Types

type ThemeMode = "light" | "dark" | "system";

const [themeMode, setThemeMode] = useState<ThemeMode>("system");

// Valid:
// setThemeMode("dark");

// Invalid:
// setThemeMode("blue");

9.3 Type Narrowing

Type narrowing means checking a value so TypeScript can determine which type is currently possible.

function formatId(id: string | number): string {
  if (typeof id === "number") {
    return `ID-${id}`;
  }

  return id.toUpperCase();
}

Checks such as typeof, equality comparisons, and discriminant properties help make operations safe when working with union types.

10. Modeling Loading, Success, and Error States

Applications often need to represent several states while loading data. A discriminated union can express these states more precisely than several unrelated booleans.

type RequestState<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; message: string };

function describeRequest<T>(state: RequestState<T>): string {
  switch (state.status) {
    case "idle":
      return "Not started";
    case "loading":
      return "Loading...";
    case "success":
      return "Request completed";
    case "error":
      return state.message;
  }
}

When status is "success", the data is available. When it is "error", the message is available. This structure helps prevent invalid combinations such as an error state with missing error details.

11. Type-Safe Lists with FlatList

React Native's FlatList efficiently renders scrollable lists. Supplying the item type helps TypeScript check the renderItem callback and related list operations.

import React from "react";
import { FlatList, Text, View } from "react-native";

interface Product {
  id: string;
  name: string;
  price: number;
}

const products: Product[] = [
  { id: "1", name: "Keyboard", price: 1200 },
  { id: "2", name: "Mouse", price: 700 }
];

export default function ProductList() {
  return (
    <FlatList<Product>
      data={products}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>{item.name}</Text>
          <Text>₹{item.price}</Text>
        </View>
      )}
    />
  );
}

Each item is checked against the Product structure. Use stable unique identifiers for list keys whenever possible.

12. Typing Navigation Parameters

Navigation libraries such as React Navigation provide TypeScript support for screen names and route parameters. Correct navigation types help prevent misspelled route names and incorrect parameter values.

12.1 Defining a Route Parameter List

type RootStackParamList = {
  Home: undefined;
  ProductDetails: { productId: string };
  Search: { query?: string } | undefined;
};

Here, Home has no route parameters, ProductDetails requires a product ID, and Search can be opened without parameters or with an optional query.

12.2 Typing a Screen

The following pattern illustrates a typed screen using React Navigation's native stack types. Install and configure the navigation packages required by your project before using these imports.

import React from "react";
import { View, Text } from "react-native";
import type { NativeStackScreenProps } from
  "@react-navigation/native-stack";

type RootStackParamList = {
  Home: undefined;
  ProductDetails: { productId: string };
};

type ProductDetailsProps =
  NativeStackScreenProps<RootStackParamList, "ProductDetails">;

export function ProductDetailsScreen({
  route
}: ProductDetailsProps) {
  return (
    <View>
      <Text>Product ID: {route.params.productId}</Text>
    </View>
  );
}

12.3 Navigating with Correct Parameters

// Correct:
navigation.navigate("ProductDetails", { productId: "P101" });

// Incorrect route name or missing required parameters
// should be reported by TypeScript when navigation is
// typed correctly.

Use the parameter-list and screen-prop types recommended by the navigation library version installed in your application. Different navigator types may use different helper types.

13. Creating Type-Safe API Services

React Native applications frequently retrieve information from REST APIs. TypeScript can describe the expected data format, but a type annotation alone does not validate data received over a network. External data should be treated as untrusted until it has been checked.

13.1 Defining an API Data Model

interface ApiUser {
  id: number;
  name: string;
  email: string;
}

async function fetchUsers(): Promise<ApiUser[]> {
  const response = await fetch("https://example.com/api/users");

  if (!response.ok) {
    throw new Error(`Request failed: ${response.status}`);
  }

  const data: unknown = await response.json();

  if (!Array.isArray(data)) {
    throw new Error("Unexpected API response");
  }

  // Array.isArray only confirms that the outer value
  // is an array. Each element still needs validation.
  return data.map((item: unknown): ApiUser => {
    if (
      typeof item !== "object" ||
      item === null ||
      !("id" in item) ||
      !("name" in item) ||
      !("email" in item) ||
      typeof item.id !== "number" ||
      typeof item.name !== "string" ||
      typeof item.email !== "string"
    ) {
      throw new Error("Invalid user record");
    }

    return {
      id: item.id,
      name: item.name,
      email: item.email
    };
  });
}

This example validates the essential fields before treating each record as an ApiUser. For complex schemas, a runtime validation library can reduce repetitive validation code and provide clearer error messages.

13.2 Handling API Errors

async function loadUsers(): Promise<void> {
  try {
    const users = await fetchUsers();
    console.log("Users loaded:", users.length);
  } catch (error: unknown) {
    if (error instanceof Error) {
      console.error(error.message);
    } else {
      console.error("An unexpected error occurred");
    }
  }
}

Using unknown for caught errors encourages safe checks before accessing error properties. Avoid assuming every thrown value is an instance of Error.

14. Generics in TypeScript

Generics allow functions, interfaces, and types to work with different data types while preserving type information. They are useful for reusable API helpers, list components, and common response structures.

14.1 Generic Function

function getFirstItem<T>(items: T[]): T | undefined {
  return items[0];
}

const firstNumber = getFirstItem<number>([10, 20, 30]);
const firstName = getFirstItem<string>(["Asha", "Rohan"]);

14.2 Generic API Response

interface ApiResponse<T> {
  data: T;
  message: string;
  success: boolean;
}

interface Product {
  id: string;
  title: string;
}

const productResponse: ApiResponse<Product[]> = {
  data: [{ id: "P1", title: "Smart Watch" }],
  message: "Products loaded",
  success: true
};

Generics allow a shared response structure to represent product data, user data, or other data without losing the specific type of its contents.

15. Utility Types for Cleaner Code

TypeScript includes utility types that transform existing types. These can reduce duplication when defining update payloads, partial forms, and read-only data structures.

15.1 Example: Updating a User

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

type UserUpdate = Partial<Omit<User, "id">>;

function updateUser(id: number, changes: UserUpdate): void {
  console.log("Updating user:", id, changes);
}

updateUser(1, { name: "New Name" });
updateUser(1, { isActive: false });

// An update can include one or more permitted fields.

Utility types describe compile-time contracts. They do not automatically remove fields from objects or enforce permissions at runtime; validate update data and authorization in the appropriate application or server layer.

16. Avoiding Any and Using Unknown

The any type disables many of TypeScript's checks for a value. The unknown type is safer when the type of a value is not yet known because you must narrow or validate it before performing type-specific operations.

16.1 Example of Any

let apiData: any = "Hello";

apiData.toUpperCase();
apiData.someUnknownMethod(); // TypeScript does not protect this call.

16.2 Example of Unknown

let apiData: unknown = "Hello";

if (typeof apiData === "string") {
  console.log(apiData.toUpperCase());
}

// apiData.toUpperCase();
// Error: the value must be narrowed first.

Prefer unknown when receiving data from external systems or handling values whose structure has not been established. Use any sparingly, especially in shared models, API layers, and reusable components.

17. Type-Safe Forms and Validation

Forms commonly contain text, email addresses, passwords, selection values, and validation messages. TypeScript can define the expected form data, while runtime validation checks whether the user's input meets the application's rules.

17.1 Defining Form Data

interface RegistrationForm {
  fullName: string;
  email: string;
  age: number | null;
}

const initialForm: RegistrationForm = {
  fullName: "",
  email: "",
  age: null
};

17.2 Validating Input

function validateRegistration(
  form: RegistrationForm
): string[] {
  const errors: string[] = [];

  if (form.fullName.trim().length === 0) {
    errors.push("Name is required.");
  }

  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
    errors.push("Enter a valid email address.");
  }

  if (form.age !== null && form.age < 18) {
    errors.push("You must be at least 18.");
  }

  return errors;
}

The email check above is a basic example, not a complete email verification method. Production applications should use appropriate validation rules and validate sensitive or important data on the server as well.

17.3 Handling TextInput Values

React Native's TextInput provides text as a string. Convert numeric input carefully instead of assuming the string is already a number.

function parseAge(value: string): number | null {
  if (value.trim() === "") {
    return null;
  }

  const age = Number(value);

  if (!Number.isInteger(age) || age < 0) {
    return null;
  }

  return age;
}

18. Type-Safe Styling and Theme Definitions

TypeScript can help define a consistent theme system for colors, typography, spacing, and other design tokens. This makes it easier to share visual rules across screens and reusable components.

18.1 Creating a Theme Type

type AppTheme = {
  colors: {
    primary: string;
    background: string;
    text: string;
    border: string;
  };
  spacing: {
    small: number;
    medium: number;
    large: number;
  };
};

const lightTheme: AppTheme = {
  colors: {
    primary: "#246BFD",
    background: "#FFFFFF",
    text: "#202124",
    border: "#DDDDDD"
  },
  spacing: {
    small: 8,
    medium: 16,
    large: 24
  }
};

18.2 Using Theme Values

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  container: {
    padding: lightTheme.spacing.medium,
    backgroundColor: lightTheme.colors.background
  },
  heading: {
    color: lightTheme.colors.text,
    fontSize: 20
  }
});

For applications that support multiple themes, pass the active theme through context or a theme provider. The type should describe the shared contract for each theme so that a missing token is detected during development.

19. Organizing TypeScript Files in a React Native Project

A clear folder structure separates UI components, application features, data access, navigation, and shared models. The right structure depends on the size of the application and the team's workflow.

19.1 Example Folder Structure

src/
  components/
    AppButton.tsx
    LoadingIndicator.tsx
  features/
    products/
      ProductListScreen.tsx
      ProductDetailsScreen.tsx
      product.types.ts
      product.service.ts
  navigation/
    RootNavigator.tsx
    navigation.types.ts
  services/
    apiClient.ts
  theme/
    theme.ts
  types/
    common.types.ts
App.tsx

19.2 Recommended Responsibilities

Avoid putting every type in one large global file. Keep feature-specific types near the feature that owns them, and extract shared types when they genuinely need to be reused.

20. Type-Safe State Management

As an application grows, state may be managed with React Context, reducers, or a state-management library. TypeScript can define state structures and actions so that updates follow an expected contract.

20.1 Typing useReducer

import { useReducer } from "react";

interface CartItem {
  id: string;
  quantity: number;
}

interface CartState {
  items: CartItem[];
}

type CartAction =
  | { type: "add"; item: CartItem }
  | { type: "remove"; id: string }
  | { type: "clear" };

const initialCart: CartState = {
  items: []
};

function cartReducer(
  state: CartState,
  action: CartAction
): CartState {
  switch (action.type) {
    case "add":
      return {
        ...state,
        items: [...state.items, action.item]
      };

    case "remove":
      return {
        ...state,
        items: state.items.filter(
          item => item.id !== action.id
        )
      };

    case "clear":
      return { items: [] };
  }
}

function useCart() {
  return useReducer(cartReducer, initialCart);
}

The action union limits the supported action names and specifies the data required by each action. TypeScript can report incorrect action payloads and incomplete handling when the code and compiler settings support exhaustive checking.

20.2 Avoiding Invalid State

Prefer explicit state models that describe valid application conditions. For example, a discriminated union for loading and success states is often clearer than maintaining separate isLoading, hasError, and hasData booleans that can accidentally represent contradictory conditions.

21. TypeScript with Third-Party Libraries

React Native projects often use navigation libraries, storage packages, animation tools, form libraries, and other dependencies. Type information may be included in a package or supplied by a separate type-definition package.

21.1 Checking Type Support

• Review the package documentation to confirm TypeScript support.
• Check whether the package includes its own declarations.
• Install a community-maintained type package only when one is required and available.
• Use the package's documented types instead of recreating complex internal types.
• Check that the package version is compatible with the React Native and TypeScript versions used by the project.

21.2 Importing Types

import type { User } from "./user.types";

function showUser(user: User): string {
  return user.name;
}

The import type syntax makes it clear that the import is used only for type checking. TypeScript type declarations are generally removed during compilation, so they do not provide runtime validation by themselves.

22. Strict Type Checking and Compiler Settings

TypeScript provides compiler options that help identify potentially unsafe code. A strict configuration is useful for new projects and can be adopted gradually in an existing JavaScript codebase.

Some options may already be enabled by the project's configuration. Review your framework's recommended settings before changing compiler options, and enable stricter checks in stages if a large migration would otherwise block development.

23. Common TypeScript Errors in React Native

23.1 Debugging Workflow

1. Read the complete TypeScript error message.
2. Locate the value, property, argument, or component prop identified by the compiler.
3. Inspect the type expected by the receiving function or component.
4. Check whether the value can be null, undefined, or a different type.
5. Correct the data model or add a meaningful runtime check.
6. Run the project's type-checking command and test the affected screen.

Do not silence every error with as any or non-null assertions. These shortcuts can hide real defects instead of solving the underlying problem.

24. Type Assertions and Type Guards

A type assertion tells TypeScript to treat a value as a particular type. It does not transform the value or verify its structure at runtime. Use assertions only when you have sufficient evidence that the value actually matches the asserted type.

24.1 Type Assertion

const inputValue: unknown = "React Native";

const textValue = inputValue as string;

console.log(textValue.toUpperCase());

This example is safe because the actual value is a string. If the value were a number, the assertion would not convert it into a string and calling a string method could fail at runtime.

24.2 A Custom Type Guard

interface User {
  id: number;
  name: string;
}

function isUser(value: unknown): value is User {
  if (typeof value !== "object" || value === null) {
    return false;
  }

  if (!("id" in value) || !("name" in value)) {
    return false;
  }

  return (
    typeof value.id === "number" &&
    typeof value.name === "string"
  );
}

function displayUser(value: unknown): string {
  if (isUser(value)) {
    return value.name;
  }

  return "Invalid user";
}

A type guard combines a runtime check with a type predicate. The predicate should accurately reflect the checks performed so that the application does not trust data that was never validated.

25. Testing TypeScript React Native Components

TypeScript helps detect certain mistakes before tests run, but it does not replace component tests, integration tests, or testing on real devices and simulators.

25.1 What Should Be Tested?

• Whether the component displays the correct content.
• Whether button presses trigger the expected callback.
• Whether loading, empty, success, and error states render correctly.
• Whether forms display validation errors for invalid input.
• Whether API failures are handled gracefully.
• Whether navigation passes the correct data between screens.

25.2 Example Test Concept

// Example using a React Native Testing Library setup.
// Exact matchers and configuration depend on the project.

expect(screen.getByText("Welcome to our app!"))
  .toBeTruthy();

Install and configure the testing tools appropriate for your project before using test examples. Keep the component's types and the test data consistent so that invalid test fixtures are detected during development.

26. Performance and Maintainability Considerations

TypeScript improves development-time checking, but adding types does not automatically make an application faster. React Native performance still depends on rendering behavior, state updates, network requests, memory use, and native interactions.

• Use specific types to make code easier to understand and refactor.
• Keep component props focused rather than passing large, unrelated objects everywhere.
• Use type inference where it is clear and reliable.
• Use generics for genuinely reusable logic instead of creating unnecessarily complicated type definitions.
• Validate external data at runtime.
• Keep business logic separate from UI rendering where appropriate.
• Use profiling and performance testing to identify actual bottlenecks.
• Keep dependencies and type declarations compatible with the installed package versions.

27. Mini Project: Type-Safe Product Listing App

Build a small React Native screen that displays products, tracks a selected product, and handles loading and error states using TypeScript.

27.1 Project Requirements

• Create a Product interface containing an ID, name, price, and availability.
• Create a reusable product-card component with typed props.
• Display products in a typed FlatList.
• Use typed state to track the selected product.
• Represent loading, success, and error states using a discriminated union.
• Validate API data before storing it in state.
• Display a message when no products are available.

27.2 Product Model

export interface Product {
  id: string;
  name: string;
  price: number;
  inStock: boolean;
}

27.3 Product Card

import React from "react";
import { View, Text, Pressable } from "react-native";
import type { Product } from "./product.types";

interface ProductCardProps {
  product: Product;
  onSelect: (product: Product) => void;
}

export function ProductCard({
  product,
  onSelect
}: ProductCardProps) {
  return (
    <Pressable onPress={() => onSelect(product)}>
      <View>
        <Text>{product.name}</Text>
        <Text>₹{product.price}</Text>
        <Text>
          {product.inStock ? "In stock" : "Out of stock"}
        </Text>
      </View>
    </Pressable>
  );
}

27.4 Selected Product State

const [selectedProduct, setSelectedProduct] =
  useState<Product | null>(null);

function handleSelect(product: Product): void {
  setSelectedProduct(product);
}

27.5 Expected Learning Outcomes

By completing this project, learners practise interface design, typed component props, callback functions, union types, React state, API data validation, and reusable UI development. The same concepts can be extended to shopping carts, inventory management, booking systems, and other mobile applications.

28. Best Practices for Type-Safe React Native Development

1. Enable strict checking where practical. Adopt strict compiler options for new projects and plan a gradual migration for existing codebases.
2. Define clear data models. Use interfaces or type aliases for users, products, forms, navigation parameters, and API structures.
3. Type component props. Make required and optional values explicit and document callback expectations.
4. Prefer inference for obvious values. Add annotations when they improve clarity or define a public contract.
5. Avoid excessive any. Prefer unknown and type guards when handling values of uncertain type.
6. Validate external input. TypeScript types are not runtime checks for API responses, persisted data, or user input.
7. Use discriminated unions for meaningful states. Represent valid loading, success, and error states explicitly.
8. Keep types organized. Place feature-specific types close to their feature and share only types that need to be reused.
9. Use assertions carefully. Assertions should reflect verified facts, not be used simply to suppress compiler errors.
10. Test behavior as well as types. Run component tests and check application behavior on supported platforms.
11. Check compatibility. Follow the documentation for the installed React Native, navigation, and TypeScript versions.
12. Review errors before fixing them. Correct the source of a type mismatch instead of hiding it with broad casts.

29. Practice Exercises

1. Create an interface named Student with ID, name, course, and enrollment status.
2. Create a typed React Native component that receives a student's name and course as props.
3. Build a counter screen using useState with a numeric state type.
4. Create an optional prop that displays a subtitle only when supplied.
5. Define a union type for authentication status: "signedOut", "loading", or "signedIn".
6. Build a typed list of tasks and render it using FlatList.
7. Create a typed navigation parameter list for Home, Profile, and ProductDetails screens.
8. Write a generic function that returns the last item of an array, or undefined when the array is empty.
9. Use Partial to define an update type for a user profile.
10. Receive an API response as unknown and validate the fields before using the data.
11. Build a registration form with typed state and runtime input validation.
12. Identify and fix five intentional TypeScript errors in a sample React Native component.

30. Interview Questions and Answers

Q1. What is TypeScript?

Answer: TypeScript is a programming language built on JavaScript that adds static type checking and other development features. It is commonly transformed into JavaScript for execution.

Q2. Why use TypeScript in React Native?

Answer: It helps detect type-related mistakes early, improves editor assistance, documents component contracts, and makes refactoring and team collaboration easier.

Q3. What is the difference between .ts and .tsx?

Answer: The .ts extension is used for TypeScript files without JSX, while .tsx is used for TypeScript files that contain JSX, such as React components.

Q4. What is an interface?

Answer: An interface describes the expected structure of an object, including its properties and their types. It is often used for component props and data models.

Q5. What is the difference between interface and type?

Answer: Both can describe object structures. Type aliases can also represent unions, intersections, and other type expressions. Interfaces support declaration merging and can be extended using extends.

Q6. What are optional properties?

Answer: Optional properties use the ? symbol and may be omitted from an object. Code should handle the possibility that an optional property is undefined.

Q7. How do you type useState?

Answer: TypeScript often infers the type from the initial value. An explicit generic such as useState<User | null>(null) is useful when state can hold several kinds of values.

Q8. What is a union type?

Answer: A union type combines multiple possible types using the | operator, such as string | number.

Q9. What is type narrowing?

Answer: Type narrowing uses checks such as typeof, equality checks, or property checks to establish which member of a union type is valid in a particular part of the code.

Q10. What is the difference between any and unknown?

Answer: any largely disables type checking for a value. unknown requires the value to be checked or narrowed before type-specific operations are performed.

Q11. What are generics?

Answer: Generics let functions, types, and components work with different data types while preserving the relationship between inputs and outputs.

Q12. Do TypeScript types validate API responses at runtime?

Answer: No. TypeScript types provide compile-time checks. API responses must be validated at runtime before the application trusts their structure.

Q13. How do you type a FlatList?

Answer: Define an item interface and provide it as a generic to FlatList, such as FlatList<Product>. This helps type the list data and rendering callback.

Q14. How do you type navigation parameters?

Answer: Define a route parameter list that maps each screen name to its expected parameters, then use the navigation library's supported screen and navigation types.

Q15. What is strict mode?

Answer: The strict compiler option enables a group of stricter checks that help identify unsafe or ambiguous code. Individual strict options can also be configured separately.

Q16. Does TypeScript improve runtime performance?

Answer: Not automatically. Type annotations are generally removed during compilation. TypeScript mainly improves development-time safety and maintainability; runtime performance depends on the actual application code and architecture.

31. Quick Revision Checklist

• Understand primitive types, arrays, object types, and type inference.
• Know how to define interfaces, type aliases, optional properties, and readonly properties.
• Create React Native components with typed props and callbacks.
• Use explicit state types when values can be null or change between several shapes.
• Use union types and discriminated unions to model valid application states.
• Type lists, forms, navigation parameters, and reusable API functions.
• Understand generics and common utility types such as Partial, Pick, and Omit.
• Prefer unknown over unnecessary any when a value's type is not known.
• Validate API data and user input at runtime.
• Run type checks and tests before delivering changes.

32. Official Learning Resources

• TypeScript Handbook: Everyday Types — Learn primitive types, arrays, functions, and object types.
• TypeScript Handbook: Narrowing — Understand type guards and narrowing union types.
• TypeScript Handbook: Generics — Learn to build reusable functions and type structures.
• TypeScript Handbook: Utility Types — Explore built-in types for transforming existing type definitions.
• React Native: Using TypeScript — Review React Native's TypeScript setup guidance.
• React Navigation: TypeScript Configuration — Learn about typed navigation and route parameters.

33. Conclusion

TypeScript is an important tool for building maintainable React Native applications. It helps developers describe data models, define component contracts, type state and navigation, structure API services, and identify many mistakes during development. Features such as interfaces, unions, generics, utility types, and type guards make application code clearer and easier to maintain.

However, compile-time types do not replace runtime validation, automated testing, or careful error handling. The most effective approach combines clear types, strict checking where practical, validated external data, reusable components, and thorough testing across the platforms supported by the application.

To learn more about building mobile applications, explore the React Native Training course at JustAcademy, visit the JustAcademy website, or register for a course demo.