[함수와 타입] 함수 타입

해당 게시글은

강의 사이트, 인프런에서 이정환님이 진행하시는

'한 입 크기로 잘라먹는 타입스크립트' 를

들어보며 블로그를 작성하려고 합니다.

다음 게시글 내용은 해당 강의에 핸드북의 내용으로

출처는 다음과 같습니다.

 

https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2

타입스크립트를 소개합니다 - 타입스크립트 개론

 

section4/chapter0.ts 에서 실습과 함께 진행합니다.

 

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

다음과 같은 자바스크립트 함수가 있을 때,

이 함수를 다른 사람에게 설명하는 가장 좋은 방법은

이 함수가 어떤 매개변수를 받고 어떤 값을 반환하는지

이야기하는 것입니다.

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

 

그럼 타입스크립트에서는 어떨까요?

자바스크립트에서 함수를 소개하는 방식과 비슷합니다.

대신 타입만 추가되면 됩니다.

어떤 타입의 매개변수를 받고,

어떤 타입의 값을 반환하는지

이야기하면 됩니다.

따라서 함수의 타입은 다음과 같이 

매개 변수와 반환값의 타입으로 결정됩니다.

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

 

나머지 매개변수

자바스크립트의 rest 파라미터(나머지 매개변수) 관련 내용입니다.

혹시 아직 rest 파라미터에 대해 모른다면 아래의 게시글을 참고하세요.

https://reactjs.winterlood.com/4e81b92b-4097-4fd8-8c67-09a7588c94d6#c027776dc2ea440d9867381b8ec296fe

6. 스프레드 연산자와 rest 매개변수 - 2. 자바스크립트 실전

 

다음과 같이 여러 개의 숫자를 인수로 받는 함수가 있다고 가정하겠습니다.

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

getSum 함수는 나머지 매개변수 rest 로 배열 형태로

number 타입의 인수들을 담은 배열을 전달받습니다.

 

이때 rest 파라미터의 타입은 다음과 같이 정의하면 됩니다.

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

 

이때 만약 나머지 매개변수의 길이를 고정하고 싶다면

다음과 같이 튜플 타입을 이용해도 됩니다.

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

getSum(1, 2, 3)    // ✅
getSum(1, 2, 3, 4) // ❌