[코딩애플] 함수에 타입 지정하는 법, void 타입

함수에서의 타입 지정

함수에도 타입 지정이 가능하다.

두 군데 가능하다. 하나는 함수의 파라미터, 하나는 return 값이다.

 

자바스크립트에서의 함수의 기본형은 아래와 같다.

function multiplyNumber(x) {
  return x * 2;
}

 

여기서 x는 파라미터고, return 이하가 함수의 결과로 반환되는 값이다. 위 함수만 놓고 추측 컨데, x라는 파라미터는 숫자일 것이고, 당연히 return 값도 숫자일 것 같다.

 

하지만 자바스크립트에서는 다르다.

function multiplyNumber(x) {
  return x * 2;
}

const x = '2';
console.log(multiplyNumber(x)); // 4

 

위와 같이 문자와 숫자를 연산하는 것도 허용한다.

타입스크립트의 엄격한 숫자 연산 허용 범위

타입스크립트에서는 이런 애매함을 막기 위해서 파라미터에도 타입을 지정해주어야 하고, return 값에도 타입을 지정해주어야 한다.

 

참고로 타입스크립트에서는 정확히 숫자 타입끼리의 연산만을 허용한다. union 타입은 연산이 되지 않는다는 의미이다.

function addNumber(x: string | number): number {
  return x + 2;
}

let x = 2;
addNumber(x);
// 4가 나올 것 같지만 x는 number 타입이 아니라,
// string | number를 하나로 보는 union 타입이라 숫자 타입이 아니다.

파라미터 타입 지정

파라미터 옆에 : 타입으로 타입을 지정해주면 된다.

function multiplyNumber(x: number) {
  return x * 2;
}

const x = '2';
console.log(multiplyNumber(x)); // 에러

return 값 타입 지정

function multiplyNumber(x: number) :number {
  return x * 2;
}

 

화살표 함수에서 화살표 넣는 자리, 소괄호와 중괄호 사이에 :타입을 지정해주면 된다.

Void 타입 : return이 필요 없는 함수의 타입 지정

아래 함수들은 별도의 ruturn 값이 없는 함수이다.

이런 함수들은 return 할 값이 없기 때문에 return 값의 타입을 지정할 필요가 없다. 이럴 땐 :void 타입을 지정한다.

// 콘솔 출력만 하는 함수
funcion logMessage(message: string): void {
  console.log(message);
}

logMessage('Hello');

// 이벤트 핸들러 함수
function handleClick(event: MouseEvent): void {
  alert('버튼을 눌렀습니다.');
}

// 토글 또는 초기화 함수
function handleInitialized = false;

function initialize(): void {
  isInitialized = true;
  alert('초기화 되었습니다!');
}

intitialize();

 

이 외에도 더 다양한 예시가 있다. return 값을 반환하지 않는 경우 void 타입을 지정한다.

파마리터가 올 수도 있고, 없을 수도 있는 경우

이 파라미터 자리는 올 수도 있고, 오지 않을 수도 있다라는 옵션을 정의해주어야 한다.

function addNumber(x? : number): number {
  return x + 2;
}

function addNumber(x: number | undefined): number {
  return x + 2;
}

 

x?: number와 x: number | undefined는 같은 의미이다. x가 number로 올 수도 있고, 값이 없을 수도 있다(undefined)라는 의미이다.

 

즉 아래의 식은 union 타입이 아닌 것처럼 보여도 성립이 되지 않는 식이다.

function addNumber(x?: number) : number {
  return x + 2;
}

 

왜냐면 number 타입인 2가 x에 할당되면 계산이 맞지만, addNumber(); 이렇게 파라미터 없이 함수를 호출하면 undefined + 2는 말이 안 되기 때문에 에러가 난다.

 

타입스크립트에서는 엄격하게 숫자 타입끼리만 연산을 허용한다.

 

만약 저렇게 파라미터가 옵션인 경우 연산을 처리하고 싶다면, 각 타입에 대해서 어떤 연산을 할 것인지 조건문으로 명확히 해주어야 한다.

즉 undefind일 때는 어떤 값을 return 할 것인지 직접 명시해주어야 한다.

function addNumber(x?: number): number{
  if (x === undefined) {
    return 2;
  }
  return x + 2;
}

console.log(addNumber(2)); // 4
console.log(addNumber()); // 2

 

파라미터로 이름이 전달 되었을 때와 전달되지 않았을 때를 처리하려면 아래와 같이도 쓸 수 있다.

아래의 두 함수는 같은 함수이다.

function printMessage(name?: string): void {
    if (name === undefined) {
        alert('이름이 없습니다');
    } else {
        alert('안녕하세요' + name);
    }
}



function printMessage(name: string | undefined) {
  if (name) {
    alert('안녕하세요' + name);
  } else {
    alert('이름이 없습니다')
  }
}
// void를 명시하지 않아도 return 값이 없으면 자동으로 void 타입이 됨.

 

자바스크립트에서 실행하면 아래와 같다.

function addNumber(x) {
    return x + 2;
}

console.log(addNumber(2)); // 4



function addNumber(x) {
    return x + 2;
}

console.log(addNumber()); // NaN

 

파라미터를 전달하지 않으면 에러가 나야 할 것 같지만, Not A Number라는 결과값을 보이며 에러는 안 난다. 계산은 제대로 안 되지만 코드가 실행은 된다.