How to fix Cannot use 'await' in non-async function in TypeScript

// BEFORE - Error TS1308
function fetchData() {
  const response = await fetch('https://api.example.com/data');
  return response.json();
}

// AFTER - Fixed by adding async
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  return response.json();
}

// Arrow function
const getData = async () => {
  const result = await somePromise();
  return result;
};

// Method in a class
class DataService {
  async fetchUser(id: number) {
    const user = await fetch(`/api/users/${id}`);
    return user.json();
  }
}

// Async IIFE (Immediately Invoked Function Expression)
(async () => {
  const data = await fetchData();
  console.log(data);
})();

// WRONG - forEach doesn't handle async properly
items.forEach((item) => {
  await processItem(item); // Error: await in non-async function
});

// WRONG - even with async, forEach ignores promises
items.forEach(async (item) => {
  await processItem(item); // Runs all in parallel, doesn't wait
});

// CORRECT - Use for...of loop for sequential processing
for (const item of items) {
  await processItem(item);
}

// CORRECT - Use Promise.all for parallel processing
await Promise.all(items.map(async (item) => {
  return await processItem(item);
}));

// CORRECT - Use for await...of for async iterables
for await (const item of asyncIterable) {
  console.log(item);
}

// WRONG - constructors cannot be async
class UserService {
  constructor() {
    this.user = await this.fetchUser(); // Error!
  }
}

// CORRECT - Use a static factory method
class UserService {
  private constructor(private user: User) {}

  static async create() {
    const user = await this.fetchUser();
    return new UserService(user);
  }

  private static async fetchUser() {
    const response = await fetch('/api/user');
    return response.json();
  }
}

// Usage
const service = await UserService.create();

// WRONG - React components can't be async
async function MyComponent() {
  const data = await fetchData(); // Error!
  return <div>{data}</div>;
}

// CORRECT - Use useEffect hook
function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function loadData() {
      const result = await fetchData();
      setData(result);
    }
    loadData();
  }, []);

  return <div>{data}</div>;
}

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "esnext",
    "lib": ["ES2022"]
  }
}

// In a module (.ts or .mjs file)
const config = await fetch('/api/config').then(r => r.json());
const db = await connectDatabase(config);

export { db };

// When async is not an option
function getData() {
  // Can't use: const result = await fetch('/api/data');

  // Use .then() instead
  return fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      return data;
    })
    .catch(error => {
      console.error(error);
      throw error;
    });
}

// Usage
getData().then(result => {
  console.log(result);
});