2.4.5_타입스크립트에서 함수 자체의 타입을 지정하는 방법과 그 예시를 설명해주세요.

[eeeyooon]

📝 77-78p

❓ 타입 스크립트에서 함수 자체의 타입을 지정하는 방법과 그 예시를 설명해주세요.

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

위의 예시는 타입 스크립트에서 함수를 작성할 때 매개변수와 반환 값에 대한 타입을 지정하는 문법을 설명한 것입니다. 그럼 함수 자체의 타입은 어떻게 지정할 수 있나요? 그 방법과 예시를 설명해주세요.

[lulla-by]

함수자체의 타입을 지정하는 방식은 호출 시그니처를 사용하면 됩니다!

type add = (a: number, b: number) => number;

이렇게요!

[Stilllee]

타입스크립트에서 함수 자체의 타입을 명시할 때에는 화살표 함수 방식으로 호출 시그니처를 정의합니다.

type add = (a: number, b: number) => number;

[sryung1225]

호출 시그니처(Call Signature)를 사용합니다.

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

// 🧿 answer
type add = (a: number, b: number) => number;

참고로 호출 시그니처는 함수에 마우스를 올려서 볼 수 있습니다 👀

[chaehaeun]

호출 시그니처를 사용하면 됩니다. 화살표 함수와 작성법이 유사합니다.

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

[eeeyooon]

함수 자체의 타입을 지정하려면 호출 시그니처를 정의하는 방식을 사용하면 됩니다. 함수 타입은 해당 함수가 받는 매개변수와 반환하는 값의 타입으로 결정되는데, 호출 시그니처는 이러한 함수의 매개변수와 반환 값의 타입을 명시하는 역할을 합니다.

type Add = ( a: number, b: number) => number; // call signature

const add: Add = (a, b) => a + b

예시 코드를 보면 먼저 함수의 매개변수와 반환타입을 type으로 미리 선언해 두고, Add 함수의 타입으로 지정하였습니다. 해당 함수에 커서를 올리면, 매개변수와 리턴 값의 타입 정보를 미리 볼 수 있습니다.

이렇게 호출 시그니처를 정의해서 사용하면, 개발자는 미리 해당 함수의 type을 인지하여 코드를 작성할 수 있고 타입 지정과 함수 구현을 분리해서 작성할 수 있다는 장점이 있습니다. 또한 호출 시그니처는 여러 함수에 사용이 가능합니다.

일반적으로 자바스크립트에서는 함수를 작성할 때 function 키워드를 사용해서 작성하거나 화살표 함수 방식으로 작성합니다. 반면 타입스크립트에서는 함수 자체의 타입을 명시할 때 화살표 함수 방식으로만 호출 시그니처를 정의합니다.