타입스크립트 4일차 - 함수

함수

타입스크립트의 함수는 자바스크립트의 함수를 그대로 사용하면서 반환값이나 파라미터에 타입을 추가함으로써 타입안전성을 높였습니다.
이 시간에는 함수를 간단하게 알아보겠습니다.

함수의 선언

자바스크립트에서는 기명함수와 익명함수를 선언할 수 있습니다.

1
function 함수명(파라미터){}

쉽게 말해서 위의 함수뼈대에서 함수명이 없으면 익명, 있으면 기명함수가 됩니다. 그리고 함수에서 자바스크립트의 특징인 호이스팅이 발생하게 됩니다.
즉, 호이스팅이 발생해서 선언전에도 함수의 사용이 가능하게 됩니다.
이것을 막기 위해서 아래와 같이 변수에 할당하여 사용하게 됩니다.

1
let 변수 = function (파라미터){}

함수의 직접사용 예제를 보겠습니다.

1
2
3
4
5
6
function ambiguity(str){
return str + 1000;
}

let result = ambiguity("1000");
console.log(result);

위와 같은 자바스크립트 함수에서 타입이 없기 때문에 무엇이 나올지 하나씩 디버깅하면서 오류발생하면 흐미… 하면서 잘 작동되기를 빌어야 하는데요.
이러한 기도를 조금이라도 줄이기 위해서 타입스크립트에서는 타입을 선언하여 사용할 수 있습니다.
타입스크립트 형으로 수정하면 다음과 같습니다.

1
2
3
4
5
6
function ambiguity(str: number) : number{
return str + 1000;
}

let result = ambiguity(1000);
console.log(result);

위와 같이 타입을 강제함으로써 불필요한 연산을 생략할 수 있게 됩니다.

  • 함수의 파라미터의 타입에 대한 검증
  • 만약 반환값이 변수라면 그 변수에 대한 검증

이러한 노가다를 줄여서 빠르게 개발할 수 있도록 도와줍니다.

파라미터(매개변수)

파라미터와 매개변수는 거의 동일하게 쓰인다고 저는 생각합니다만…
아무튼 타입스크립트에서는 앞에서 본것과 같이 기본 초기화 매개변수를 선언할 수 있습니다.

1
param1: number = 2

여기서 param1이라는 로컬변수에 number 타입을 강제하고 숫자 2를 기본으로 대입하였습니다.
이 기본값의 선언은 ES6의 기능이므로 ES6이상이라면 유사하게 컴파일이 가능합니다.

ES6에서 추가된 개수가 정해지지 않은 인수를 배열로 받을 수 있는 ...도 사용할 수 있습니다.

1
2
3
4
5
function concat(...rest){
console.log(rest.join("/"));
}

concat("a","b",1,2,true,false);

위의 식에서 rest에 모든 값이 들어오게 되고 rest를 활용하여 원하는 작업을 진행할 수 있습니다.

선택 매개변수

자바스크립트와 다르게 타입스크립트에서 함수 호출 시 선언된 갯수의 파라미터를 갖는 함수만 호출해서 쓸 수 있습니다.
그런데 가끔 파라미터가 몇개가 들어올 지 모르는 경우가 생깁니다. 그래서 ? 라는 선택매개변수를 지원합니다.

1
function 함수명(변수1: any, 변수2?: any){}

위의 식에서 변수2는 들어와도 되고 안들어와도 되는 선택매개변수가 됩니다.
즉, 함수명(파라미터1)함수명(파라미터2)는 모두 사용 가능하다는 뜻이죠.
딱하나 제약이 있다면 타입스크립트에서는 기본값과 선택매개변수를 동시에 쓸 수 없도록 해놓았습니다. 들어올지도 안들어올지도 모르는데 초기에 값을 줄 수는 없다는 얘기겠죠.

화살표함수

타 언어에서 람다식이라 불리는 화살표 함수를 지원합니다. 사용법은 다음과 같습니다.

1
(변수) => { // TODO }

익숙해지면 정말 편리하게 쓸 수 있는데요. 기본적으로 익명함수로 사용하게 되며 여기에 타입을 선언할 수 있습니다.
즉, 변수: 타입 이렇게 되겠네요.
추가적으로 reduce, filter 등의 연산도 지원하고 있어 for문과 다르게 객체의 순회를 좀 더 편하게 할 수 있도록 도와줍니다.

함수 오버로드와 오버라이드

자바나 C#에서는 함수의 오버로드와 오버라이드를 지원합니다.
타입스크립트에서도 C#의 영향을 받아서 그런지 유사하게 지원하고 있습니다. 그리고 컴파일 시 최적의 함수를 선택하도록 지원해서 JS실행시 런타임 비용이 발생하지 않도록 하고 있습니다.

오버로드

오버로드란 같은 이름의 함수를 여러개 선언해서 골라 쓸 수 있도록 하는 방법입니다.
바로 사용예제를 보겠습니다.

1
2
3
4
5
function add(a: string): string;
function add(a: number): number;
function add(a: any): any {
//TODO
}

위와 같이 같은 함수명으로 타입과 리턴타입만 다르게하여 선언이 가능하며 여기에 선택 매개변수를 활용하여 개수에 변화를 줘서 같은 리턴타입으로 여러개의 오버로드를 할 수 있습니다.

오버라이드

오버라이드란 부모의 함수를 내용만 뜯어고쳐서 사용할 수 있도록 하는 방법입니다.
타입스크립트는 그냥 타 언어와 같이 상속해서 쓰면 됩니다.
아래에서 간단한 예제를 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class A {
g(){
console.log('A');
}
}

class B extends A{
g(){
console.log('b');
}
}

let val:A = new B();
val.g();

B의 객체를 생성해서 함수를 사용하게 되면 A에서 선언된 함수를 사용하지 않고 B의 함수를 사용합니다.
만약 상위 클래스의 함수나 속성등을 사용하고 싶으시다면 _super를 사용하시면 불러올 수 있습니다.

마무리

간단하게 함수에 대해서 알아봤습니다.
일급객체, 호이스팅, 콜백함수 등 다른 함수에 관한것들은 JS를 한번 참조하시면 좋을 것 같습니다.
다음에는 클래스와 인터페이스 입니다.