함수 (Function)
JavaScript 함수는 추상화 계층을 구축하거나 클래스 모방, 정보 은닉, 모듈에 대한 방법을 제공한다. TypeScript에서는 이러한 함수에 타입을 지정하는 것이 가능하다.
함수의 Typing
function add(x: number, y: number): number {
return x+y;
}
let myAdd = function(x: number, y: number): number {
return x + y
};각 파라미터와 함수 자신의 반환될 타입을 정해줄 수 있다. 다만 TypeScript가 반환문을 보고 반환 타입을 파악할 수 있으므로 반환 타입 지정을 생략할 수 있다.
let myAdd: (x: number, y: number) => number =
function(x: number, y: number): number { return x + y; };전체 함수 타입을 작성하고자 한다면 매개변수 타입과 반환 타입이 필요하다. 매개변수 타입들과 반환 타입 사이에 화살표 표기 =>를 써서 반환 타입을 분명히 할 수 있다. 만약 함수가 값을 반환하지 않는다면 비워두는 대신 void를 사용해 표시한다.
Type의 추론
// 매개변수 x와 y는 number 타입을 가진다.
let myAdd: (baseValue: number, increment: number) => number =
function(x, y) { return x + y; };TypeScript 컴파일러는 방정식의 한 쪽에만 타입이 있더라도 타입을 알아낼 수 있다.
선택적 매개변수와 기본 매개변수 (Optional Parameter & Default Parameter)
TypeScript에서는 모든 매개변수가 함수에 필요하다고 가정한다. (null이나 undefined 값도 인정한다.) 함수가 호출될 때, 컴파일러는 각 매개변수에 대해 사용자가 값을 제공했는지를 검사한다.
function buildName(firstName: string, lastName: string) {
return firstName + " " + lastName;
}
let result1 = buildName("Bob");
// Error. 매개변수 부족
let result2 = buildName("Bob", "Adams", "Sr.");
// Error. 매개변수 초과
let result3 = buildName("Bob", "Adams");
// "Bob Adams"JavaScript에서는 모든 매개변수가 선택적이라고 가정하고 사용자는 적합하다고 생각하면 비워둘 수 있다. 그렇게 둔다면 그 값은 undefined가 된다. TypeScript에서도 선택적 매개변수를 원한다면 매개변수 이름 끝에 ?를 붙임으로써 적용할 수 있다.
function buildName(firstName: string, lastName?: string) {
if(lastName)
return firstName + " " + lastName;
else
return firstName;
}
let result1 = buildName("Bob");
// 동작 가능
let result2 = buildName("Bob", "Adams", "Sr.");
// Error. 매개변수 초과
let result3 = buildName("Bob", "Adams");
// "Bob Adams"TypeScript에서는 유저가 값을 제공하지 않거나 undefined로 지정했을 때에 할당될 매개변수의 값을 정해 놓을 수 있다. 이것을 기본-초기화 매개변수라고 한다. 아래 예시에서 lastName을 "Smith"로 지정해본다.
function buildName(firstName: string, lastName = "Smith") {
return firstName + " " + lastName;
}
let result1 = buildName("Bob");
// 동작 가능, "Bob Smith" 반환
let result2 = buildName("Bob", undefined);
// 동작 가능, "Bob Smith" 반환
let result3 = buildName("Bob", "Adams", "Sr.");
// Error. 매개변수 초과
let result4 = buildName("Bob", "Adams");
// "Bob Smith" 대신 "Bob Adams"로 반환기본-초기화 매개변수는 선택적으로 처리되며, 선택적 매개변수와 마찬가지로 해당 함수를 호출할 때 생략할 수 있다.
만약 기본-초기화 매개변수가 필수 매개변수보다 앞에 오게 된다면 사용자가 명시적으로 undefined를 전달해 주어야 기본-초기화 매개변수를 사용할 수 있다.
function buildName(firstName = "Will", lastName: string) {
return firstName + " " + lastName;
}
let result1 = buildName("Bob");
// Error. 매개변수 부족
let result2 = buildName("Bob", "Adams", "Sr.");
// Error. 매개변수 초과
let result3 = buildName("Bob", "Adams");
// "Bob Adams"
let result4 = buildName(undefined, "Adams");
// "Will Adams"나머지 매개변수 (Rest Parameter)
다수의 매개변수를 그룹 지어 작업하기를 원하거나, 함수가 최종적으로 얼마나 많은 매개변수를 사용할 지 확정되지 않은 경우도 존재한다. TypeScript에서는 이 인자들을 하나의 변수로 모을 수 있다.
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
// employeeName = "Joseph Samuel Lucas MacKinzie"나머지 매개변수는 선택적 매개변수들의 수를 무한으로 취급한다. 나머지 매개변수로 인자들을 넘겨줄 때는 원하는 만큼의 수를 넘겨 줄 수도 있다. 아무것도 넘겨주지 않을 수도 있다. 컴파일러는 생략 부호 ...뒤의 이름으로 인자 배열을 빌드하여 함수에서 사용할 수 있도록 한다.
오버로드 (Overloads)
JavaScript는 원래 오버로딩을 지원하지 않는다. 하지만 TypeScript에서 매개변수의 갯수는 동일하게, 타입은 다르게 정의하여 사용할 수 있다. 다른 언어의 오버로딩은 method명만 같으면 되지만 TypeScript는 함수명과 매개변수의 갯수가 같아야 한다.
function greetBuilder(firstName: string, age?: number): void;
function greetBuilder(firstName: string, age: string): void;
function greetBuilder(firstName: string, age: number | string): any { ... }✓ this
JavaScript 함수 실행에서의
this는 global 객체이다.
함수 생성 시this를 참조하는 화살표 함수 (=>)를 사용해줄 수 있다.
