typescript_fetch_api_async_get_request_with_interface_typing.ts

1// Define an interface for the expected response shape
2interface Todo {
3  userId: number;
4  id: number;
5  title: string;
6  completed: boolean;
7}
8
9async function fetchTodo(): Promise<void> {
10  try {
11    // The Fetch API is globally available in modern browsers and Node.js 18+
12    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
13
14    // Check if the request was successful
15    if (!response.ok) {
16      throw new Error(`HTTP error! status: ${response.status}`);
17    }
18
19    // Parse the JSON body and cast it to our interface
20    const data: Todo = await response.json();
21
22    console.log('Todo Item:', data.title);
23  } catch (error) {
24    console.error('Fetch error:', error);
25  }
26}
27
28fetchTodo();