타입스크립트_함수

함수

function add(num1:number, num2:number): void{
    // return num1 + num2 
    console.log(num1 - num2)
}

return이 없을 땐 void를 입력해준다.

function IsAdult(age:number): boolean{
    return age > 19 
}

[선택적 매개변수]

function hello(name:string){
    return `Hello, ${name || "world"}`
}
// name이 있으면 name을 쓰고 없으면 world

const result = hello() //error

${name || "world"}로 대비한 코드가 있지만 error가 발생한다.
typescript에선 보다 명시적으로 알려줘야 한다.

▼

function hello(name?:string){
    return `Hello, ${name || "world"}`
}
const result = hello() 
const result2 = hellow("sam")

name에 물음표를 붙여서 있어도 되고 없어도 되는 파라미터를 표시한다.
옵셔널이라고 하더라도 타입은 항상 지켜줘야 한다.
undefined이거나 만약에 있다면 string이여야 한다.

사실 javascript에서 매개변수로 default값을 줄 수가 있다.

위에 있는 코드와 같은 모양인것을 확인할 수 있다.

• 이름과 나이를 받아서 문자열을 출력해준다.
  여기서 나이는 optional이다.

function hello(name:string, age?:number): string{
   if(age !== undefined){
    return `hello ${name}. you are ${age}`
   }else{
    return `hello ${name}`
   }
}

주의
name앞에 age가 오면 안된다.
필수 매개변수보다 선택적 매개변수가 앞으로 오게 되면 성립할 수 없는 코드이다.

function hello( age?:number, name:string): string{
   if(age !== undefined){
    return `hello ${name}. you are ${age}`
   }else{
    return `hello ${name}`
   }
}

만약 age를 앞에두고 옵셔널하게 사용하고 싶다면?

function hello(age:number | undefined, name:string): string{
   if(age !== undefined){
    return `hello ${name}. you are ${age}`
   }else{
    return `hello ${name}`
   }
}
 
console.log(hello(undefined, "sam"))

age를 number와 undefined를 받을 수 있게 한다.
사용시에는 명시적으로 undefined를 나타내줘야 한다.

---

[restparameter]

restparameter는 개수가 매번 바뀔 수 있다.
전달받은 매개변수를 배열로 나타낼 수 있다.

function add(...num: number[]){
   return num.reduce((result, num) => result + num, 0)
}

add(1, 2, 3)
add(1, 2, 3,4,5,6,7,8,9,10)

---

[함수에서 this]

interface User {
   name: string
}

const Sam: User = {
   name: 'sam'
}

function showName(){
   console.log(this.name)
}

const aa = showName.bind(Sam)
aa()

bind 메소드로 this를 묶어준다.

Sam이라는 객체는 User의 타입을 갖고 있는 상태
this는 사용하는 방법에 따라 달라지지만, this를 명시해주고 싶을 때는
bind를 통해서 해당 객체와 묶어준다.

• [만약 this의 type을 정의해주고 싶을 땐?]

function showName2(this:User){
   console.log(this.name)
}

매개변수 자리에 this와 타입을 같이 입력해주면 된다.

• [만일 매개변수가 있을 경우?]

function showName3(this:User, age:number, gender: 'm'|'f'){
	console.log(this.name, age, gender)
}
const a = showName3.bind(Sam)
a(30, 'f') // "sam",  30,  "f" 

• [함수 오버로드]
  전달받은 매개변수의 개수나 타입에 따라 다른 동작을 하도록 하는 것을 의미한다.
  함수위에 똑같은 모습으로 함수를 작성한다.

interface User {
   name: string,
   age: number
}


// number 또는 string을 받을 수 있다. 
// 나이가 숫자가 아닐때 string을 반환
// User혹은 string이 반환됨


function join(name:string, age:string):string
function join(name:string, age:number):User
function join(name:string, age:number | string): User | string{
   if(typeof age === 'number'){
      return{
         name,
         age
      }
   }else{
      return "나이는 숫자로 입력해주세요."
   }
}


// age를 number로 받았을때 User로 받을 수 있다. 
const sam: User = join("sam", 30)

// age가 string일때
const jane: string = join("jane", "31")