00.Function.type.md

0. 함수 타입

함수의 타입을 정의하는 방법

함수를 다른 사람에게 설명하는 가장 좋은 방법은 이 함수가 어떤 매개 변수를 받고 어떤 값을 반환하는지 이야기 하는 것

// 함수를 설명하는 가장 좋은 방법
// 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 설명
function func(a, b) {
  return a + b;
}

그럼 TS에서는 어떨까?

• JS에서 함수를 소개하는 방식과 비슷함
• 대신 타입만 추가하면 됨.
• 어떤 타입의 매개변수를 받고, 어떤 타입의 값을 반환하는지 이야기 하면 됨

따라서 함수의 타입은 다음과 같이 매개변수와 반환값의 타입으로 결정됨

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

참고로 함수의 반환값 타입은 자동으로 추론되기 때문에 다음과 같이 생략해도 됨

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

화살표 함수 타입 정의하기

화살표 함수의 타입 정의 방식은 다음과 같음. 함수 선언식과 동일함

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

화살표 함수 역시 반환값의 타입은 자동으로 추론됨

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

매개변수 기본값 설정하기

함수의 매개변수에 기본값이 설정되어있으면 타입이 자동으로 추론됨. 이럴 경우 타입 정의를 생략해도 됨

function introduce(name = "이정환") {
	console.log(`name : ${name}`);
}

기본값과 다른 타입으로 매개변수의 타입을 정의하면 오류가 발생함

function introduce(name:number = "이정환") {
	console.log(`name : ${name}`);
}

또 당연히 기본값과 다른 타입의 값을 인수로 전달해도 오류 발생

function introduce(name = "이정환") {
  console.log(`name : ${name}`);
}

introduce(1); // 오류

선택적 매개변수 설정하기

다음과 같이 매개변수의 이름뒤에 물음표를 붙여주면 선택적 매개변수가 되어 생략이 가능

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

introduce("이정환", 156);

introduce("이정환");

위 코드의 tall 같은 선택적 매개변수의 타입은 자동으로 undefined와 유니온 타입으로 추론됨. 따라서 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) {
	// 오류!
  console.log(`name : ${name}`);
  if (typeof tall === "number") {
    console.log(`tall : ${tall + 10}`);
  }
}