타입스크립트 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("정상적으로 종료되지 않습니다.");
}
댓글
댓글 쓰기