[TS] void란 뭘까?

TypeScript에서 void는 함수가 반환값을 제공하지 않는다는 것을 나타내는 특수한 타입입니다.

자바스크립트에서는 함수가 반환값을 제공하지 않으면 암묵적으로 undefined를 반환합니다. 이는 자바스크립트의 동적 타입 시스템의 일부입니다. 그러나 TypeScript에서는 함수의 반환 타입을 명시적으로 지정하는 것이 일반적입니다.

void 타입은 함수가 유용한 값을 반환하지 않는다는 것을 나타냅니다. 즉, 함수의 목적이 사이드 이펙트(예: 네트워크 요청, 로그 출력, 객체 상태 변경 등)를 생성하는 것이며, 이러한 함수를 호출한 후에 반환된 값을 사용할 필요가 없음을 나타냅니다.

예를 들어, async 함수는 Promise를 반환하지만, 해당 Promise가 유용한 값을 감싸지 않는 경우, 반환 타입을 Promise<void>로 지정할 수 있습니다. 이는 함수가 비동기적으로 완료될 것이지만, 완료 후에 특정 값을 반환하지 않을 것임을 나타냅니다.

void 반환 타입의 사용 예

function logMessage(message: string): void {
  console.log(message);
  // 이 함수는 콘솔에 메시지를 출력하는 사이드 이펙트를 생성하지만
  // 호출자가 사용할 수 있는 반환값을 제공하지 않습니다.
}

Promise<void>의 사용 예 

async function saveData(data: any): Promise<void> {
  await api.post('/data', data);
  // 이 함수는 데이터를 API에 전송하는 사이드 이펙트를 생성하지만
  // 완료 후에 특정 값을 반환하지 않습니다.
}

이런 식으로 void는 TypeScript에서 함수가 반환값을 제공하지 않는다는 것을 나타내는 역할을 합니다.

반대로 반환값이 필요한 경우에는 아래처럼 처리하면 됩니다.

async 함수에서 반환값이 필요한 경우, 해당 값을 반환하면 됩니다. 이 경우 반환값의 타입이 Promise<T>가 됩니다. 여기서 T는 반환값의 타입입니다.

예를 들어, 아래 함수는 비동기 작업 후에 문자열을 반환합니다:

async function fetchData(): Promise<string> {
  let response = await fetch('https://api.example.com/data');
  let data = await response.text();
  return data;
}

이 함수는 Promise<string>을 반환합니다. 즉, 이 함수가 완료될 때 문자열 값을 반환합니다. 함수의 반환값을 사용하려면 await 키워드나 then 메서드를 사용해야 합니다. 예를 들어,

// Using await:
let data = await fetchData();
console.log(data);

// Using then:
fetchData().then(data => {
  console.log(data);
});

이렇게 async 함수에서는 return 키워드를 사용하여 값을 반환할 수 있습니다. 반환된 값은 Promise로 감싸져 있어, 함수의 호출자는 비동기 작업이 완료될 때까지 기다린 후에 값을 사용할 수 있습니다.