[TypeScript] 함수에 타입지정하기 & void타입

qwe8851·2022년 10월 25일
1

🙆‍♂️ TypeScript

목록 보기
5/9

함수에 type지정하기

함수에 타입지정은 2곳이 가능하다
1. 함수가 들어오는 자료 (파라미터)
2. 함수에서 나가는 자료 (return)

function 내함수(x :number) :number { 
  return x * 2 
} 
  1. 함수로 들어오는 파라미터 타입지정은 파라미터 옆에 작성
  2. 함수가 실행된 후 남은 값 (return우측에 있는 값)타입지정하려면 함수명()우측에 작성

함수에 타입실드를 만들어주었기 때문에
이제 파라미터와 리턴값의 타입이 맞지 않으면 에러를 띄우줌

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





함수에 type지정하기

return할 자료가 없는 함수 타입에 사용함

function 내함수 x:number) :void{
  retunr x*2; //error
}

그럼 이제 이 함수에서 뭔가를 return하려고 할 때 에러를 냄
함수에 return방지기능을 주고 싶을때 void를 활용하면 될 듯





파라미터가 옵션일 경우

함수에서 파라미터를 필수 파라미터가 아닌 선택으로 만들고 싶을 땐 어떻게 해야 할 까?

function 내함수(x?:number){
}
내함수();	  //가능	
내함수(1);	  //가능

위 코드퍼럼 파라미터 우측에 물음표를 넣어주면 파라미터 없이도 쓸 수 있음.

물음표는 사실 number | undifined와 같은 의미





함수도 예외없이 Union type을 사용하려면

Q. 예ㅡㄹ 들어 함수에 숫자 또는 문자를 집어넣으면 +1해주는 함수를 만들어보자.

function 자릿수세기(x:number|string){
  retunr x+1;
}

쌩자바스크립트에서는 문자나 숫자 모두 +1이 가능하지만 타입스크립트에선 변수의 타입이 number}string 이런 union type인 경우 자료 조작을 금지함.

아직 파라미터 타입이 확실하지 않으니까 파라미터 조각을 일단 실드로 막고 금지하는 것

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

x라는 파라미터는 옵션이고, 옵션인 파라미터는 number | undefined 이런 식으로 타입정의가 된다고 했잖슴.

그래서 아직 x라는 파라미터가 뭔지 확실하지 않기 때문에 에러를 내주는 것.

profile
FrontEnd Developer with React, TypeScript

0개의 댓글