[TypeScript] 함수와 타입

함수 타입

함수 타입을 정의한다는 것은 어떤 타입의 매개변수를 받고, 어떤 타입의 결과값을 반환하는 지를 정의하는 것이다. 타입스크립트에서 일반적인 함수 선언문의 타입을 정의하는 방법은 아래와 같다.

function func(a: number, b: number): number {
  return a + b;
}

타입스크립트는 반환문을 기준으로 반환값의 타입을 자동 추론할 수 있기 때문에 반환값 타입을 생략할 수 있다.

function func(a: number, b: number) {
  return a + b;
}

 

화살표 함수 타입 정의

화살표 함수의 타입을 정의하는 방법은 아래와 같다. 마찬가지로 반환값의 타입은 자동으로 추론 가능하다.

const func = (a: number, b: number): number => a + b;

 

함수의 매개변수

매개변수 기본값

함수의 매개변수에는 기본값을 설정할 수 있다. 이 경우 해당 매개변수는 타입을 정의하지 않아도 자동으로 추론된다.

function introduce(name="은경") {
  console.log(`name: ${name});`
} 
introduce(); // 은경

선택적 매개변수

매개변수 이름 뒤에 ?를 붙이면 생략할 수 있는 선택적 매개변수로 만들어 줄 수 있다.

function introduce(name="은경", tall?: number) {
  console.log(`name: ${name}`); 
  console.log(`tall: ${tall}`); 
}

위 예제의 경우 매개변수 tall은 자동으로 number 타입과 undefined 타입의 유니온 타입으로 추론된다. 따라서 함수 내부에서 number 타입으로서 연산 혹은 메서드를 호출하고 싶다면 타입 좁히기가 필요하다.

function introduce(name = "은경", tall?: number) {
  console.log(`name: ${name}`); 
  if (typeof tall === "number") { 
    console.log(`tall: ${tall + 10}`); 
  } 
}

이때 주의할 점은 선택적 매개변수가 필수 매개변수보다 앞에 올 수 없다는 것이다.

function introduce(name="은경", tall?: number, age: number) { // ❌ 오류 발생
  (...)
}

나머지 매개변수

나머지 매개변수를 사용하여 몇개의 숫자 타입의 값이 들어오든지 간에 그 값들의 합을 구하는 함수를 만든다고 가정해보자. 이때 나머지 매개변수에는 number 타입의 인수들을 담을 배열이 들어오므로 아래와 같이 타입을 정의할 수 있다.

function getSum(...rest: number[]) {
  let sum = 0;
  rest.forEach((it) => (sum += it));
  return sum;
}

getSum(1, 2, 3); // 6
getSum(1, 2, 3, 4, 5); // 15

만약 나머지 매개 변수의 길이를 고정하고 싶다면 튜플 타입을 사용할 수 있다.

function getSumOfThree(...rest: [number, number, number]) {
  let sum = 0;
  rest.forEach((it) => (sum += it));
  return sum;
}

getSumOfThree(1, 2, 3); // 6
getSumOfThree(1, 2, 3, 4, 5); // ❌

---

함수 타입 표현식

함수 타입 표현식(Function Type Expression)이란 함수 타입을 타입 별칭과 함께 별도로 정의한 것이다. 함수 타입 표현식을 이용하면 함수 타입 선언과, 함수의 선언 및 코드 구현을 분리할 수 있다.

type Add = (a: number, b: number) => number; // 함수 타입 표현식

const add: Add = (a, b) => a + b;

또한 함수 타입 표현식을 사용하면 아래와 같이 여러 개의 함수가 동일한 타입을 가질 때 유용하게 사용할 수 있다.

type Operation = (a: number, b: number) => number;
const add: Operation = (a, b) => a + b;
const sub: Operation = (a, b) => a - b;
const multiply: Operation = (a, b) => a * b;
const divide: Operation = (a, b) => a / b;

---

호출 시그니처

호출 시그니처(Call Signature)는 함수 타입 표현식과 마찬가지로 함수 타입을 별도로 정의하는 방식 중 하나다. 호출 시그니처는 함수의 타입을 마치 객체의 타입을 정의하 듯 정의한다. 이는 자바스크립트에서는 함수도 객체이기 때문에 가능하다.

type Operation2 = {
  (a: number, b: number): number;
};

const add2: Operation2 = (a, b) => a + b;
const sub2: Operation2 = (a, b) => a - b;
const multiply2: Operation2 = (a, b) => a * b;
const divide2: Operation2 = (a, b) => a / b;

하이브리드 타입

호출 시그니처 아래에 프로퍼티를 추가 정의하면, 해당 타입을 사용하는 변수는 함수로도 사용할 수 있고, 일반 객체로도 사용할 수 있다.

type Type = {
  (a: number): void;
  name: string;
};

const func: Type = (a) => {
  console.log(a);
};
func(1);
func.name = "func";

---

함수 타입의 호환성

함수 타입의 호환성은 기본 타입, 객체 타입 호환성과 마찬가지로 특정 함수 타입을 다른 함수 타입으로 취급해도 괜찮은지를 판단하는 것이다. 함수 타입의 호환성은 두 가지를 기준으로 판단할 수 있다.

1. 반환값의 타입이 호환되는가
2. 매개변수의 타입이 호환되는가

기준1. 반환값 타입이 호환되는가

type A = () => number;
type B = () => 10;

let a: A = () => 10; // number 타입 반환
let b: B = () => 10; // 10 Number Literal 타입 반환

a = b; // ✅
b = a; // ❌

위의 예제에서 함수 a의 반환값 타입은 number 타입이고, 함수 b의 반환값 타입은 10 Number Literal 타입이다. 이 경우, a에 b를 할당하는 것은 가능하지만, b에 a를 할당하는 것은 불가능하다. 즉, 할당되는 함수 타입의 반환값이 할당하려는 함수 타입의 반환값의 슈퍼 타입인 경우 두 함수 타입은 호환된다.

기준2. 매개변수 타입이 호환되는가

매개변수의 타입이 호환되는지 여부는 '매개변수의 개수가 같을 때'와 '매개변수의 개수가 다를 때'로 나눌 수 있다.

매개변수의 개수가 같을 때

type C = (value: number) => void;
type D = (value: 10) => void;

let c: C = (value) => {};
let d: D = (value) => {};

c = d; // ❌ 업캐스팅일 때 불가
d = c; // ✅ 다운캐스팅일 때 가능

위 예제에서 C 타입의 매개변수 타입이 D 타입의 매개변수 타입보다 넓다(C 타입의 매개변수 타입이 D 타입의 매개변수 타입의 슈퍼 타입이다.). 이 경우에 C 타입인 함수 c에 D 타입인 함수 d를 할당하는 것이 불가능하며, 그 반대는 가능하다. 즉, 반환값과는 다르게 매개변수의 개수가 같은 경우에 할당되는 함수 타입의 매개변수 타입이 할당하려는 함수 타입의 매개변수 타입의 서브 타입인 경우 두 함수 타입은 호환된다.

 

객체의 경우를 살펴보면 왜 그런지 좀 더 명확하게 이해가 가능하다.

type Animal = {
  name: string;
};

type Dog = {
  name: string;
  color: string;
};

let animalFunc = (animal: Animal) => {
  console.log(animal.name);
};

let dogFunc = (dog: Dog) => {
  console.log(dog.name);
  console.log(dog.color);
};

위 예제에서 Animal 타입은 Dog 타입의 슈퍼 타입이다. 각 타입을 사용하는 animalFunc에 dogFunc를 할당하려고 할 때를 생각해보자.

animalFunc = dogFunc; // ❌

let testFunc = (animal: Animal) => {
  console.log(animal.name);
  console.log(animal.color); // ?
};

타입이 더 넓은 animalFunc 변수에 dogFunc를 할당하는 것을 코드로 나타내보면 testFunc와 같이 표현할 수 있다. 하지만 이 경우, Animal 타입에는 없는 color 프로퍼티에 접근하려고 하기 때문에 당연히 오류가 발생한다. 따라서, 더 넓은 타입의 매개변수를 가진 함수에 좁은 타입의 매개변수를 가진 함수를 대입할 수 없다.

 

매개변수의 개수가 다를 때

매개변수의 개수가 다를 때는 매개 변수가 더 많은 쪽에 매개 변수가 더 적은 쪽을 할당할 수 있으며, 그 반대는 불가능하다.

type Func1 = (a: number, b: number) => void;
type Func2 = (a: number) => void;

let func1: Func1 = (a, b) => {};
let func2: Func2 = (a) => {};

func1 = func2; // ✅
func2 = func1; // ❌

 

---

함수 오버로딩

함수 오버로딩이란 함수를 매개변수의 개수나 타입에 따라 여러가지 버전으로 정의하는 것을 의미한다. 자바스크립트에서는 함수 오버로딩을 지원하지 않으며, 타입스크립트에서는 사용할 수 있다.

 

함수 오버로딩을 사용하기 위해서는 가장 먼저 하나의 함수가 가질 수 있는 종류를 정의하는 오버로드 시그니처 정의가 필요하다. 그리고 해당 함수가 어떻게 실행될 것인지를 정의하는 구현 시그니처를 정의해야 한다.

// 버전들 → 오버로드 시그니처
function func(a: number): void; // 버전1
function func(a: number, b: number, c: number): void; // 버전2

// 실제 구현부 → 구현 시그니처
function func() {}

func(); // ❌
func(1); // ✅ 버전1
func(1, 2); // ❌
func(1, 2, 3); // ✅ 버전2

위 예제에서 구현 시그니처의 함수 매개변수에 아무것도 없기 때문에 func()만이 오류없이 동작할 것 같지만, 그렇지 않고 오버로드 시그니처에서 정의한 것과 일치하는 호출만 정상적으로 사용할 수 있다.

 

구현 시그니처를 정의할 때 매개변수 타입은 모든 시그니처와 호환되도록 만들어야 한다. 따라서 위 예제의 경우 b와 c를 선택적 매개변수로 만들어서 첫번째 오버로드 시그니처와 호환될 수 있도록 만들어주어야 한다.

function func(a: number, b?: number, c?: number) {
  if (typeof b === "number" && typeof c === "number") {
    console.log(a + b + c);
  } else {
    console.log(a * 20);
  }
}

func(1);
func(1, 2, 3);

---

사용자 정의 타입 가드

사용자 정의 타입 가드란 참 또는 거짓을 반환하는 함수를 이용해 사용자 정의대로 타입 가드를 만들 수 있는 문법이다.

type Dog = {
  name: string;
  isBark: boolean;
};

type Cat = {
  name: string;
  isScratch: boolean;
};

type Animal = Dog | Cat;

function warning(animal: Animal) {
  if ("isBark" in animal) {
    animal;
  } else if ("isSractch" in animal) {
    animal;
  }
}

위 예제에서 warning 함수 안에서 타입 가드를 사용하여 animal을 Dog 타입 혹은 Cat 타입으로 좁히려고 하고 있다. 하지만 이는 가독성도 떨어지고, 만약 프로퍼티 이름이 바뀌면 타입 가드의 코드도 변경해주어야 한다는 문제가 있다. 이럴 때 사용자 정의 타입 가드를 사용하는 것이 좋다.

function isDog(animal: Animal): animal is Dog {
  return (animal as Dog).isBark !== undefined;
}

function isCat(animal: Animal): animal is Cat {
  return (animal as Cat).isScratch !== undefined;
}

function warning(animal: Animal) {
  if (isDog(animal)) {
    animal;
  } else if (isCat(animal)) {
    animal;
  }
}

이처럼 사용자 정의 타입 가드를 정의하는 함수에서 반환값의 타입을 매개변수명 is 타입으로 정의하면 해당 함수가 true를 반환하면 매개변수가 해당 타입임을 보장한다는 의미가 된다. 따라서 위 예제에서 warning 함수의 첫 번째 조건문 내부에서는 animal이 Dog 타입으로 좁혀지고, 두 번째 조건문 내부에서는 Cat 타입으로 좁혀진다.

 

---

참고

본 포스트는 이정환님의 '한 입 크기로 잘라먹는 타입스크립트(TypeScript)' 강의를 수강하며 작성하였습니다.

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런