[TypeScript] TypeScript의 비동기 함수

TypeScript의 비동기 함수는 JavaScript의 비동기 처리를 기반으로 동작하며,
async, await 키워드를 사용해 비동기 작업을 더 직관적이고 읽기 쉽게 작성할 수 있게 해준다.

 

비동기 함수란?

 Promise 를 반환하는 함수.
함수의 실행이 끝난 후에도 처리 결과가 곧바로 반환되지 않고, 작업이 완료된 시점에 값을 반환한다.

async function Func(): Promise<T> {
  // 비동기 작업 수행
}

 

async 키워드

async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환한다.
함수 내부에서 반환하는 값은 자동으로 Promise로 감싸진다.

async function sayHello(): Promise<string> {
  return "Hello, TypeScript!"; // 자동으로 Promise로 감싸짐
}

위 함수는 Promise<string>을 반환한다.

즉, 다음과 같은 방식으로 사용이 가능하다.

sayHello()
  .then((result) => console.log(result)); // "Hello, TypeScript!"

 

await 키워드

await 키워드는 비동기 함수(Promise)의 작업이 완료될 때까지 기다렸다가 결과 값을 반환한다.
await는 반드시 async 함수 안에서만 사용 가능.

async function fetchData(): Promise<string> {
  const data = await new Promise<string>((resolve) => {
    setTimeout(() => resolve("Data fetched!"), 1000);
  });
  
  return data;
}

async function main() {
  console.log("Fetching data...");
  const result = await fetchData();
  console.log(result); // "Data fetched!"
}

main();

 

에러 처리

try...catch 블록으로 에러 처리 가능.

async function riskyOperation(): Promise<number> {
  throw new Error("Something went wrong!");
}

async function main() {
  try {
    const result = await riskyOperation();
    console.log(result);
  } catch (error) {
    console.error("Error:", error.message);
  }
}

main();

 

비동기 함수의 반환 타입

TypeScript에서는 비동기 함수의 반환 타입을 명시적으로 지정할 수 있다.

Primise<T> : 비동기 함수가 성공적으로 처리되었을 때 반환할 데이터의 타입 T.

async function getNumber(): Promise<number> {
  return 42; // Promise<number>
}

 

비동기 함수와 병렬 처리

여러 비동기 작업을 동시에 실행하려면 Promise.all 또는 Promise.allSettled를 사용할 수 있다.

async function fetchData1(): Promise<string> {
  return new Promise((resolve) => setTimeout(() => resolve("Data 1"), 1000));
}

async function fetchData2(): Promise<string> {
  return new Promise((resolve) => setTimeout(() => resolve("Data 2"), 500));
}

async function main() {
  console.log("Fetching data...");
  
  // 병렬 실행
  const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
  
  console.log(data1); // "Data 1"
  console.log(data2); // "Data 2"
}

main();

 

비동기 함수의 실제 활용

주로 API 호출, 파일 읽기/쓰기, 타이머 처리 등 시간 소요가 발생하는 작업에 사용된다.

async function fetchUserData(userId: string): Promise<{ id: string; name: string }> {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  
  if (!response.ok) {
    throw new Error("Failed to fetch user data"); // 에러를 던짐
  }
  
  return response.json();
}

async function main() {
  try {
    const userData = await fetchUserData("12345");
    console.log(userData); // { id: "12345", name: "John Doe" }
  } catch (error) {
    console.error(error);
  }
}

main();