타입스크립트 - 함수

함수는 애플리케이션의 코드를 구성하는 기본 요소입니다. 타입스크립트에서 함수는 클래스나 네이스페이스 내에 선언할 수 있고 때론 모듈로서 사용됩니
다. 자바스크립트에서 함수를 선언했던 것과 동일한 방식으로 선언해 사용자가 원하는 단위 기능을 수행 할 수 있습니다. 다른 점이 있다면 함수의 매개변수나 반환값에 타입을 지정해 타입 안전성을 강화할 수 있습니다.

자바스크립트 함수

기명 함수와 익명 함수의 선언

함수의 이름을 명시해 선언하는 기명 함수(named function)와 함수의 이름을 명시하지 않고 사용하는 익명 함수(anonymous function)로 나뉩니다.

기명 함수는 호출될 때 호이스팅이 발생합니다. 따라서 함수를 선언하기 전에도, 함수를 선언한 후에도 호출 할 수 있습니다. 반면 익명 함수는 함수를 할당한
뒤에만 호출 할 수 있도록 제한 할 수 있습니다.

자바스크립트 함수의 불안전성

자바스크립트는 느슨한 타입언어 입니다. 매개변수의 타입이나 반환 타입은 없지만, 프로그램이 실행될 때 동적으로 타입을 할당해 추론된 타입이 지정됩니
다. 타입이 없기 때문에 런타임 때 의도하지 않은 타입 변환이 일어날수 있다는 문제가 있습니다. 타입을 고정할 수 없어 때로는 타입 안정성을 갖추기 위해
타입 검사와 타입 캐스팅과 같은 불필요한 코드를 추가할 수밖에 없습니다.

타입스크립트 함수

타입스크립트는 함수의 매개변수나 반환 타입을 추가해 타입 안전성을 강화합니다. 매개변수에 타입을 지정해 숫자 값만 받을 수 있도록 타입을 제한할 수
있고, 함수의 반환 타입을 지정해 잘못된 타입의 값이 반환되지 않도록 합니다.

1
function ex(x: number, y: number): number { ... }

위와 같이 함수에 매개변수 타입이나 반환 타입을 추가하는 과정을 함수에 대한 타입지정(typing)이라 합니다.

매개변수의 활용

기본 초기와 매개변수

기본 초기화 매개변수는 함수의 특정 매개변수에 인수가 전달되지 않으면 매개변수에 설정된 초깃값으로 값을 초기화하는 기능입니다.

1
x: number = 2

매개변수 목록에는 일반 매개변수와 기본 초기화 매개변수를 함께 선언할 수 있습니다.

1
function ex2(x: number, y: number = 2): number

나머지 매개변수

나머지 매개변수는 ES6에서 제안된 특징으로 개수가 정해지지 않은 인수를 배열로 받을 수 있는 기능입니다. 개수가 정해지지 않은 만큼 순서가 크게
중요하지 않은 여러 요소를 전달하는 데 유용합니다. 나머지 매개변수는 “…”형태로 선언합니다.

1
2
3
4
function rest(...restParams) {...}

// 나머지 매개변수에 타입 지정
function rest(...restParams: string[]) {...}

나머지 매개변수는 0개 이상의 요소를 받을 수 있습니다. 나머지 매개변수에 타입을 추가하면 지정한 타입의 인수만 받을 수 있습니다.

선택 매개변수

함수 호출 시 매개변수를 선언한 만큼 인수를 전달해야 합니다. 나머지 매개변수는 0개 이상의 인수를 받으므로 매개변수에 나머지 매개변수만 선언돼 있다
면 인수 전달을 생략해도 됩니다. 선택 매개변수는 변수명 뒤에 물음표를 붙이는 식으로 선언합니다. 선택 매개변수를 이용하면 선택 매개변수로 지정한 매개
변수는 생략이 가능합니다.

1
function select(a: number, b?: number): number {...}

함수 호출 시 함수에 선언된 매개변수는 2개지만, 두 번째 매개변수는 선택 매개변수를 사용함으로써 인수 하나를 생략해 호출하더라고 에러가 발생하지
않습니다. 앞에서 사용한 매개변수 초깃값을 설정하는 방법은 선택 매개변수와 결합해서 사용할 수 없습니다.

함수 오버로드

함수 오버로드는 함수명은 같지만, 매개변수와 반환 타입이 다른 함수를 여러 개 선언할 수 잇는 특징을 말합니다.

