[TypeScript] TypeScript 함수 타입 이해 - 3

 

1. 함수 타입
2. 함수 타입 표현식, 호출 시그니처
3. 함수 타입 호환성
4. 함수 오버로딩
5. 사용자 정의 타입 가드

 

---

 

함수 타입

- 매개변수, 반환값 타입 지정이 필요하다.

- 매개변수 필수 값이 아닌 경우 ? 를 사용하여 체크 할 수 있지만, 필수값 매게변수랑 값이 사용 시 필수값 뒤에 위치해야 한다. 

// 함수 타입 기본 정의
function func(a: number, b: number): number {
  return a + b;
}

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

// 함수의 매개변수
function introduce(name: string, age: number, tall?: number) {
  console.log(name);
  if (typeof tall === "number") {
    console.log(tall + 10);
  }
}
introduce("kim", 20, 180);
introduce("kim", 20);

function getSum(...rest: number[]) {
// function getSum(...rest: [number, number, number]) {
  let sum = 0;
  rest.forEach((v) => (sum += v));

  return sum;
}
getSum(1, 2, 3);

 

 

함수 타입 표현식, 호출 시그니처

- 함수 타입 표현식: 함수의 매개변수를 따로 별칭과 함께 함수 타입에 지정하는 방법

- 호출 시그니처 :함수 타입 표현식을 간결하여 지정하는 문법

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

// function func(a: number, b: number): number {}
// const func: (a: number, b: number) => number = (a, b) => a + b;

const add: Operation = (a, b) => a + b;
const sub: Operation = (a, b) => a - b; // 재사용 가능

// 호출 시그니처
type Operation2 = {
  (a: number, b: number): number;
}
const add2: Operation2 = (a, b) => a + b;
const sub2: Operation2 = (a, b) => a - b;

 

 

함수 타입 호환성

- 특정 함수 타입을 다른 함수 타입으로 취급해도 괜찮은지 판단하는 기준

- 호환 확인 대상: 반환값, 매개변수 

// 함수 타입 호환성

// 1. 반환값 호환성
type A = () => number;
type B = () => 10;

let a: A = () => 10;
let b: B = () => 10;

a = b;
// b = a; // error - 반환값이 Down Cast 인경우는 호환되지 않는다.

// 2. 매개변수 호환성
// 2.1. 매개변수 갯수가 같음
type C = (value: number) => void;
type D = (value: 10) => void;

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

// c = d; // error - 매개변수가 Up Cast 인경우는 호환되지 않는다.
d = c;

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);
};

// animalFunc = dogFunc; // error - 매개변수가 Up Cast 인경우는 호환되지 않는다.
dogFunc = animalFunc;

// 2.2. 매개변수 갯수가 다름
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; // error - 매개변수가 적은 타입으로만 호환이 가능하다.

 

 

함수 오버로딩

- 자바스크립트에서는 함수 오버로딩 개념이 없다. 타입스크립트에서만 있다.

- 하나의 함수를 매개변수 갯수나, 반환값을 다르게 하여 재정의 하는 것

// 함수 오버로딩

// 오버로딩 시그니처 작성
function func(a: number): void; // 타입스크립트 오버로딩 문법 : {} 사용 안함
function func(a: number, b: number, c: number): void;

// 실제 구현
function func(a: number, b?: number, c?: number) { // 최소한의 오버로딩 매개변수를 위해 작성
  if(typeof b === "number" && typeof c === "number"){
    console.log(a+b+c);
  }else{
    console.log(a);
  }
}

// 호출
// func(); // error - 해당 함수 없음
func(1);
// func(1, 2); // error - 해당 함수 없음
func(1, 2, 3);

 

 

사용자 정의 타입 가드

- 반환값 타입을 지정하는 is 타입스크립트 문법을 활용하여 타입을 확인하는 타입 가드 함수를 만들어서 사용하는 방법

- 외부 라이브러리를 사용하거나 소르소 문법을 작성하지 못하는 상황에서 사용하기 좋다.

// 사용자 정의 타입 가드
type Dog = {
  name: string;
  isBark: boolean;
};

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

type Animal = Dog | Cat;

function isDog(animal: Animal): animal is Dog { // 함수가 return 한다면 Dog 타입으로
  return (animal as Dog).isBark !== undefined;
}
function isCat(animal: Animal): animal is Cat { // 함수가 return 한다면 Cat 타입으로
  return (animal as Cat).isScratch !== undefined;
}

function warning(animal: Animal) {
  if (isDog(animal)) {
    console.log(animal.isBark ? "짖습니다" : "안짖어요");
  } else {
    console.log(animal.isScratch ? "할큅니다" : "안할퀴어요");
  }
}

 

 

출처

• 한 입 크기로 잘라먹는 타입스크립트(TypeScript)