타입스크립트_함수에 타입지정하기 & void type

Adrian·2022년 3월 23일
0
post-thumbnail

▶️ 함수에 타입지정하기

타입스크립트에서 함수는 다음과 같이 두 군데 타입지정이 가능하다.
1. 함수로 들어오는 자료(파라미터)
2. 함수에서 나가는 자료(return)

  function myFunc(x :number) :number { 
    return x * 2 
  } 
  • 함수로 들어오는 파라미터 타입지정은 파라미터 옆에 적으면 된다.
  • 함수가 실행된 후 남는 값(return 우측에 있는 값)을 타입지정하고 싶으면 함수명() 우측에 적어주면 된다.
  • 만약 아무런 타입도 할당해주지 않으면 변수처럼 any라는 타입이 할당된다.

▶️ void type

  function myFunc(x :number) :void { 
    return x * 2 //에러출력 
  } 
  • 함수에서만 쓸 수 있는 void type이 존재한다. void란 단어에서 알 수 있듯 return할 자료가 없는 텅 빈 자료형을 뜻한다.
  • void 자료형을 쓰면 return 을 하려할때 에러를 출력한다.

▶️ 파라미터가 옵션일 경우

  function myFunc(x? :number) { 

  }
  myFunc(); //가능
  myFunc(2); //가능
  • 함수에 파라미터 자리를 만들어놨지만 가끔 파라미터 없이 쓸 때도 있다. 그럴 경우 타입스크립트에선 미리 "이 파라미터는 옵션이다" 라는 정의를 미리 내려야 에러가 나지 않는다.
  • 이럴때는 파라미터 우측에 물음표를 쳐서 사용하면 된다.
  • 물음표의 의미는 x:number|underfined 와 같은 의미라고 생각하면 된다.

▶️ 함수의 예외없이 Union Type을 사용하면?

  function myFunc1(x :number | string){ 
    return x + 1 
    
  function myFunc2(x? :number) :number { 
  return x * 2 
}  
  } 
  • 함수에 숫자 또는 문자를 집어넣으면 1을 더해주는 함수를 만들어보자.
  • 자바스크립트에서는 문자나 숫자 모두 +1이 가능하지만, 타입스크립트에선 변수의 타입이 number|string 이런 union type인 경우 자료 조작을 금지시킨다.
  • 즉 타입스크립트에선 함수를 엄격하게 짜는 것이 중요하다.

profile
관조, 사유, 끈기

0개의 댓글