[Typescript] Typescript 함수

Typescript는 자바스크립트의 상위 집합 언어로, 정적 타입을 지원합니다. 이는 함수 작성과 호출에 있어서 유용한 기능입니다.

함수 작성 방법

Typescript 함수를 작성할 때, 함수의 매개변수와 반환값의 타입을 명시해줍니다. 이를 통해 코드의 가독성을 높이고, 개발자들 간의 협업을 원활하게 할 수 있습니다. 예를 들어, 다음과 같이 add 함수를 작성할 수 있습니다.

function add(x: number, y: number): number {
  return x + y;
}

이 함수는 두 개의 number 타입 매개변수를 받아들이고, number 타입 값을 반환합니다. 만약 매개변수의 타입이 잘못 전달된 경우, Typescript에서는 컴파일 에러를 발생시켜 알려줍니다.

Typescript 함수를 작성할 때, 다양한 타입의 매개변수를 사용할 수 있습니다. 예를 들어, 다음과 같이 문자열과 숫자를 받아서 합친 후 반환하는 함수를 작성할 수 있습니다.

function concatenateStrings(str1: string, str2: string, num: number): string {
  return str1 + str2 + num;
}

이 함수는 세 개의 매개변수를 받아들이고, 문자열과 숫자를 함께 반환합니다.

interface SearchHistoryProps {
  onSearch: (value: string) => void;
  localSaveKeyWord: SearchHistory[];
  setLocalSaveKeyWord: React.Dispatch<React.SetStateAction<SearchHistory[]>>;
}

만약 함수가 값을 반환하지 않는다면 비워두는 대신 void를 써서 표시합니다

함수 호출 방법

Typescript 함수를 호출할 때, 함수에 필요한 매개변수의 값을 전달합니다. 예를 들어, 위에서 정의한 add 함수를 호출하면 다음과 같이 작성할 수 있습니다.

let result = add(1, 2);
console.log(result); // 출력 결과: 3

이 함수 호출은 1과 2라는 값이 add 함수의 매개변수로 전달되고, 함수는 3이라는 값을 반환합니다. 결과적으로, result 변수의 값은 3이 되고, 이 값을 콘솔에 출력합니다.

Typescript에서는 함수 호출 시 매개변수의 순서를 바꾸는 것도 가능합니다. 이를 named parameter라고 부릅니다. 예를 들어, 다음과 같이 add 함수를 호출할 수 있습니다.

let result = add(y=2, x=1);

console.log(result); // 출력 결과: 3

이 함수 호출은 named parameter를 사용하여 x와 y의 값을 전환한 것입니다. 따라서, 함수는 3이라는 값을 반환하고, result 변수의 값은 3이 됩니다.

선택적 매개변수와 기본 매개변수

Typescript 함수를 작성할 때, 선택적 매개변수와 기본 매개변수를 사용하여 함수 호출을 더욱 유연하게 만들 수 있습니다.

선택적 매개변수

Typescript에서는 함수의 매개변수를 선택적으로 만들 수 있습니다. 선택적 매개변수는 함수 호출 시 해당 매개변수의 값을 전달하지 않아도 되는 매개변수입니다. 선택적 매개변수는 ? 기호를 매개변수 이름 뒤에 붙여서 표시합니다. 예를 들어, 다음과 같이 add 함수를 작성할 수 있습니다.

function add(x: number, y?: number): number {
  if (y) {
    return x + y;
  } else {
    return x;
  }
}

이 함수는 하나의 필수 매개변수 x와 하나의 선택적 매개변수 y를 가지고 있습니다. 따라서, add(1)처럼 y 매개변수를 생략하고 호출할 수 있습니다. 이 경우, 함수는 x 매개변수의 값인 1을 반환합니다. 만약 y 매개변수를 전달하면, x와 y 값을 더한 결과를 반환합니다.

기본 매개변수

