[ TypeScript ] 함수의 타입

함수의 타입

1. 기본 함수

• 함수는 매개 변수를 받아, 값을 리턴 한다.
• 따라서 매개 변수의 타입과, 리턴 값의 타입을 정해 줘야 한다.

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

• 여기서 함수의 리턴 값의 타입은 자동으로 추론되기 때문에 생략이 가능하다.

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


console.log(typeof(func(1,'a'))) // 😀 string

2. 화살표 함수

• 화살표 함수의 경우도 똑같다.

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

• 화살표 함수도 리턴 값의 타입이 추론 되기에 생략이 가능하다.

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

3. 매개변수의 기본값을 설정한 경우

• 함수의 매개변수에 기본값을 설정하면 해당 값의 타입이 자동으로 추론되기 때문에 매개변수에 따로 타입을 지정하지 않아도 상관없다.

function profile (name = "한대희") {
	console.log(`name : ${name}`);
}

4. 선택적 매개변수

• 매개변수 뒤에 ?를 붙여 해당 매개변수를 받아도 되고, 안 받아도 되도록 설정할 수 있다.
• 🔥 만약 '?' 를 붙여 선택적 매개변수로 만들어 준다면 해당 매개 변수는 undefined가 추가된 union타입으로 바뀐다.
• 아래의 코드를 예로 보면 현재 age가 number되어 있고 ?를 붙여 선택적 매개변수로 만들어 두었으므로 age의 타입을 살펴 보면 undefined | age 로 되어 있을 것이다.
• 🔥 추가적으로 선택적 매개변수는, 일반적인 매개변수 보다 뒤에 위치해야 한다.

function profile (name = "한대희", age?: number) {
	return `name : ${name}, age: ${age}`;
  }

console.log(profile ( '한대희', 30 )) // 😀 name : 한대희, age: 30

// 매개변수를 전달하지 않으면 undefined가 된다.
console.log(profile ( '한대희' )) // 😀 name : 한대희, age: undefined

5. 나머지 매개변수

• 나머지 매개 변수는 rest 매개변수라고 하는데 입력 받은 인자들을 배열로 묶어 주는 역할을 한다.
• 매개 변수에 ...rest라고 입력해 주면 된다. 여기서 rest는 원하는 텍스트로 입력해줘도 된다.
• rest 매개 변수는 언제 사용해야 할까?
• 예를 들어 입력 받은 숫자들을 모두 더해주는 함수가 있다고 가정해 보면, 몇개의 인자를 받을지 알 수 없기 때문에 매개 변수 하나하나 타입을 지정해 줄 수가 없다. 이러한 경우 rest 매개변수를 사용할 수 있다.

// 😀 인자들을 입력 받아 모두 더해주는 함수가 있다.
function getSum(...rest) {
  let sum = 0;
  rest.forEach((ele) => (sum += ele));
  return sum;
}

// 😀 위의 함수의 매개 변수의 타입을 지정해 줘야 하는데 ...rest는 입력받은 인자들을 배열로 묶어 주기 때문에 배열의 타입을 지정해야 한다.
function getSum(...rest: number[]) {
  let sum = 0;
  rest.forEach((ele) => (sum += ele));
  return sum;
}

console.log(getSum( 1,2,3,4,5)) // 15

함수 타입 표현식(Function Type Expression)

• Type Alias 방식으로 함수 타입을 정의 할 수도 있다.
• 이러한 방식은 여러개의 함수가 동일한 타입을 갖는 경우에 요긴하게 사용할 수 있다.

// 😀 매개변수의 타입을 지정하고, 리턴 값의 타입을 => 오른쪽에 지정한다.
type calc = (a: number, b: number) => number;

const add: calc = (a, b) => a + b;
const minus: calc = (a, b) => a - b;
const multiply: calc = (a, b) => a * b;
const divide: calc = (a, b) => a / b;

// 😀 아래와 같은 방식으로 타입을 지정해도 상관 없다.
const add:(a: number, b: number) => number = (a, b) => a + b;

호출 시그니쳐 ( call signature )

• 함수도 객체이기 때문에 Type Alias 방식으로 객체에 함수의 타입을 지정할 수도 있다.
• Interface를 활용해도 된다.

// 😀 중괄호를 열고 매개변수 타입을 입력하고 바로 리턴값의 타입을 지정하면 된다.
type calc = {
	(a: number, b: number) : number;
}
// 😀 interface를 활용
interface calc {
	(a: number, b: number) : number;
}

const add: calc = (a, b) => a + b;
const minus: calc = (a, b) => a - b;
const multiply: calc = (a, b) => a * b;
const divide: calc = (a, b) => a / b;