코딩애플 Typescript - 함수에 타입 지정하는 법 & void 타입

김원종·2024년 4월 1일
0

TypeScript 학습

목록 보기
4/28

함수를 만들때도 타입 지정이 가능하다! ts에서는 변수를 만들면 타입을 지정하는것을 권유한다.

이렇게 변수 let s; 라고만 선언해두면 any타입이 들어가게 되는데 전 블로그에서도 언급했듯이 any 타입은 ts를 안쓰겟다 라고 하는것과 동일하다.

이런식으로 x 변수에 대한 타입값을 지정할 수 있다.
그리고 함수에서 return값을 넣어줄수 있는데 이 return에 대한 타입도 지정할수 있다.


이런식으로 변수값 옆에 타입을 지정해주면 된다.
결론 -> 함수는 파라미터 ,return값 타입 지정이 가능

이러면 해당 함수에 변수를 넘길때 number값만 넘길수 있다. 함수에서만 사용할수있는 타입도 있다. void타입을 사용하면 된다.

return값이 없다면 void를 선언하면 된다.그럼 실수로 return값을 넣어도 에러로 실수를 방지해준다.

위처럼 변수를 넣어준 경우 js에서는 함수() 이렇게 해당 함수를 호출한후 아무런 값을 넘기지 않아도 에러가 발생하지 않았다. 하지만 ts에서는 위처럼 선언하면 변수값을 무조건 넘겨야한다. 하지만 파라미터값이 있을수도있고 없을수도있는데 무조건 값을 넣어야하나??

아니다 위처럼 ? 를 넣어주면 변수값이 있을수도 없을수도 있다는뜻이다. 오브젝트 형태에서도 키값에 ?를 넣으면 같은 역활이다.

중요
변수?number는 변수:number|undefined와 같은 형태이다.


그래서 간단한 퀴즈를 풀어보면

위 함수에 2라는 값을 넘겼는데 에러가 발생한다. 이유는 x라는 값은 지금 number라는 명확한 타입값이 아니다. unmber 과 string이 섞인 union타입이다. 그래서 확실하게 number값이라는걸 확실하게 코드를 구성해야한다. 이 과정을 Narrowing 이라고 한다.


숙제1) 이름을 파라미터로 입력하면 콘솔창에 "안녕하세요 홍길동"을 출력해주고

아무것도 파라미터로 입력하지 않고 함수를 사용하면 "이름이 없습니다" 를 출력하는 함수를 만들어봅시다.

파라미터와 return 타입지정도 잘 해봅시다.

Work1("gkgk");

function Work1(x?:string):void{
    if(x){
        console.log('이름이 있습니다. -> '+x)
    }else{
        console.log('이름이 없습니다.')
    }
}

숙제2) 함수에 숫자 또는 문자를 집어넣으면 자릿수를 세어 출력해주는 함수를 만들어보십시오.

예를 들어 '245' 이런 문자를 입력하면 3이 return 되어야합니다.

숫자도 마찬가지로 9567 이런 숫자를 입력하면 4가 return 되어야합니다.

숫자 또는 문자 이외의 자료가 들어오면 안됩니다.

console.log(Num("123123123"))
function Num(x:number|string){
    return x.toString().length
}
**센세 풀이** 
구글에 물어보니 문자에 .length 붙이면 자릿수 세준다고 하네요. 

근데 숫자는 .length를 붙여줄 수 없으니까 

우선 문자로 변환했다고 합니다.

변환하는 함수도 역시 구글에 물어보니 .toString() 쓰면 된다고 하는군요.

물론 더 정확하게 하려면

만약에 x가 숫자일 경우 이렇게,

문자일 경우 이렇게 하라고 코드짜는게 좋습니다. 

숙제3) 결혼 가능 확률을 알려주는 함수를 만들어봅시다.

  1. 함수의 파라미터로 월소득(만원단위), 집보유여부(true/false), 매력점수 ('상' or '중' or '하') 를 입력할 수 있어야합니다.

  2. 월소득은 만원 당 1점, 집보유시 500점 & 미보유시 0점, 매력점수는 '상'일 때만 100점으로 계산합니다.

  3. 총 점수가 600점 이상일 경우 "결혼가능"을 return 해줘야합니다. 그 외엔 아무것도 return하지 않습니다.

function marry(x:number , y:boolean , z:string){
    let point:number = 0; // 점수를 0으로 초기화
    point += x / 10000; // 월소득을 만원 당 1점으로 계산
    if(y===true){
        point+=500;
    }
    if(z==='상'){
        point+=100;
    }

    if(point>=600){
        return"결혼가능"
    }else{
        return "결혼 불가능"
    }
}
**센세풀이**
score라는 변수를 만들고

차례로 money에 따라 score를 + 시켰고

house여부에 따라 score를 + 시켰고.. 그랬다고 합니다. 

콘솔창에 출력해보니 집있고 매력있는 사람은 월 소득에 관계없이 항상 결혼이 가능하군요.

하지만 월 소득을 마이너스로 이상한 숫자를 입력하면 어쩌죠?

그런 것도 막으려면 코드를 어떻게 짜야할까요. 

마지막으로 string이 아니라 '상' '중' '하' 라는 글자만 입력할 수 있게 더욱 엄격한 타입지정도 가능한데

그건 Literal type 시간에 알아봅시다
profile
개린이

0개의 댓글