Typescript에서는 함수의 매개변수에 기본값을 설정할 수 있습니다. 기본 매개변수는 함수 호출 시 해당 매개변수의 값을 전달하지 않으면, 설정된 기본값을 사용합니다. 기본 매개변수는 = 기호를 이용하여 매개변수 이름 뒤에 설정합니다. 예를 들어, 다음과 같이 greet 함수를 작성할 수 있습니다.

function greet(name: string = "World"): string {
  return `Hello, ${name}!`;
}

이 함수는 문자열 타입의 name 매개변수를 가지고 있으며, 기본값으로 "World"를 설정합니다. 만약 name 매개변수를 생략하고 greet()를 호출하면, 함수는 "Hello, World!"를 반환합니다. 하지만 greet("John")과 같이 name 매개변수에 값을 전달하면, "Hello, John!"과 같이 전달된 값을 사용하여 반환합니다.

기본 매개변수는 선택적 매개변수와 함께 사용할 수도 있습니다. 이 경우, 선택적 매개변수는 매개변수 이름 뒤에 ?를 붙여서 표시하고, 기본값은 = 기호를 이용하여 설정합니다. 예를 들어, 다음과 같이 add 함수를 작성할 수 있습니다.

function add(x: number, y: number = 0): number {
  return x + y;
}

이 함수는 하나의 필수 매개변수 x와 하나의 선택적 매개변수 y를 가지고 있습니다. y 매개변수에는 기본값으로 0을 설정합니다. 만약 add(1)과 같이 y 매개변수를 생략하고 호출하면, 함수는 x 매개변수의 값인 1을 반환합니다. 하지만 add(1, 2)과 같이 y 매개변수에 값을 전달하면, x와 y 값을 더한 결과를 반환합니다.

선택적 매개변수와 기본 매개변수 예시

1. 선택적 매개변수와 기본 매개변수를 함께 사용하는 함수

function printName(firstName: string, lastName?: string): string {
  if (lastName) {
    return `${firstName} ${lastName}`;
  } else {
    return firstName;
  }
}

이 함수는 하나의 필수 매개변수 firstName와 하나의 선택적 매개변수 lastName를 가지고 있습니다. lastName 매개변수는 기본값으로 undefined를 설정합니다. 만약 lastName 매개변수를 생략하고 호출하면, 함수는 firstName 값을 반환합니다. 하지만 printName("John", "Doe")와 같이 lastName 매개변수에 값을 전달하면, firstName과 lastName 값을 조합하여 반환합니다.

2. 선택적 매개변수와 기본 매개변수를 함께 사용하는 함수

function calculateArea(width: number, height: number = width): number {
  return width * height;
}

이 함수는 하나의 필수 매개변수 width와 하나의 선택적 매개변수 height를 가지고 있습니다. height 매개변수는 기본값으로 width를 설정합니다. 만약 height 매개변수를 생략하고 호출하면, 함수는 width * width를 반환합니다. 하지만 calculateArea(2, 3)과 같이 height 매개변수에 값을 전달하면, width * height 값을 반환합니다.

함수 예시

1. 문자열 붙이기 함수

function concatenateStrings(str1: string, str2: string): string {
  return str1 + str2;
}

이 함수는 두 개의 문자열을 받아들이고, 합쳐진 문자열을 반환합니다.

2. 배열의 합 구하기 함수

function sumArray(arr: number[]): number {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

이 함수는 number 타입의 배열을 받아들이고, 배열 내 숫자들의 합을 반환합니다.

3. 객체 내 속성 더하기 함수

type ObjectWithNumberValues = {
  [key: string]: number;
}

function sumObjectValues(obj: ObjectWithNumberValues): number {
  let sum = 0;
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      sum += obj[key];
    }
  }
  return sum;
}

이 함수는 number 타입 값을 갖는 속성을 가진 객체를 받아들이고, 해당 객체 내 숫자들의 합을 반환합니다.