Frontend Engineering | VoidX Academy

15. Modules & API Integration

Structuring Large Projects & Fetching Data

You cannot keep all your interfaces in one massive file. Real applications use Modules to separate types. Furthermore, real applications rely heavily on external APIs. You must understand how to strictly type asynchronous operations and network responses.

Modules: Exporting and Importing Types

Just like you export JavaScript functions, you can export TypeScript Interfaces and Types to share them across your project.

// file: src/types/user.ts
export interface User {
  id: string;
  username: string;
}

// file: src/components/UserProfile.tsx
// Using 'import type' is highly recommended. It tells the compiler to 
// completely erase this import from the final JS bundle, saving space.
import type { User } from '../types/user';

const profile: User = { id: "u1", username: "Prince" };

Typing APIs: The Promise Wrapper

When you fetch data from an API, the data does not arrive instantly. The function returns a Promise. In TypeScript, you must explicitly declare that the function returns a Promise, and then specify the shape of the data that the Promise will eventually resolve into using generics: Promise<T>.

// 1. Define the exact shape of the API response
type ApiResponse = {
  data: string;
  status: number;
};

// 2. Wrap the return type in a Promise
async function fetchData(): Promise<ApiResponse> {
  // In a real app, this would be a fetch() call
  return { 
    data: "Hello from the server", 
    status: 200 
  };
}

Typing the Fetch API

The native fetch() API is completely untyped by default (it returns Promise<any>). You must explicitly type the parsed JSON response.

interface Post {
  id: number;
  title: string;
}

async function getPosts(): Promise<Post[]> {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  
  // .json() returns 'any'. We MUST tell TS what it actually is.
  const data: Post[] = await response.json(); 
  
  return data;
}

15. Modules & API Integration

Structuring Large Projects & Fetching Data

Modules: Exporting and Importing Types

Just like you export JavaScript functions, you can export TypeScript Interfaces and Types to share them across your project.

// file: src/types/user.ts
export interface User {
  id: string;
  username: string;
}

// file: src/components/UserProfile.tsx
// Using 'import type' is highly recommended. It tells the compiler to 
// completely erase this import from the final JS bundle, saving space.
import type { User } from '../types/user';

const profile: User = { id: "u1", username: "Prince" };

Typing APIs: The Promise Wrapper

// 1. Define the exact shape of the API response
type ApiResponse = {
  data: string;
  status: number;
};

// 2. Wrap the return type in a Promise
async function fetchData(): Promise<ApiResponse> {
  // In a real app, this would be a fetch() call
  return { 
    data: "Hello from the server", 
    status: 200 
  };
}

Typing the Fetch API

The native fetch() API is completely untyped by default (it returns Promise<any>). You must explicitly type the parsed JSON response.

interface Post {
  id: number;
  title: string;
}

async function getPosts(): Promise<Post[]> {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  
  // .json() returns 'any'. We MUST tell TS what it actually is.
  const data: Post[] = await response.json(); 
  
  return data;
}

15. Modules & API Integration

Structuring Large Projects & Fetching Data

Modules: Exporting and Importing Types

Typing APIs: The Promise Wrapper

Typing the Fetch API

Knowledge Check

15. Modules & API Integration

Structuring Large Projects & Fetching Data

Modules: Exporting and Importing Types

Typing APIs: The Promise Wrapper

Typing the Fetch API

Knowledge Check