1
2
3
4
5
function add(a: string, b:string): string;
function add(a: number, b:number): number;
function add(a: any, b:any): any {
return a + b;
}

가장 일반적인 함수의 시그니처를 가장 아래에 선언하고 그 위로 구체적인 타입을 명시한 함수의 시그니처를 쌓는 방식으로 선언해야 합니다.
이때 매개변수의 개수가 다른 오버로드를 지정할 때는 선택 매개변수를 둬 매개변수 개수에 변화를 줄 수 있도록 허용할 수 있습니다.

익명 함수

익명 함수와 화살표 함수

화살표 함수(arrow function)는 ES6 표준에 포함된 익명 함수를 좀 더 간략하게 표현 할 수 있는 방법입니다. 파이선, C++, 자바 8에서는
화살표 함수를 ‘람다 함수(lambda function)’ 라고도 부릅니다.

1
2
3
() => {};
let x = () => {};
let y = x => { return x; };

매개변수가 1개일 때는 화살표 함수의 매개변수 목록에 있는 소괄호를 생략할 수 있습니다. 변수에 할당하지 않고 화살표 함수를 사용하려면 즉시 호출 함수를 이용해야 합니다.

1
2
(x => { x; })(1);
let iif = (x => { return x; })(1);

즉시 호출 함수가 반환값을 가져 변수에 할당해야 한다면 중괄호 내부에서 return 키워드를 사용, 실행하면 변수 iif에 즉시 호출 함수가 반환한
값이 할당 됩니다.

필터 메서드

필터 메서드는 배열에서 조건에 맞는 요소를 추출 하는데 사용합니다.

1
2
3
4
5
6
let numbers = [1, 2, 3, 4, 5];
numbers = numbers.filter(n => {
return n % 2 === 0;
})
console.log(numbers);
// 결과 [ 2, 4 ]

리듀스 메서드

배열 값의 합을 손쉽게 구할 때는 리듀스 메서드를 이용할 수 있습니다. 리듀스 메서드는 누산기의 원리처럼 배열의 요소를 왼쪽에서 오른쪽으로 더해나가
면서 누산된 값을 처리 할 수 있는 함수입니다.

1
[1, 2, 3, 4, 5].reduce((a,b) => { return a + b; })

리듀스 메서드의 첫 번째 매개변수는 누적된 값이고 두 번째 매개변수는 현재 카운터의 값입니다.

객체 리터러릥 선언과 객체 리터럴 타입의 선언

객테 리터럴은 여러 속성과 값을 한 단위로 묶어서 표현할 수 있는 객체입니다. 속성은 키(key)가 되고 값(value)은 숫자나 문자열뿐만 아니라
사용자가 정의한 객체도 할당 할 수 있습니다. 정의한 객체 리터럴 내부에서 다른 프로퍼티를 참조할 일이 많다면 객체 리터럴의 타입을 선언해 내부
참조를 함으로써 코드 어시스트가 동작하게 할 수 있습니다.

인터페이스를 이용해 객체 리터럴 타입을 선언
1
2
3
4
interface PersonType {
name: string;
hello(this: PersonType, name2: string): string;
}

유의할 점은 this 는 반드시 첫 번째 매개변수로 선언해야 합니다.

익명 함수의 함수 타입

익명 함수의 타입 선언

익명 함수는 변수에 할당할 수 있습니다. 함수 자체에 대한 타입을 함수 타입(function type)이라고 합니다.

1
let exFunc = function(str1: string, str2: string): string { return str1 + str2};

익명 함수의 매개변수나 반환값에 타입을 지정할 수 있지만 익명 함수가 구현체이므로 타입을 선언하면 형태가 복잡해집니다. 이러한 점을 개선하기 위해
익명함수에 선언된 타입을 별도로 분리해 함수 타입으로 선언하면, 쉽게 파악할 수 있습니다.

1
let exFunc: (str1: string, str2: string) => string = (str1, str2) => { return str1 + str2; };

함수 타입을 type 앨리어스 를 이용해 별도로 분리하면 반복적으로 사용할 수 있습니다.

1
2
3
type exType = (a: number, b: number) => number;
let addValue: exType = (a, b) => a + b;
let minusValue: exType = (a, b) => a - b;

각 변수에 함수 타입을 선언 했으므로 익명 함수의 매개변수 타입이나 반환 타입을 선언하지 않더라도 타입 안정성을 확보할 수 있습니다.

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×