[typescript] 3. 함수 타입 지정/ narrowing/assertion

지금까지는 변수, 객체,배열에 타입 지정하는 방법을 알아보았다
그렇다면 함수는?

---

💥 함수 타입 지정

함수에서는 타입 지정 두곳 가능하다

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

◾ 파라미터

파라미터의 경우 파라미터 옆에 콜론으로 타입을 지정하면 된다. 마치 변수처럼!
파라미터에 타입 지정하면 필수 파라미터가 된다 !!

◾ return

함수명() 우측에 콜론으로 지정해주면 된다

function func(x :number) :number { 
  return x * 2 
} 

◾ 함수의 void 타입이란

void : 아무것도 없이 공허함

이라는 뜻인데 return 할 자료가 없는 함수의 타입으로 사용이 가능하다

function func(x?: number): void {
  // void return 하는 걸 막아줌, return이 불필요
}

이제 이 함수에 return 값이 있으면 에러가 난다

◾ 파라미터가 옵션일 때는?

함수에 파라미터자리를 만들어놨지만 가끔 파라미터 없이 쓸 때도 있다.
하지만 파라미터에 타입 지정하면 필수 파라미터가 된다고 했는데 파라미터가 없는 경우는 에러가 날 것이다
그렇다면 파라미터를 옵셔널로 지정하면 된다

//함수 타입 지정
// 변수만들고 타입 할당 안하면 any 타입 할당됨
function func(x?: number): void {
  // void return 하는 걸 막아줌, return이 불필요
}

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

◾ 함수에서 union type 사용하려면?

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

위 코드는 에러가 난다
왜일까?

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

위 코드 또한 에러난다
이유는??

왜냐하면 타입스크립트는 타입이 명확해야하지만 x 는 타입이 명확하지 않기 때문이다

위는 x 값이 number인지 string인데 아래는 x 값이 number인지 undefined인지 확실하지 않다

❗ 해결방법 : type narrowing or assertion

💥 type narrowing

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

위의 에러코드는 이렇게 narrowing하여 바꿀 수 있다

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

💥 type Assertion

"이 변수의 타입을 00로 생각해주세요" 라는 뜻

ex) 변수명 as string

function 내함수(x :number | string){ 
    return (x as number) + 1 
  // return <number>x +1 //옛날문법
}
console.log( 내함수(123) )

하지만 as는 타입을 개발자 마음대로 주장하는 역할이라 권장하지 않는다고 한다
아래와 같은 경우만 사용하기

**1. 왜 타입에러가 나는지 정말 모르겠는 상황에 임시로 에러해결용으로 사용하거나

2. 내가 어떤 타입이 들어올지 정말 확실하게 알고 있는데 컴파일러 에러가 방해할 때**

💨 연습 문제

• 모든 배열 내 값을 number로 변환

function vv(x:(number|string)[]){
  let vt:number[]=[]
  x.forEach((item)=>{
    if(typeof item==='string'){
      vt.push(parseInt(item))
    } else {
      vt.push(item)
    }
  })
  return vt
}
console.log(vv(['1', 2, '3']))

• 마지막 과목만 출력하기

var 철수쌤 = { subject: 'math' };
var 영희쌤 = { subject: ['science', 'english'] };
var 민수쌤 = { subject: ['science', 'art', 'korean'] };
function func(x) {
    if (Array.isArray(x.subject)) {
       return x.subject[x.subject.length - 1];
    } else if (x.subject==='string'){
        return x.subject;
    }
    else {
        return 'nothing';
    }
}
console.log(func({ subject: ['science', 'art', 'korean'] }));

• 그 외 연습들

//practice
function sayHi(x?: string) {
  if (x) {
    console.log("안녕하세요 " + x);
  } else {
    console.log("왜입력안함");
  }
}
sayHi("홍길동 ");

//practice
function func2(x: string | number) {
  console.log(String(x).length);
}
func2(123);

//practice;
let total: number = 0;
function func3(income: number, home: boolean, score: string) {
  total = income + 10000;
  if (home) {
    total + 500;
  }
  if (score == "상") {
    total + 100;
  }
  if (total >= 600) {
    return "결혼가능";
  }
}
func3(40000, true, "상");