[typescript] 함수에 타입 지정하는법, void 타입, Narrowing

함수에 타입 지정

 

 

함수의 파라미터, return 값에 타입지정이 가능하다.

return 값 타입지정은 파라미터 타입지정한 곳의 오른쪽에 지정!

function 함수(x : number, y: number) : number{
	return x * y
}

 

 

 

void 타입

 

 

함수에서 void 타입 활용 가능하다.

return 할 자료가 없을 때, 함수에서 return 하고 싶지 않을 때 사용한다.

실수로 뭔가 return하는걸 사전에 막을 수 있음

function 함수(x : number, y: number) : void{
	return x * y
}

 

타입스크립트와 자바스크립트의 차이점

- 함수에서 파라미터에 타입이 지정되어있다면 파라미터는 반드시 작성해야한다.

 

만약 파라미터가 옵션인 경우(=파라미터 있어도 되고 없어도 될때)

파라미터 변수 옆에 물음표를 넣어줘야한다. 그럼 파라미터 안넣어도 오류 안남 굳

function 함수(x? : number, y: number) : void{
	return 1 + y;
}

 

*변수? : 타입 은

변수 :  지정한 타입 | undefined 와 같은 뜻이다!

 

 

 

 

type Narrowing

 

함수의 파라미터 type이 아직 하나로 확정되지 않았을 경우 type Narrowing을 써야한다.

type Narrowing이란 유니온 타입등의 복합 타입을 단일 타입으로 축소하는 과정으로

if문 등으로 애매한 타입을 하나로 정해줄 수 있다.

 

우선 타입스크립트에서 연산하는 경우 무조건 같은 number 유형이여야 한다.

string | number 인 경우 바로 연산을 하면 타입이 애매해서 오류남

function 함수(x:number|string){
	return x+1
}

함수(123);

위의 경우 x가 숫자인지 문자인지 타입이 애매하기 때문에 오류가 난다.

이렇게 타입이 애매한 경우 type Narrowing을 쓰는 것!

 

 

Narrowing 하는 방법은 if문과 typeof 키워드를 사용해서 현재 파라미터의 타입을 검사한다.

만약 타입이 string인 경우 ~~게 짜주세요

또는

만약 타입이 number인 경우 ~~게 짜주세요 라고 코드 짜면됨

function solution3(x: number | string) {
  //x의 type이 string인 경우
  if (typeof x === "string") {
    return x + "짱이야";
  //x의 type이 number인 경우 (위에서 number or string 이라고 했으므로 number에 해당)
  } else {
    return x + 100;
  }
}

*함수 안에서 if문 쓸 때는 마지막에 else{ } 를 쓰지 않으면 에러가 나므로 조건 끝까지 써야함!

 

 

array의 경우

function solution3(x: number | string) {
  //넘버만 넣을 수 있는 arr
  let array :number[]= [];
  array[0] =x;
}

array 배열의 타입이 number이므로 number만 넣을 수 있는데

x라는 파라미터는 타입이 string 일수도 number 일수도 있으므로 애매해서 오류 뜸

 

 

이런 경우에도 Narrowing으로 파라미터의 타입이 숫자인 경우에만 배열에 추가되게 하면 된다.

function solution3(x: number | string) {
  let array: number[] = [];
  //x의 타입이 숫자일때만 array에 넣을 수 있다
  if (typeof x === "number") {
    array[0] = x;
  } else {
    console.log("숫자가 아니라 못들감요");
  }
}

 

요약하면 어떤 변수 타입이 아직 애매하면

Narrowing 해줘야 조작이 가능하다

 

 

 

if문 써서 Narrowing 쓰기 귀찮을때 쓰는 assertion 문법 (타입 덮어쓰기)

as 키워드 + 타입명 작성

function solution3(x: number | string) {
  let array: number[] = [];
  //x의 타입이 숫자일때만 array에 넣을 수 있다
  array[0] = x as number;
}

 

위의 코드에서 x as number는 x파라미터를 number타입으로 덮어달라는 의미이다.

 

 

예제)

배열에 여러개의 숫자를 저장해놨는데

'1', '2'과 같은 문자형의 숫자가 있는 경우

숫자형으로 바꿔주는 클리닝함수를 만들고 싶다면?

function 클리닝함수(x: (string | number)[]) {
  let 클리닝완료: number[] = [];
  x.map((a) => {
    if (typeof a === "string") {
      클리닝완료.push(Number(a));
    } else {
      클리닝완료.push(a);
    }
  });
  return 클리닝완료;
}

1. 배열에 있는 요소들을 map으로 하나씩 꺼내서 타입을 확인하고

2. 타입이 문자인경우 숫자로 바꿔서 클리닝완료에 추가하고

3. 타입이 원래 숫자인 경우는 바로 클리닝완료에 추가하면 된다