TypeScript - 3

박태영·2024년 5월 19일

typescript

목록 보기
3/9

1.콜 시그니처(call signature)

  • 함수 함수의 타입을 설명하는데 사용되는 개념
  • 함수의 입력(매개변수)과 출력(반환 값)의 타입을 정의하는 일종의 타입 선언

예시

// 함수의 Call Signature 정의
type Add = (a: number, b: number) => number;

// 함수 선언과 함께 Call Signature를 적용
const add: Add = (x, y) => {
  return x + y;
};

ℹ️ 콜 시그니처는 아래와 같은 방법으로 여러개를 정의할 수 있다

type Add ={
	(a:number,b:number):number,
  	(a:number,b:string):number
}

2.오버로딩(overloading)

  • 함수가 동일한 이름을 가지지만 서로 다른 매개변수 타입이나 개수를 가질 수 있게 하는 기능
  • 함수가 다양한 방식으로 호출될 수 있음을 정의
  • 여러 개의 오버로드 시그니처(overload Signatures)를 정의하여 구현

예시 1 - 매개변수 타입 차이

// 오버로드 시그니처 (Overload Signatures)
function add(a: number, b: number): number;
function add(a: string, b: string): string;

// 구현 시그니처 (Implementation Signature)
function add(a: any, b: any): any {
  return a + b;
}

// 함수 호출
console.log(add(5, 3)); // 8
console.log(add("Hello, ", "world!")); // Hello, world!
  • ❗️ 화살표함수의 경우에는 오버로드 시그니처를 이용한 오버로드를 할 수 없다.
  • 함수타입과 인터페이스로 비슷한 효과를 낼 수 있다.

예시 2 - 매개변수 갯수차이

// 오버로드 시그니처 (오버로드를 위한 시그니처 선언 표현)
function sum(a: number, b: number): number;
function sum(a: number, b: number, c: number): number;

// 구현 시그니처
function sum(a: number, b: number, c?: number): number {
  if (c !== undefined) {
    return a + b + c;
  }
  return a + b;
}

// 함수 호출
console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6
  • ❗️ typescript에서는 오버로드 시그니처를 작성하면 반드시 구현부를 작성하여야 한다.

예시 3 - 리턴 타입 차이

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  sideLength: number;
}

// 오버로드 시그니처
function createShape(shape: "circle", radius: number): Circle;
function createShape(shape: "square", sideLength: number): Square;

// 구현 시그니처
function createShape(shape: string, size: number): Circle | Square {
  if (shape === "circle") {
    return { kind: "circle", radius: size };
  } else {
    return { kind: "square", sideLength: size };
  }
}

// 함수 호출
const circle = createShape("circle", 10);
const square = createShape("square", 10);

console.log(circle); // { kind: 'circle', radius: 10 }
console.log(square); // { kind: 'square', sideLength: 10 }
profile
어른 아이

0개의 댓글