프론트엔드 첫걸음

type void 본문

개발 공부/Typescript

type void

차정 2024. 2. 23. 16:33

타입스크립트의 타입으로 void가 쓰이는 경우는 세가지 경우가 있다.

매개변수, 메서드 일때의 void와 함수일때의 void가 다른데, 

매개변수, 메서드에서의 void는 Return 값을 사용하지 않겠다(상관하지않겠다) 라는 뜻이고,
함수에서의 void는 return값이 '없다'는 뜻이다.

 

//함수를 선언하고 그밑에 바로 함수를 구현하면 위에 있는 함수의 선언에 대한 부분은 타입이 된다.
function forEach(arr: number[], callback: (el: number) => undefined): void;
function forEach() {

}

 

구현하기 싫으면 declare 로 선언하면 되는데, 여기서 callback함수의 리턴값을 undefined로 해줬을때와
void로 해줬을때의 차이점을 확인 할 수 있다.

//push 의 리턴값은 number니까 forEach의 리턴값이 undefined면 에러가 난다.
//declare function forEach(arr: number[], callback: (el: number) => undefined): void;

//리턴값이 void면 push의 return값이 number여도 에러가 나지 않는다.
declare function forEach(arr: number[], callback: (el: number) => void): void;

let target: number[] = [];

forEach([1, 2, 3], el => target.push(el));

//

=> 여기서 확인할 수 있는것.

매개변수일때 void는 return값을 상관하지 않겠다 라는 뜻.

 

cf. declare가 언제쓰이냐?
해당 함수를 사용하는 script와 해당 함수를 선언한 script가 분리되어 있을 때 ,  
해당함수를 사용하려는데 타입에러가 날 때 ~
이 함수가 어딘가에 선언이 되어있다는걸 보증하면서 타입을 선언해줄때 declare 사용해준다.

 

여기서 void가 쓰여야 하는 이유가 나온다.

1. return 값이 undefined일때 

//1. return 값이 undefined 일때 

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

let target: number[] = [];

forEach([1, 2, 3], el => { target.push(el) }); //void 형식은 undefined 형식에 할당할 수 없습니다.
forEach([1, 2, 3], el => target.push(el)); // number 형식은 undefined 형식에 할당할 수 없습니다.

 

2. return 값이 number 일때 

//2. return 값이 number 일때 

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

let target: number[] = [];

forEach([1, 2, 3], el => { target.push(el) });// void형식은 number 형식에 할당할 수 없습니다.
forEach([1, 2, 3], el => target.push(el));

 

결국 void로 해야 두 경우 모두 에러가 안난다.

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

let target: number[] = [];

forEach([1, 2, 3], el => { target.push(el) });
forEach([1, 2, 3], el => target.push(el));

 

 

interface 에서 메서드가 void일 때 

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

const a : A = {
	talk() { return 3; } //에러가 안남. return 값이 숫자인데도 talk가 리턴값을 신경안쓰니깐..
}

// 이렇게 하면 b는 3이 되는데 b의 타입은 void가 되어버리는 상황
//const b= a.talk();
//const b:number= a.talk(); //이렇게 하면 에러가 남

const b = a.talk() as unknown as number;  
// b는 number가 확실할때 as unknown as number 이렇게 타입변환을 시켜준다.