함수에 타입 지정하기와 타입 확정하기

함수에 타입 지정하는 법 

함수 짚어보기

function 내함수(x){
  return x * 2
}
내함수(2);  // 4

 

소괄호 안에 들어가는 x같은 자료들을 파라미터라고 부르고 return 오른쪽에 있는 자료들을 리턴값으로 부름

1. 파라미터를 작명해주면 함수를 사용할 때 ( ) 소괄호 안에 아무 자료나 집어넣을 수 있게됨
2. 리턴값은 함수가 사용되고나서 그 자리에 남는 값

 

함수 타입 지정

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

1. 함수로 들어오는 자료 (파라미터)
2. 함수에서 나가는 자료 (return)

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

 

1. 함수로 들어오는 파라미터 타입지정은 파라미터 옆에 적으면 됨
   • 파라미터에 타입을 지정하면 필수 파라미터가 됨
2. 함수가 실행된 후 남는 값 (return 우측에 있는 값) 타입지정하고 싶으면 함수명() 우측에 적으면 됨

 

함수는 void 타입이 있음

함수는 void라는 타입을 사용할 수 있음

아무것도 없이 공허함을 뜻하는 타입으로 return할 자료가 없는 함수의 타입으로 사용가능함

 

function 내함수(x :number) :void { 
  return x * 2 //에러부분
}

 

함수에 무엇인가를 return하려고 하면 에러가 남 return을 방지하고 싶으면 void 타입을 활용하면 됨

 

파라미터가 옵션일 경우

함수에 파라미터 자리를 만들어놨지만 파라미터 없이 쓸 경우가 있는 경우 TS에서는 파라미터가 옵션이라는 것을 정의해주어야 함 타입을 지정하면 필 수 파라미터가 되기 때문

 

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

 

파라미터 우측에 그냥 물음표를 해놓으면 내함수()를 사용할 때 파라미터없이도 쓸 수 있음

물음표는 x : number | undefined 똑같은 의미

파라미터가 정의가 안되면 자동으로 undefined가 되기 때문에 그것을  반영한 것

 

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

타입에 엄격한 TS가 에러를 냄

 

예를 들어 함수에 숫자 또는 문자를 넣으면 +1을 해주는 함수를 만든다면

 

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

 

TS는 변수의 타입이 number | string 이런 union type인 경우 자료 조작을 금지시킴

 

아직 이 파라미터의 타입이 확실하지 않으니까 파라미터 조작을 막고 금지하는 것

 

같은 이유로 ?가 들어가서 파라미터가 옵션일 경우에도 문제가 생김

 

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

 

타입 확정하기 Narrowing & Assertion

 

function 내함수(x :number | string){
   return x + 1  //에러남 
}

 

위 함수를 실행하면 Operator '+' cannot be applied to types 'string | number' and 'number' 에러가 남

string | number 같은 union type에는 TS가 일반적으로 조작을 못하게 막아놓았기 때문

이런 메세지를 보면 1. 타입을 하나로 Narrowing 해주거나 2. Assert 해주거나 둘 중 하나 해주면 됨

 

Type Narrowing

if문 등으로 타입을 하나로 정해주는 것을 뜻함

 

function 내함수(x :number | string){
  if (typeof x === 'number') {
    return x + 1
  } 
  else if (typeof x === 'string') {
    return x + 1
  }
  else {
    return 0
  }
}

 

if문과 typeof 키워드로 현재 파라미터의 타입을 검사해서 조건을 걸어주는 것

TS는 타입이 확실하지 않을 때 오류가 나기 때문에 타입이 확실하지 않을 때 생기는 부작용을 막는 것

이런것을 defensive하게 코딩한다라고 함

 

또한 함수 안에서 if문 쓸 때는 마지막에 else {}가 없으면 에러가 남

return 하지않는 조건문이 있다면 나중에 버그가 생길 수 있어서 에러를 내주는 것인데 

이것이 불편하다면  tsconfig.js 파일에서 "noImplicitReturns": false를 추가하면 됨

하지만 tsconfig파일을 수정하는 것 보다는 엄격하게 쓰는 것이 좋음

 

• 꼭 typeof를 쓸 필요는 없고 타입을 하나로 확정지을 수 있는 코드라면 어떤 것도 Narrowing 역할을 할 수 있음
• in, instanceof 키워드도 사용가능함

 

Type Assertion

타입을 간편하게 assert 할 수도 있음

 

function 내함수(x :number | string){ 
    return (x as number) + 1 
}
console.log( 내함수(123) )

 

변수면 as number라고 쓰면 이 변수를 number이라고 하겠습니다라는 뜻이 되고 타입을 변경해줌

 

as 키워드 사용시 특징

• as 키워드는 union type 같은 복잡한 타입을 하나의 정확한 타입으로 줄이는 역할을 수행함
  • number 타입을 as string 이렇게 바꾸려고 하면 에러
• 타입 임시 해제용. 실제 코드 실행결과는 as 있을 때나 없을 때나 거의 동일함
  • 변수를 숫자로 가정해서 가공할 수 있는 것
  • 다만 실제로 변경해주지 않기 때문에 위의 예시를 실제 실행해 보면 '1231'로 출력됨

as를 쓰면 간편하지만 정확한 코드를 짜기 위해서는 narrowing을 써야함

그래서 as 문법은 왜 타입 에러가 나는지 모르는 상황에서 임시로 에러해결용으로 사용하거나 어떤 타입이 들어올지 정확하게 알고 있는데 컴파일러 에러가 방해할 때 사용해야함