타입스크립트(TypeScript) - 함수 배운내용 정리2

출처 : 구글이미지

1. 함수

function plus(x: number, y: number): number {
  return x + y;
};

 타입스크립트는 타입을 명시한다. 위의 함수를 보면 숫자 두개를 인수로 받아서 더한 후 숫자를 반환한다. 이때 반환하는 타입은 자동으로 추론을 하고, 매개변수는 특별한 상황을 제외하고는 추론하지 않는다. 그래서 다음과 같이 작성해도 된다.

function plus(x: number, y: number) {
  return x + y;
};

 위의 코드와 다른점은 plus라는 함수의 결과 값으로 반환하는 타입을 지정해 주지 않은 차이이다. plus라는 함수를 호출해서 매개변수를 입력해보면 다음과 같은 결과가 나온다.

plus(5, 7); // 12
plus(2); // error 2개의 인수 필요한데, 1개만 입력됨
plus(1, 'hi'); // error number타입에 'hi'를 집어 넣을 수 없음

---

02 선택적(optional), 기본(default) 매개변수

 먼저 선택적 매개변수 코드를 작성해보자.

function showMessage(message: string, name?: string) {
  console.log(message, name || "Unknown User");
};

showMessage('hello', 'Carl'); // hello Carl
showMessage('bye'); // bye Unknown User

 ?를 이용해서 선택적 매개변수를 지정할 수 있다. showMessage라는 함수에 매개변수로 message와 name을 받는데, message는 반드시 인수로 보내주어야 하지만, name은 꼭 인수로 보내지 않아도 된다. 그래서 'bye'라는 메세지만 보냈을 때, 에러 없이 함수를 호출하고 실행되었다.

 자바스크립트에서는 매개변수를 기본값으로 지정할 수 있다. 타입스크립트도 마찬가지 이다. 그 코드를 작성해 보자.

function showMessage(message: string, name = "Unknown User") {
  console.log(message, name)
};

showMessage('bye', 'Carol'); // bye Carol
showMessage('re-bye'); // re-bye Unknown User

 name에 기본값을 제공하고 있다. 그래서 함수에 're-bye'만 보내도, 기본값으로 가지고 있던 'Unknown User'를 사용해서 값을 도출해 낸다. 

---

03. 호출 시그니처

 위에 작성했던 plus함수를 다시 보자.

function plus(x: number, y: number) {
  return x + y;
};

 plus함수는 두개의 숫자 인수를 받아서 그 값들을 더한 숫자를 반환한다. 다르게 표현하면 다음과 같다.

(x: number, y: number) => number;

 위의 코드를 호출 시그니처 또는 타입 시그니처라고 부른다. 함수를 인수로 전달하거나, 다른 함수를 반환하는 경우 이 문법을 활용할 수 있다. 호출 시그니처의 경우에는 타입수준의 코드이다. 그렇기 때문에 값이 아닌 타입 정보만 포함을 한다. 이렇게만 작성하면 이해하기 쉽지 않다. 호출 시그니처를 사용하는 코드를 작성해 보자

type Plus = (x: number, y: number) => number;
let plus: Plus = (x, y) => {
  return x + y;
};

type ShowMessage = (message: string, name?: string) => void;
let showMessage: ShowMessage = (message, name = 'Unknown User') => {
  console.log(message, name);
};

 입력 받는 인수들과 반환되는 타입들을 작성하고, 함수에 타입으로 지정해주면 된다! 코드를 보면 시그니처말고 변수에 함수를 할당할 때 매개변수에 타입을 지정해주지 않았다. 그 이유는 plus의 타입을 Plus로 지정을 해주었고, 문맥적 타입화라는 추론 기능 때문에, x와 y의 타입을 number로 추론했다.

---

04. 제네릭 타입 매개변수

 함수를 작성하다 보면 지금 당장 이 타입이 어떤 것인지를 모르겠지만, 함수를 호출 할 때마다 타입을 추론해야 했으면 할때 사용한다.

type NewArr = {
  <T>(array: T[], func: (arg: T) => boolean): T[],
};

function newArr: NewArr(array, func) {
  let newArr = [];
  for(let i = 0; i < array.length; i ++) {
    let val = array[i];
    if(func(val)) {
      newArr.push(val);
    };
  };
  return newArr;
};

newArr([1, 2, 3, 4, 5], x => x < 4);

 newArr에 주어지는 배열의 타입을 보고 T를 추론한다. 타입스크립트는 T의 타입을 추론해 내면 정의된 모든 T를 추론한 타입으로 대체한다. 그래서 제네릭은 플레이스홀더 타입이고, 타입 검사기가 문맥을 보고 플레이스홀더 타입을 실제 타입으로 채운다. 

// 제네릭 매개변수 선언 방법
type One = {
    <T>(array: T[], foo: (arg: T) => Boolean): T[]
}

type Two<T> = {
    (array: T[], foo: (arg: T) => Boolean): T[]
}

type Three = <T>(array: T[], foo: (arg: T) => Boolean) => T[];

type Four<T> = (array: T[], foo: (arg: T) => Boolean) => T[];

function five<T>(array: T[], foo: (arg: T) => Boolean): T[] {
  //...
}

 

공부.. 공부...