[TypeScript] void 사용법

Typescript의 void 타입을 배우다.

---

타입스크립트 void 타입 이해하기

void는 존재하지 않음, 빈 공간의 의미를 가지고 있다. 따라서 함수가 void 타입이면 그 함수는 return값이 없어야 한다.

그러나 void는 반환값이 없어야 한다는 것을 강제하지는 않는다. 이 때문에 void 타입이 사용될 때 반환값이 존재해도 문제가 되지 않는 경우도 있다.

function a(): void {
    
}

const b = a();

함수에서 return값 있을 때

함수를 실행하지만 return 값이 없을때 void를 사용한다. void 타입의 함수는 반환값이 없거나, undefined를 반환하는 경우를 포함한다. 따라서 값을 반환하지 않는 함수는 기본적으로 undefined를 반환한다. 따라서 void 타입의 함수는 return값으로 undefined를 반환해도 허용된다.

 

매개변수(함수)와 메서드 타입이 void일 때

매개변수가 void 타입일 때는 어떤 타입이든지 상관하지 않겠다는 의미, 메서드가 void 타입일 땐 리턴값을 사용하지 않겠다는 의미이다.

function a(callback: () => void): void {
  // callback을 호출하지만, 반환값은 사용하지 않음
}

a(() => {
  return '3'; // 반환값이 있지만 무시됨
});

interface Human {
  talk: () => void;
}

const human: Human = {
  talk() {
    return 'abc'; // 반환값이 있지만, 호출 시 무시됨
  }
};

반환값이 필요 없고 기능적으로만 사용할 때 void를 사용하면 될 것 같다.

 

void 타입의 사용 사례

1. 이벤트 핸들러 함수

function handleClick(event: Event): void {
  console.log("Button clicked!");
}

이벤트 핸들러는 반환값이 필요 없기 때문에 void 타입을 사용한다.

 

2. 콜백 함수

function executeCallback(callback: () => void): void {
  callback();
}

반환값이 필요 없는 콜백 함수도 void 타입을 사용한다.

 

3. 부수 효과가 있는 함수

declare function forEach(arr: number[], callback: (el: number) => number): void;

let target: number[] = []
forEach([1, 2, 3], el => target.push(el))

반환값이 필요없는 상황에서 사용된다.