함수
TypeScript함수는 javaScript와 마찬가지로 기명 함수(named function), 익명함수(anonymous function)로 만들 수 있다. 이를 통해 API에서 함수 목록을 작성하든 일회성 함수를 써서 다른 함수로 전달하든 애플리케이션에서 가장 적합한 방법을 선택할 수 있다.
함수 타입
함수의 타이핑
function add(x:number,y:number):number{
return x+y;
}
let myAdd=function(x:number, y:number):number {return x+y};
함수타입 작성하기
함수에 타입을 붙였으니 이제 함수 타입들을 살펴보고 함수의 전체 타입을 작성해보자.
let myAdd: (x:number, y:number) => number =
function(x:number, y:number):number {return x+y;};함수의 타입은 매개변수의 타입과 반환 타입이 있다. 전체 함수 타입을 작성하고자 한다면 이 두 가지 타입이 필요하다. 매개변수 목록처럼 각 매개변수에 이름과 타입을 작성해 주자. 작성하는 이름은 가독성을 위한 것이다. 위 코드는 아래처럼 쓸 수 있다!
let myAdd :(baseValue:number, increment:number) => number =
function(x:number, y:number):number {return x+y;};매개변수의 타입들이 올바르게 나열되어 있다면 함수 타입에 이름을 붙이더라도 유효한 타입으로 간주한다.
두 번째로 반환 타입이다. 매개변수 타입들과 반환 타입 사이에 '화살표 표기'(=>)를 써서 반환 타입을 분명히 할 수 있다. 이전에 언급했듯이 함수 표기에 필요한 부분이다. 만약 함수가 값을 반환하지 않는다면 비워두는 대신 void를 써서 표시한다.
타입의 추론
TypeScript 컴파일러가 방정식의 한쪽에만 타입이 있더라도 타입을 알아낼 수 있다!
//myAdd는 전체 함수 타입을 가진다
let myAdd=function (x:number, y:number):number {return x+y};
//매개변수 x와 y는 number타입을 가진다
let myAdd:(baseValue:number, increment:number)=>number =
function(x,y){return x+y};이러한 타입 추론 형태를 "contextual typing"이라 부른다.
선택적 매개변수와 기본 매개변수
TypeScript에서는 모든 매개변수가 함수에 필요하다고 가정한다. 이것이 null이나 undefined를 줄 수 없다는 것을 의미하는 것은 아니다.
대신 함수가 호출될 때, 컴파일러는 각 매개변수에 사용자가 값을 제공했는지를 검사한다. 함수에 주어진 인자의 수 = 함수가 기대하는 매개변수의 수
function buildName(firstName:string, lastName:string){
return firstName+ " " + lastName;
}
let result1=buildName("Bob"); //오류, 너무 적은 매개변수
let result2=buildName("Bob", "Adams", "Sr.");//오류 너무 많은 매개변수
let result3=buildName("Bob","Adams");//정확함TypeScript에서도 선택적 매개변수를 원한다면 매개변수 이름 끝에 ?를 붙임으로써 해결할 수 있다.
function buildName(firstName:string, lastName?:string){
if(lastName)
return firstName + " " +lastName;
else
retrun firstName;
}
let result1= buildName("Bob");// 지금은 바르게 동작
let result2=buildName("Bob","Adams","Sr.");//오류,너무 많은 매개변수
let result3=buildName("Bob","Adams"); //정확함This
This와 화살표 함수
JavaScript에서 this는 함수가 호출될 때 정해지는 변수다. 매우 강력하고 유연한 기능이지만 이것은 항상 함수가 실행되는 콘텍스트에 대해 알아야 한다는 수고가 생긴다.
특히, 함수를 반환하거나 인자로 넘길 때 혼란스러움 ㅠㅠ
예시를 보면,
let deck ={
suits:["hearts","spades","clubs","diamonds"],
cards:Array(52),
createCardPicker:function(){
return function(){
let pickedCard=Math.floor(Math.random()*52);
let pickedSuit=Math.floor(pickedCard/13);
return {suit:this.suits[pickedSuit], card:pickedCard %13};
}
}
let cardPicker=deck.createCardPicker();
let pickedCard=cardPicker();
alert("card: "+pickedCard.card +"of"+pickedCard.suit);=> createCardPicker가 자기 자신을 반환하는 함수. 이 예제를 작동시키면 기대했던 경보 창 대신 오류가 발생할 것이다. createCardPicker에 의해 생성된 함수에서 사용 중인 this가 deck객체가 아닌 window에 설정되었기 때문이다. cardPicker()의 자체적인 호출때문에 생긴 일이다.
위를 화살표 함수를 바꾸게 되면 화살표 함수는 함수가 호출된 곳이 아닌 함수가 생성된 쪽의 this를 캡쳐한다.
let deck ={
suits:["hearts","spades","clubs","diamonds"],
cards:Array(52),
createCardPicker:function(){
//NOTE:아랫줄은 화살표 함수로써, 'this'를 이곳에서 캡처할 수 있도록한다
return ()=>{
let pickedCard=Math.floor(Math.random()*52);
let pickedSuit=Math.floor(pickedCard/13);
return {suit:this.suits[pickedSuit], card:pickedCard %13};
}
}
let cardPicker=deck.createCardPicker();
let pickedCard=cardPicker();
alert("card: "+pickedCard.card +"of"+pickedCard.suit);