[Typescript] 함수(1)

1️⃣ 함수 매개변수

이런식으로 코드를 작성한다고 해보자.

function sing(song){
	console.log(song);
}

/*함수호출*/
sing("LALALALA");

 

함수 호출시  "LALALALA"는 string인데 sing 함수를 작성한 개발자는 song 매개변수를 제공하기 위해 의도한 값의 타입을 적어주지 않았다. 

즉, song인자로 int가 올지 string이 올지 객체가 올지 그 누구도 알 수 없다.

function sing(song:string){  /*명시적 타입 정보 선언*/
    console.log(song);
}
/*함수호출*/
sing("LALALALA");

따라서 위와 같이 반드시 명시적 타입 정보를 선언해주어야한다.

 

🚩필수  매개변수

JavaScript에서는 인수의 수와 상관없이 함수의 호출이 가능하다. 하지만 TypeScript는 함수에 선언된 모든 매개변수가 필수라고 가정한다. 

만약 함수가 잘못된 수의 인수로 호출되면 TypeScript는 타입 오류의 형태로 이의를 제기한다.

function sing(song:string,songNumber : number){
    console.log(song);
} 

sing("LALALALA",12342); /*OK*/
sing("LALALALA") /* Error */

 

🚩선택적 매개변수

JavaScript에서 함수 매개변수가 제공되지 않으면 함수 내부의 인수값은 undefined로 기본값이 설정된다.

함수 매개변수를 반드시 제공할 필요가 없을때도 있고 undefined 값을 위해 의도적으로 사용할 수도 있다.

우리는 TypeScript에서 이러한 선택적 매개변수에 인수를 제공하지 못하는 경우, 타입 오류를 report하지 않았으면 한다.

이 때 사용할 수 있는 것이 선택적 매개변수로 타입 애너테이션의 : 앞에 ? 를 추가해 매개변수가 선택적이라고 표시한다.

 

💥 함수 호출에 선택적 매개변수를 제공할  필요는 없다. ( | undefined가 유니언 타입으로 추가되어 있기 때문 )

 

function playSong(song:string,singer?:string){
    console.log(`song:${song}`);
    if (singer){
        console.log(`singer:${singer}`);
    }
}

playSong("LALALAL");    /*OK*/
playSong("LALALAL","Jude");     /*OK*/
playSong("LALALALA",undefined);    /*OK*/

 

🚩기본 매개변수

JavaScript에서 선택적 매개변수를 선언할 때 = 와 값이 포함된 기본값을 제공할 수 있다.

선택적 매개변수 + 기본값 제공 의 개념으로 해당 타입에는 암묵적으로 | undefined 유니언 타입이 추가된다.

함수 매개변수에 대해 인수의 누락이 가능하며 undefined 인수를 사용하여 호출 또한 가능하다.

function playSong(song:string,price=10000){
    console.log(`song:${song},price:${price}`);
}

playSong("LALALAL");    /*OK*/
playSong("LALALALA",undefined);     /*OK*/
playSong("LALALAL",500);    /*OK*/

 

price는 number | undefined가 된다.

 

🚩나머지 매개변수

JavaScript의 일부 함수는 임의의 수의 인수로 호출할 수 있도록 만들어진다. 

. . . 스프레드 연산자는 함수 선언의 마지막 매개변수에 위치하고 해당 매개변수에서 시작해 함수에 전달된 '나머지'인수가 모두 단일  배열에  저장되어야 함을 나타낸다.

 

TypeScript는 이러한 나머지  매개변수의 타입을 일반 매개변수와 유사하게 선언할 수 있다. 단, 인수배열을 나타내기  위해 끝에 []구문이 추가된다는 점만 다르다.

function playSong(singer:string,...songs:string[]){
    for (let song of songs){
        console.log(`${song},by ${singer}`);
    }
}

playSong("Kim");        /*OK but not printed*/
playSong("DPR Live","Jasmine");     /*OK*/
playSong("Babylon","As time goes by","혼자하는 사랑");  /*OK*/

2️⃣ 반환 타입

TypeScript의 반환 타입은 함수가 반환할 수 있는 가능한 모든 값을 이해하는것에서 시작된다.

function playSong(singer:string,...songs:string[]){
    for (let song of songs){
        console.log(`${song},by ${singer}`);
    }
    return songs.length;
}

/* 반환타입 : number */

function playSong2(singer:string,...songs:string[]){
    for (let song of songs){
        return song.length > 10
        ? song : undefined;
    }
}

/* 반환타입 : string | undefined */

 

🚩명시적 반환 타입

함수의 반환 타입을 명시적으로 선언하지 않는 것이 좋으나 명시적 선언이 유용할 때가 종종 있다.

• 가능한 반환값이 많은 함수가 항상 동일한 타입의 값을 반환하도록 강제
• Typescript는 재귀 함수의 반환 타입을 통해 타입을 유추하는 것을 거부
• 큰 프로젝트에서 타입스크립트 파일에서의 타입 검사 속도를 높일 수 있음.

function singSongsRecursive(songs: string[], count = 0): number {
  return songs.length ? singSongsRecursive(songs.slice(1), count + 1) : count;
}

/*화살표 함수*/

const singSongsRecursiveArrow = (songs:string[],count=0) : number =>
    songs.length ? singSongsRecursiveArrow(songs.slice(1),count+1) : count;

 

함수의 반환문이 함수의 반환 타입으로 할당할 수 없는 값을 반환하는 경우 TypeScript는 할당 가능성 오류를 표시한다.