타입스크립트 기본(2) 함수편

다시한번 타입스크립트의 정의를 되새겨보자. 제로초님을 영접해보자.

 

타입스크립트란, 자바스크립트에 변수 매개변수 리턴값에 타입이 붙는것

 

이번 함수편에서는 인수(매개변수)와 리턴값에 대해 타입정의를 해나갈 것이다.

 

함수선언

밑에 간단한 함수를 선언해보자.

function increment(num) {
  return num + 1;
}

이 함수에 타입을 지정해주면,  인수와 리턴값기억!

function increment(num: number): number {
  return num + 1;
}

인수 num의 옆에  number라는 인수의 타입을 지정해주고 괄호() 옆에 :number를 지정함으로써 리턴값의 타입을 지정해 주었다.

만약 인수에 타입을 생략 할 경우에는 컴파일러는 any타입이라고 암묵적으로 해석한다.

리턴값의 타입을 생략 할 경우에는 컴파일러는 코드로부터 타입추론을 해준다.

 

 이름이 없는 함수(익명함수)

이름 그대로 함수에 이름이 붙어있지 않은 함수인데, 혹시 모를 분들을 위해 어떤 형태인지 간단히 알아보자.

const 변수명 = function () {};

이런 형태이다. 그럼 이제 이 익명함수에 타입을  정의하는 방법을 보자

const increment = function (n: number): number {
  return n + 1;
};

함수선언에서 봤던거와 같다. 결국 인수와 리턴값에 타입을 지정해주기만 하면 된다.

 

화살표함수

괄호안에 인수의 리스트를, 화살표 기호 => , 중괄호에 처리 내용을 쓰는 함수이다.

(인수) => {
  // 처리내용
};

일반적으로는 밑에와 같이 쓰는 경우가 많다.

const 변수명 = (인수) => {
  // 처리내용
};

이제 이 화살표 함수에 타입을 지정하는 것을 보자. 역시 위의 내용들과 일맥상통한다.

const increment = (n: number): number => {
  return n + 1;
};

 

이렇게 간단히 함수의 타입정의 하는 방법에 대해 알아보았다.