수정하기 - 타입스크립트에서 async/await의 타입은 어떻게 정의하나요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

TypeScript에서 `async/await`는 비동기 프로그래밍을 보다 간결하고 읽기 쉽게 만들어 주는 기능입니다. 이 기능을 사용할 때, TypeScript는 비동기 함수의 반환 타입을 자동으로 `Promise`로 추론합니다. 이 글에서는 `async/await`의 타입을 정의하는 방법과 관련된 여러 가지 개념을 자세히 설명하겠습니다.           1. 기본적인 async/await 사용법    `async` 키워드를 사용하여 비동기 함수를 정의할 수 있습니다. 이 함수는 항상 `Promise`를 반환합니다. 예를 들어:    ```typescript  async function fetch<a href='https://sangseek.com/sangseeks/Data/ko'>Data</a>(): Promise<string> {      return "Hello, World!";  }  ```    위의 `fetchData` 함수는 `Promise<string>` 타입을 반환합니다. 이 함수가 호출되면, 실제로는 `Promise` 객체가 반환되며, 이 객체는 비동기 작업이 완료된 후에 문자열 값을 제공합니다.           2. 반환 타입 정의    비동기 함수의 반환 타입을 명시적으로 정의할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:    ```typescript  async function getUserData(userId: number): Promise<User> {      const response = await fetch(`https://api.example.com/users/${userId}`);      const data: User = await response.json();      return data;  }  ```    여기서 `User`는 사용자 데이터를 나타내는 인터페이스입니다. `getUserData` 함수는 `Promise<User>`를 반환합니다.           3. 에러 처리    `async/await`를 사용할 때는 `try/catch` 블록을 사용하여 에러를 처리할 수 있습니다. 이 경우 에러의 타입도 고려해야 합니다. 예를 들어:    ```typescript  async function getData(): Promise<string> {      try {          const response = await fetch("https://api.example.com/data");          if (!response.ok) {              throw new Error("Network response was not ok");          }          const data: string = await response.text();          return data;      } catch (error) {          // error는 any 타입으로 추론됩니다.          console.error("Failed to fetch data:", error);          throw error; // 에러를 다시 던질 수 있습니다.      }  }  ```    위의 코드에서 `error`는 기본적으로 `any` 타입으로 추론됩니다. 에러의 타입을 명시적으로 정의하고 싶다면, 사용자 정의 에러 클래스를 만들거나, 특정 타입을 사용하여 에러를 처리할 수 있습니다.           4. Promise의 제네릭 타입    `Promise`는 제네릭 타입이므로, 반환되는 값의 타입을 명시할 수 있습니다. 예를 들어, 다음과 같이 정의할 수 있습니다:    ```typescript  async function getNumber(): Promise<number> {      return 42;  }  ```    이 경우 `getNumber` 함수는 `Promise<number>`를 반환합니다.           5. 여러 비동기 작업 처리    여러 비동기 작업을 동시에 처리할 때는 `Promise.all`을 사용할 수 있습니다. 이 경우 반환 타입은 `Promise`의 배열로 정의할 수 있습니다.    ```typescript  async function fetchMultipleData(): Promise<[string, number]> {      const [text, number] = await Promise.all([          fetch("https://api.example.com/text").<a href='https://sangseek.com/sangseeks/then/ko'>then</a>(res => res.text()),          fetch("https://api.example.com/number").then(res => res.json())      ]);      return [text, number];  }  ```    위의 예제에서 `fetchMultipleData` 함수는 `Promise<[string, number]>`를 반환합니다.           6. async/await와 <a href='https://sangseek.com/sangseeks/타입 추론/ko'>타입 추론</a>    TypeScript는 비동기 함수의 반환 타입을 자동으로 추론합니다. 따라서 명시적으로 타입을 정의하지 않아도 되는 경우가 많습니다. 그러나 명확성을 위해 타입을 명시적으로 정의하는 것이 좋습니다.           7. 결론    TypeScript에서 `async/await`를 사용할 때는 비동기 함수의 반환 타입을 `Promise`로 정의하는 것이 기본입니다. 비동기 작업의 결과 타입을 명시적으로 정의하여 코드의 가독성을 높이고, 에러 처리에 신경 써야 합니다. TypeScript의 타입 시스템을 활용하여 비동기 프로그래밍을 보다 안전하고 효율적으로 수행할 수 있습니다.