2026년 상식닷컴 선정 식당 & 카페 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요

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

_____
Q1: 타입스크립트에서 `async` 함수의 반환 타입은 어떻게 정의되나요?
`async` 함수는 항상 `Promise`를 반환합니다. 따라서 함수에서 명시적으로 반환 타입을 지정할 때는 `Promise<타입>` 형식으로 지정합니다.
예:
```typescript
async function fetchData(): Promise {
return "data";
}
```

---

Q2: `await`의 타입은 어떻게 정의되나요?
`await`는 `Promise`가 해결(resolve)했을 때의 값을 반환합니다. 즉, `await` 뒤에 오는 표현식이 `Promise`라면 `await`의 결과 타입은 `T`가 됩니다.

예:
```typescript
async function example() {
const data: string = await Promise.resolve("hello");
}
```

---

Q3: 일반 함수에서 `Promise` 타입을 명시하는 방법은?
`async` 키워드 없이 `Promise`를 반환하는 함수도 동일하게 `Promise<타입>`으로 명시합니다.
예:
```typescript
function getNumber(): Promise {
return Promise.resolve(42);
}
```
---

Q4: `async` 함수 내에서 반환할 타입을 제대로 추론받으려면 어떻게 해야 하나요?
`async` 함수 내에서 반환하는 값이 `Promise`인지 아닌지는 타입스크립트가 자동으로 감지합니다. 반환 값의 타입을 명시적으로 지정해주면 타입 안정성을 높일 수 있습니다.
예:
```typescript
async function getUser(): Promise<{ name: string }> {
return { name: "Alice" }; // 자동으로 Promise<{name: string}>로 래핑됨
}
```

---

Q5: `await`가 `any` 타입일 경우 어떻게 개선할 수 있나요?
`await`가 사용할 Promise의 타입이 불분명하면 `any`가 될 수 있습니다. 이런 경우 Promise 객체나 함수 반환값에 명확한 제네릭 타입을 지정해주는 것이 좋습니다.

예:
```typescript
function fetchNumber(): Promise {
return Promise.resolve(10);
}

async function example() {
const num: number = await fetchNumber();
}
```

---

요약:
- `async` 함수는 항상 `Promise` 타입을 반환합니다.
- `await`는 `Promise`에서 `T`를 꺼내오는 역할을 하며, 타입스크립트가 이를 자동으로 추론합니다.
- 함수 반환 타입을 명확히 지정하면 타입 안정성과 코드 가독성이 높아집니다.
TypeScript에서 `async/await`는 비동기 프로그래밍을 보다 간결하고 읽기 쉽게 만들어 주는 기능입니다.

이 기능을 사용할 때, TypeScript는 비동기 함수의 반환 타입을 자동으로 `Promise`로 추론합니다.

이 글에서는 `async/await`의 타입을 정의하는 방법과 관련된 여러 가지 개념을 자세히 설명하겠습니다.

1. 기본적인 async/await 사용법 `async` 키워드를 사용하여 비동기 함수를 정의할 수 있습니다.

이 함수는 항상 `Promise`를 반환합니다.

예를 들어: ```typescript async function fetchData(): Promise { return "Hello, World!"; } ``` 위의 `fetchData` 함수는 `Promise` 타입을 반환합니다.

이 함수가 호출되면, 실제로는 `Promise` 객체가 반환되며, 이 객체는 비동기 작업이 완료된 후에 문자열 값을 제공합니다.



2. 반환 타입 정의 비동기 함수의 반환 타입을 명시적으로 정의할 수 있습니다.

예를 들어, 다음과 같이 사용할 수 있습니다: ```typescript async function getUserData(userId: number): Promise { const response = await fetch(`https://api.example.com/users/${userId}`); const data: User = await response.json(); return data; } ``` 여기서 `User`는 사용자 데이터를 나타내는 인터페이스입니다.

`getUserData` 함수는 `Promise`를 반환합니다.



3. 에러 처리 `async/await`를 사용할 때는 `try/catch` 블록을 사용하여 에러를 처리할 수 있습니다.

이 경우 에러의 타입도 고려해야 합니다.

예를 들어: ```typescript async function getData(): Promise { 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 { return 42; } ``` 이 경우 `getNumber` 함수는 `Promise`를 반환합니다.



5. 여러 비동기 작업 처리 여러 비동기 작업을 동시에 처리할 때는 `Promise.all`을 사용할 수 있습니다.

이 경우 반환 타입은 `Promise`의 배열로 정의할 수 있습니다.

```typescript async function fetchMultipleData(): Promise<[string, number]> { const [text, number] = await Promise.all([ fetch("https://api.example.com/text").then(res => res.text()), fetch("https://api.example.com/number").then(res => res.json()) ]); return [text, number]; } ``` 위의 예제에서 `fetchMultipleData` 함수는 `Promise<[string, number]>`를 반환합니다.



6. async/await와 타입 추론 TypeScript는 비동기 함수의 반환 타입을 자동으로 추론합니다.

따라서 명시적으로 타입을 정의하지 않아도 되는 경우가 많습니다.

그러나 명확성을 위해 타입을 명시적으로 정의하는 것이 좋습니다.



7. TypeScript에서 `async/await`를 사용할 때는 비동기 함수의 반환 타입을 `Promise`로 정의하는 것이 기본입니다.

비동기 작업의 결과 타입을 명시적으로 정의하여 코드의 가독성을 높이고, 에러 처리에 신경 써야 합니다.

TypeScript의 타입 시스템을 활용하여 비동기 프로그래밍을 보다 안전하고 효율적으로 수행할 수 있습니다.

작성자: 이주희 [비회원] | 작성일자: 1년 전 2024-09-10 05:32:15
조회수: 232 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.