[TS] 함수

DT-HYUNJUN·2023년 12월 11일

Typescript

목록 보기
6/11

함수

함수 타입 정의

우리가 함수를 설명할 때 하는 방법 중 하나는

이 함수가 매개변수로 어떤 값을 받고, 반환값으로 어떤 값을 반환하는지를 설명하는 방법이다.

그렇기에 함수의 타입을 정의할 때, 이와 같은 방법으로 두 가지의 타입을 정의하면 된다.

  • 매개변수 (parameter)
  • 반환값 (return value)

어떤 타입의 매개변수를 받고, 어떤 타입의 반환값을 반환하는지 정의해주면 함수 타입을 정의할 수 있게 된다.

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

화살표 함수

func()함수는 number 타입인 ab매개변수로 받고 number타입 값을 반환하는 함수라고 타입을 정의할 수 있다.

화살표 함수도 동일한 방법으로 타입을 정의할 수 있다.

const arrowFunc = (a: number, b: number): number => {
  return a + b
}

함수의 매개변수

매개변수의 초기값은 func(매개변수 = 초기값)으로 설정할 수 있다.

타입은 초기값의 타입으로 추론이 되기에 따로 단언할 필요는 없다.

function func1(name = "Park"): void {}

또한 선택적 매개변수같은 경우에는 매개변수에 ?를 붙여 표시한다.
단, 선택적 매개변수에 경우에는 필수 매개변수 뒤에 위치해야 한다.

function func2(name = "Park", age?: number): void {}

function func2Error(age?: number, name = "Park"): void {} // error

rest 매개변수

매개변수로 여러개의 값을 받을때는 rest 문법을 사용해서 받는다.

예를 들어, 여러 개의 숫자를 받고 합계를 반환하는 함수의 타입을 정의할 때는

(...rest: number[]) number타입의 배열을 매개변수의 타입으로 정의한다.

function funcRest(...rest: number[]): number {
  let sum = 0
  rest.forEach((num) => sum += num)
  return sum
}

let value = funcRest(1, 2, 3)

...spread 연산자라고 부른다.

배열이나 문자열앞에 ...을 붙이면 개별 요소로 분리할 수 있다.

인자값으로 주는 1, 2, 3...rest으로 받으니 반대로 하면 [1, 2, 3]rest[]로 받는다는 뜻이다.

함수 타입 표현식

함수의 타입도 따로 정의할 수 있다.

type Operation = (a: number, b: number) => number

const add: Operation = (a, b) => a + b
const sub: Operation = (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

0개의 댓글