[TS] 호출 시그니처, 인덱스 시그니처

📌 호출 시그니처

호출 시그니처는 타입스크립트에서 함수의 타입을 지정할 때 사용하는 문법

✅ 함수의 매개변수 타입을 지정할 때

interface Post {
  id: number;
  title: string;
  getLikeNumber: (like: number) => number;
}

일반적인 함수 작성 방식과 동일하게 작성할 수 있다.

하지만, 재사용성과 가독성을 위해 따로 분리해서 작성하면 좋다. 그리고 이러한 방식을 호출 시그니처라고 한다.

이때, 보통의 함수 작성하는 방식과는 약간 다른 점이 있다면
소괄호 안에 매개변수를 넣어주고, 반환하는 부분은 화살표 => 가 아니라 콜론 : 으로 작성해야한다.

interface getLikeNumber {
  (like: number): number;
}

interface Post {
  id: number;
  title: string;
  getLikeNumber: getLikeNumber;
}

const post1: Post = {
  id: 1,
  title: 'post 1',
  getLikeNumber(like: number) {
    return like
  }
}

post1.getLikeNumber(1);

📌 인덱스 시그니처

✅ Object Index Signature

[key: string] : unknown;

어떤 새로운 속성이 들어올지는 모르겠지만 일단 key가 될 데이터의 타입은 string 이고, 실제 value로는 어떤 값이 들어올지 모르기 때문에 unknown 으로 지정 (이 부분은 any가 들어와도 되지만 unknown이 더 적절하다.)

interface Post {
  [key: string] : unknown; //새로 들어올 key,value 값들에 대한 타입을 지정해줌
  id: number;
  title: string;
}

const post1: Post = {
  id: 1,
  title: 'post 1'
}

//미리 타입을 지정해놓지 않은 key,value 값들을 추가하는 과정
post1['description'] = 'post 1 description';
post1['pages'] = 300;

✅ Array Index Signature

item 의 타입이 number 인 이유는 배열의 인덱스를 생각했을 때 값을 가르키는 인덱스 값이 숫자이기 때문.

그리고 배열의 데이터 타입이 뭔지에 따라 뒤에는 맞춰서 작성해주면 됨. 이 예제에서는 문자가 들어가기 때문에 string 으로 지정함.

interface Names {
  [item: number]: string;
}

const userNames = ['John', 'Kim', 'Joe'];