함수 타입 표현식과 호출 시그니쳐

한 입 크기로 잘라먹는 타입스크립트 - 함수 타입 표현식과 호출 시그니쳐
-> 함수의 타입을 별도로 정의하는 방법

1. 함수 타입 표현식 (호출 시그니쳐, 함수 시그니쳐 로도 불리지만 공식문서에선 함수 타입 표현식으로 소개함)
타입 별칭을 이용해서 함수의 타입 정의 가능.

- chapter1.ts

/**
 * 함수 타입 표현식
 */
type Add = (a: number, b: number) => number;
// const add = (a: number, b: number): number => a + b;
const addFunc: 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;

// 타입 별칭 없이 표현식 만으로도 타입 정의 가능
const addFunc2: (a: number, b: number) => number = (a, b) => a + b;
// 함수의 타입을 표현식으로 정의시, 매개변수의 개수와 타입 다 맞춰줘야 함
// const addFunc2: (a: number, b: number) => number = (a, b, c) => a + b;

2. 호출 시그니쳐 (콜 시그니쳐)
또 다른 방법으로 함수의 타입 분리해서 정의 가능.
함수 타입 표현식과 동일한 기능.

- chapter1.ts

...
/**
 * 호출 시그니쳐
 * (콜 시그니쳐)
 */
// 객체 타입 정의하듯 하는 이유는, 자바스크립트의 함수도 객체기 때문.
// 하이브리드 타입 - 잘 사용할 일 없음
type Operation2 = {
    (a: number, b: number): number;
    name: string; // 프로퍼티 추가 정의
};

// 함수의 매개변수 부분부터 반환값 부분까지 떼 놓은 것
function func(a: number): void {}

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;

add2(2, 4); // 함수 호출
add2.name = '이름'; // 객체 사용하듯 사용 가능

참고링크 : https://reactjs.winterlood.com/0f33b159-6b19-433b-8db4-68d6b4a122e0

3. 객체 자료형 자세히 살펴보기 - 2. 자바스크립트 실전

 

참고링크 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#

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