2022/study-log/typescript-void-vs-undefined/

[utterances-bot]

[TypeScript] void vs undefined | woo jeongmin

아래의 코드는 우아한테크코스 지원 플랫폼의 타입스크립트 전환 작업을 진행하면서 마주쳤던 이슈입니다. axios interceptors가 성공 응답을 처리할 때 body가 없는 경우 리턴 타입을 다음 둘 중에서 고민하고 있었습니다. 나 나 awaited된 값은 undefined…

https://woojeongmin.com/2022/study-log/typescript-void-vs-undefined/

[hajongon]

안녕하세요 혹시 질문 드려도 될까요?

const test1 = (num1: number, num2: number): void => { return num1 + num2; //~~~ }

let test2: (num3: number, num4: number) => void; test2 = (num3, num4) => { return num3 + num4; }

위의 코드와 아래 코드의 차이가 뭔지 혹시 아실까요..!

[greenblues1190]

@hajongon 안녕하세요~ 작성하신 코드를 보기 쉽게 다시 쓰면 아래와 같은 형태입니다.

// void를 반환하는 함수 본문에서 number 타입 반환
const test1 = (num1: number, num2: number): void => {
  // @ts-expect-error
  return num1 + num2; // error 발생
}

// 좌변의 test2에 타입을 지정, void를 반환하지 않는 함수(sum)를 할당
const sum = (num3: number, num4: number): number => {
  return num3 + num4;
};
type Func = (num3: number, num4: number) => void
const test2: Func = sum;

먼저 test1은 void를 반환하는 함수 본문에서 number 타입을 반환하려는 상황입니다. 함수에 명시적으로 void를 반환하겠다고 지정했기 때문에 함수 본문에서 void에 할당 가능하지 않은 타입(number) 반환 시 에러를 발생시킵니다.

test2는 좌변의 변수를 void를 반환하는 함수 타입으로 지정한 후 number 타입을 반환하는 함수를 할당하는 상황입니다. void를 반환하는 함수에 다른 타입을 반환하는 함수를 할당 가능한 것은 sustitutability때문입니다.

후자가 가능한 이유는 반환값이 필요없는 함수에 어떤 함수든 받아 반환값만 사용하지 않고 쉽게 사용할 수 있도록 타입스크립트가 설계되었기 때문입니다.

예를 들어 Array의 forEach 함수는 void를 반환하는 함수를 받습니다. 콜백 함수의 반환값을 사용하지 않는다는 것을 나타내기 위함입니다. 하지만 sum과 같이 number를 반환하는 함수도 할당 가능합니다. 무엇을 반환하든 동작은 하기 때문이죠.

const sum = (num1: number, num2: number): number => num1 + num2;
[1, 2, 3].forEach(sum);

조금 복잡할 수도 있는데요, 편의를 위한 예외상황이라고 생각해주시면 될 것 같아요.

타입스크립트 깃헙 FAQ에도 이에 대한 답변이 있습니다.

[hajongon]

헉 선생님 감사합니다.... 이렇게 빠르게 답변주시다니 덕분에 같이 스터디하시는 분들께도 해당 내용 공유드렸습니다.

Sustitutability라는 개념은 진짜 블로그에 잘 없더라구요 한참 디깅하다가 가장 잘 알고계신 분 같아 댓글 남겼던 것입니다

깃헙 팔로우하고 블로그도 챙겨보고 항상 응원하겠습니다..!! 아직 날이 좀 추운데 감기 조심하세요~~!

2023년 3월 2일 (목) 오후 8:06, Jeongmin Woo @.***>님이 작성:

@hajongon https://github.com/hajongon 안녕하세요~ 작성하신 코드를 보기 쉽게 다시 쓰면 아래와 같은 형태입니다.

// void를 반환하는 함수 본문에서 number 타입 반환const test1 = (num1: number, num2: number): void => { // @ts-expect-error return num1 + num2; // error 발생} // 좌변의 test2에 타입을 지정, void를 반환하지 않는 함수(sum)를 할당const sum = (num3: number, num4: number): number => { return num3 + num4;};type Func = (num3: number, num4: number) => voidconst test2: Func = sum;

먼저 test1은 void를 반환하는 함수 본문에서 number 타입을 반환하려는 상황입니다. 함수에 명시적으로 void를 반환하겠다고 지정했기 때문에 함수 본문에서 void에 할당 가능하지 않은 타입(number) 반환 시 에러를 발생시킵니다.

test2는 좌변의 변수를 void를 반환하는 함수 타입으로 지정한 후 number 타입을 반환하는 함수를 할당하는 상황입니다. void를 반환하는 함수에 다른 타입을 반환하는 함수를 할당 가능한 것은 sustitutability때문입니다.

후자가 가능한 이유는 반환값이 필요없는 함수에 어떤 함수든 받아 반환값만 사용하지 않고 쉽게 사용할 수 있도록 타입스크립트가 설계되었기 때문입니다.

예를 들어 Array의 forEach 함수는 void를 반환하는 함수를 받습니다. 콜백 함수의 반환값을 사용하지 않는다는 것을 나타내기 위함입니다. 하지만 sum과 같이 number를 반환하는 함수도 할당 가능합니다. 무엇을 반환하든 동작은 하기 때문이죠.

const sum = (num1: number, num2: number): number => num1 + num2;[1, 2, 3].forEach(sum);

조금 복잡할 수도 있는데요, 편의를 위한 예외상황이라고 생각해주시면 될 것 같아요.

타입스크립트 깃헙 FAQ에도 이에 대한 답변 https://github.com/Microsoft/TypeScript/wiki/FAQ#why-are-functions-returning-non-void-assignable-to-function-returning-void이 있습니다.

— Reply to this email directly, view it on GitHub https://github.com/greenblues1190/greenblues1190.github.io/issues/6#issuecomment-1451689949, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3J7LM7UTE25ZEXS7ABUOILW2B5J7ANCNFSM6AAAAAAVNFHKPM . You are receiving this because you were mentioned.Message ID: @.***>