정중식의 개발공부로그

함수에 타입 지정하는 법 & void 타입

11 Apr 2023 | typeScript

코딩애플강의를 보고 정리했습니다.

함수에 타입 지정

함수는 총 두군데 타입지정이 가능하다.

  1. 함수로 들어오는 자료 (파라미터)
  2. 함수에서 나가는 자료 (return) 
function test(x: number): number {
  return x * 2;
}

  • 함수로 들어오는 파라미터 타입지정은 파라미터 옆에 적으면 됨

  • 함수가 실행된 후 남는 값 (return 우측에 있는 값) 타입지정하고 싶으면 함수명() 우측에 적으면 됨

  • 파라미터에 타입을 지정하면 필수 파라미터가 된다.

// 리액트에서 예를들면..
const onClick =(e:any)=>{
....
}

// 이러면 에러남
<button onClick={()=>onClick()} />

// 이렇게 해야됨
<button onClick={(e)=>onClick(e)} />

void 타입

함수는 void 타입이 있다.
‘아무것도 없이 공허함’을 뜻하는 타입이라고 하는데, return할 자료가 없는 함수의 타입으로 사용가능하다.

EX)

function test(x: number): void {
  return x * 2; //여기서 에러남
}

이 함수에서 뭔가를 return하려고할 때 에러를 낸다.
함수에 return 방지장치를 주고 싶을 때 void 타입을 활용하자.

파라미터가 옵션일 경우

함수에 파라미터자리를 만들어놨지만 가끔 파라미터 없이 쓸 때도 있다.
그럴때 사용하자.

function test(x?: number) {}
test(); //가능
test(2); //가능

x : number | undefined 이거랑 똑같은 의미이다.
그런데 함수에서 number | undefined이거는 Union type인데, Union type을 사용하면 어떻게될까?

함수에서 Union type사용

아래와 같은 경우 에러를 낸다.

// 함수에 숫자 또는 문자를 집어넣으면 + 1 해주는 함수
function 자릿수세기(x: number | string) {
  return x + 1;
}

쌩 자바스크립트에서는 문자나 숫자 모두 +1이 가능하지만,
타입스크립트에선 변수의 타입이 number|string 이런 Union type인 경우 자료 조작을 금지 시킨다.
아직 이 파라미터의 타입이 확실하지 않으니까 파라미터 조작을 미리 방지하는거다.

function 내함수(x?: number): number {
  return x * 2;
}

이런 코드도 타입스크립트가 에러를 내는데,
x라는 파라미터는 옵션이고, 옵션인 파라미터는 number|undefined 이런식으로 타입정의가 진행된다.
그렇기 때문에, x라는 파라미터가 뭔지 확실하지 않아 에러를 낸다.

이처럼 타입스크립트는 엄격한 성격을 띄고있는데 이런 성격에 맞춰주려면 내가 코드를 엄격하게 짜주는 수 밖에 없을것 같다.

Related Posts