타입스크립트 void 타입 예제

타입스크립트의 void 타입은 함수가 실행된 뒤 호출한 곳에서 사용할 반환값이 없다는 뜻이다.

데이터를 계산해 돌려주는 함수가 아니라, 메시지를 출력하거나 상태를 변경하고 이벤트를 처리하는 함수에 사용될 수 있다.

만약,
알림을 표시하거나 로그를 기록하는 함수는 특정 작업을 수행만 할 뿐, 실행 결과는 굳이 사용하지 않는다.

이런 형태의 함수의 반환 타입을 void로 지정하면 해당 함수가 결과값 전달을 목적으로 하지 않는다는 점을 타입스크립에 명시할 수 있다.

다만,
void가 있는 함수가 아무 작업도 하지 않는다는 의미는 아니다.

void 함수도 화면을 변경하거나 데이터를 저장하고, 설정값을 수정하는 등 다양한 작업을 수행할 수 있다.

단지, 작업이 끝난 뒤 호출한 코드에서 활용할 반환값이 없다는 의미이기 때문이다.

function printMessage(): void {
  console.log("안녕하세요.");
}

⊙

function showNotification(): void {
  console.log("새로운 알림이 있습니다.");
}

⊙

const result = showNotification();

// result의 타입은 void

⊙

function add(a: number, b: number): number {
  return a + b;
}

const result = add(10, 20);
console.log(result); // 30

⊙

function logUserName(name: string) {
  console.log(name);
}

⊙

function logA(message: string) {
  console.log(message);
}

function logB(message: string): void {
  console.log(message);
}

⊙

function printOrderNumber(orderNumber: string): void {
  console.log(`주문번호: ${orderNumber}`);
}

printOrderNumber("ORDER-1001");

⊙

const output = printOrderNumber("ORDER-1001");

console.log(output); // 실행 결과는 undefined

⊙

const printProduct = (productName: string): void => {
  console.log(`상품명: ${productName}`);
};

printProduct("무선 키보드");

⊙

type Logger = (message: string) => void;

const logger: Logger = (message) => {
  console.log(message);
};

logger("로그를 기록합니다.");

⊙

interface UserService {
  logout(): void;
}

const userService: UserService = {
  logout(): void {
    console.log("로그아웃되었습니다.");
  },
};

userService.logout();

⊙

class Cart {
  private items: string[] = [];

  addItem(item: string): void {
    this.items.push(item);
  }

  printItems(): void {
    console.log(this.items);
  }
}

const cart = new Cart();

cart.addItem("노트북");
cart.addItem("마우스");
cart.printItems();

⊙

function handleClick(): void {
  console.log("버튼을 클릭했습니다.");
}

⊙

function handleClick(): void {
  console.log("버튼을 클릭했습니다.");
}

⊙

const button = document.querySelector<HTMLButtonElement>("#save-button");

button?.addEventListener("click", (): void => {
  console.log("저장 버튼을 클릭했습니다.");
});

⊙

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

runTask(() => {
  console.log("작업을 실행합니다.");
});

⊙

function processNames(
  names: string[],
  callback: (name: string) => void
): void {
  names.forEach((name) => {
    callback(name);
  });
}

processNames(["민수", "지수", "서준"], (name) => {
  console.log(`사용자: ${name}`);
});

⊙

type ClickHandler = () => void;

⊙

type VoidFunction = () => void;

const getNumber: VoidFunction = () => {
  return 100;
};

const result = getNumber();
// result의 타입은 void

⊙

const numbers = [1, 2, 3];

numbers.forEach((number) => {
  return number * 2;
});

⊙

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6]

⊙

function calculateTotal(): void {
  return 100;
}

⊙

function calculateTotal(): number {
  return 100;
}

⊙

function calculateTotal(): void {
  console.log("합계를 계산했습니다.");
}

⊙

// 직접 void 반환 함수로 선언
function exampleA(): void {
  // return 1; 오류
}

// void 콜백 타입에 함수 할당
const exampleB: () => void = () => {
  return 1; // 반환값이 무시되는 문맥
};

⊙

async function saveLog(): Promise<void> {
  await Promise.resolve();

  console.log("로그 저장 완료");
}

⊙

async function run(): Promise<void> {
  await saveLog();

  console.log("다음 작업 실행");
}

run();

⊙

interface User {
  id: number;
  name: string;
}

async function getUser(): Promise<User> {
  return {
    id: 1,
    name: "홍길동",
  };
}

⊙

Promise<void>   // 완료 여부만 중요
Promise<User>   // 완료 후 User 데이터가 필요
Promise<number> // 완료 후 숫자 결과가 필요

⊙

let emptyValue: void = undefined;

⊙

function printMessage(): void {
  console.log("메시지");
}

⊙

function getEmptyValue(): undefined {
  return undefined;
}

⊙

function throwError(message: string): never {
  throw new Error(message);
}

⊙

function keepRunning(): never {
  while (true) {
    console.log("실행 중");
  }
}

⊙

function logMessage(): void {
  console.log("정상적으로 종료됩니다.");
}

function fail(): never {
  throw new Error("정상적으로 종료되지 않습니다.");
}