Typescript(3) - 함수(1)

이번 포스팅에서는 함수의 타입선언에 대해 알아보겠습니다.
중요하기 때문에 두 포스팅으로 나눠서 작성하겠습니다.

함수

두 인자의 합을 반환하는 함수를 작성해보겠습니다.

javascript

fuction add(num1,num2){
    return num1 + num2;
}

일반적인 자바스크립트 문법으로 구현된 add함수입니다.
num1과 num2 모두 정수로 받아올것입니다.
하지만 num1,num2 모두 타입이 정의 되지 않았기 때문에
num1,num2 에 만약 string이 들어오게 된다면 값이 이상하게 나올 것입니다.

typescript로 변환

function add(num1:number,num2:number):number{
    return num1 + num2;
}
// number (정수) 를 return 하는 함수

function add(num1:number,num2:number):void{
    console.log(num1 + num2);
}
// 아무것도 return하지 않는 함수 - void

매개 변수

function sayHello(name:string){
    console.log(`hello ${name || "world"}`)
}

const result = sayHello() //error?

왜 error가 발생하나요?

sayHello() 함수에서 name값이 필수로 필요하기 때문입니다.
필수로 필요하지 않는값에 대해서는 ?로 처리할 수 있습니다.

function sayHello(name?:string){ // ?추가
    console.log(`hello ${name || "world"}`)
}

const result = sayHello() // no error!

이런식으로 명시적으로 작성해주어야 합니다.

function sayHello(name = "world"){
    console.log(`hello ${name}`)
}

const result = sayHello() // no error!

이 방법도 동일한 방법입니다. 에러가 나지 않습니다.
default로 world를 지정해주었고,
sayHello()에 매개변수가 들어간다면 world대신 매개변수의 value를 사용합니다.

선택적 매개변수는 필수 매개변수보다 뒤에

이게 무슨뜻인가 싶으실겁니다.

앞전에 얘기했던 필수 매개변수와 선택적 매개변수를 보시면

function sayHello(name:string){
    console.log(`hello ${name || "world"}`)
}
function sayHello(name?:string){
    console.log(`hello ${name || "world"}`)
}

이런식으로 물음표가 없다면 필수 매개변수
이런식으로 물음표가 없다면 선택적 매개변수

선택적 매개변수가 필수 매개변수보다 앞에 존재한다면 에러를 발생시킵니다.

function sayHello(name?:string, age:number){
    console.log(`hello ${name || "world"} my age is ${age}`)
}

// error!!

선택적 매개변수 name이 필수 매개변수 age보다 앞에 존재하기 때문에
에러가 발생합니다.

순서를 바꿔주면 될 것 같습니다.

다음 포스팅에서 계속 쓰겠습니다.