[TypeScript] 함수

만분의 일·2022년 8월 22일
0

TypeScript

목록 보기
4/7
post-thumbnail

함수의 Type지정

  • 함수는 파라미터, return 값의 타입을 지정할 수 있다.
    • 함수로 들어오는 파라미터의 타입 지정은 파라미터 옆에 적으면 된다.
    • 함수가 실행된 후 남는 값 return에 타입을 지정하고 싶으면 함수명() 오른쪽에 적으면 된다.
    • 파라미터에 타입을 지정하면 필수 파라미터가 된다.
let y; //변수만 만들면 :any가 자동할당된다.

 // x= 파라미터(숫자 input 역할).파라미터 또한 type설정을 안하면 any가 자동할당된다. 
function name(x) {

  return x * 2; // return 할 값(output 되는 값)
}
name(30);

// x 파라미터 자리에 숫자 타입만 입력 가능하다.
function name(x: number) :number{ // return 되는 값은 숫자타입으로 제한함.
  return x * 2;
}

name(5) // return 10
name('6') // error
export {};


함수에서의 Void 타입 활용

typescript에서의 함수는 void 타입이 있다. void의 뜻은 “아무것도 없이 비어 있음”이라는 뜻이다.

이처럼 return 할 자료가 없는 함수의 타입으로 사용할 때 활용할 수 있다.

  • 변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입이다.
  • 어떠한 값도 return 하고 싶지 않을 때 사용한다. 실수로 뭔가를 return하는 것을 사전에 막을 수 있다.
// 이것처럼 return이 없을 경우
function name(x:number) :void {
	1+1     
}

// return 하면 error 발생한다.
function name(x:number) :void {
	return 1+1     
}


파라미터

  • js에서는 파라미터가 선언되어 있어도 호출할 때 생략해도 문제가 없지만, typescript에서는 함수를 호출할 때, 타입이 지정된 파라미터까지 같이 호출해주어야 한다.
function name(x){

}
 
name() // error
name(x) // OK

파라미터가 옵션일 경우

함수에 파라미터 자리를 만들어놨지만, 가끔 파라미터 없이 쓸 때도 있다. 그럴 경우 타입 스크립트에서 해당 파라미터는 옵션이라는 의미로 “?”를 정의해줘야 에러가 발생하지 않는다.

  • 파라미터 변수? :타입 으로 지정해주면 된다.
function name(x?: number) :void {

}
name(); // 가능
name(2); // 가능

중요🚨 ? 연산자는 사실 x: 지정한 타입 | undefined와 똑같은 의미이다.

변수? :number는 변수 : number | undefined, 변수? :string은 변수 :string | undefined와 같다.



✅ Quiz.1 아래의 함수에서 error가 발생한 이유는?

function name (x :number | string) :void {
	console.log(x+3)
}
name(2)

parameter의 type이 number인지 string 명확히 정해지지 않았기 때문이다

따라서 number면 ~하고 string이면 ~하지 말라고 정해주어야한다.

이런 경우 narrowing을 통해 해결 가능하다.


✅ Quiz.2

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

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

function name(x: string) {
  if (x) {
    return "안녕하세요" + " "+ x;
  } else {
    return "이름이 없습니다.";
  }
}

name("이혜진");

✅ Quiz.3

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

ex) 문자 '245' 입력하면 3이 return , 숫자 9567를 입력하면 4가 return

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

💻 첫 번째 시도한 Code

function name(x: number|string) {
 if(x){
   return x.toString
 }else if("x"){
   return x.length
 }
}

name("2344");

💻두 번째 시도한 Code

function name(x: number|string):string {
 if(x){
   return x.toString().length
 }else if("x"){
   return x.length
 }
}

✅ Quiz.4

결혼 가능 확률을 알려주는 함수 만들어보기

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

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

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

function marriageScore(money:number, estate:boolean, charmingScore:string){
  let score=0;
 	score+=money; 
  if(estate===true){
    score+=500; 
  }if(charmingScore==="상"){
		score+=100
  }
  if (score >=600){
    return "결혼 가능"
  }
}
marriageScore(700, false, '중');


profile
1/10000이 1이 될 때 까지

0개의 댓글