4. [TypeScript] Call Signature 과 Generic 사용하여 함수 만들기

Array를 역순으로 재배치 시키는 Function 만들기

Call Signature

방식1.

//Generic을 사용한 Signature
type Reverse = {
  <T>(array: T[]): T[];
};

• 여기서 T는 데이터 형식을 나타내는 Generic으로 어떠한 형식이 오더라도 TypeScript가 알아서 그 데이터 형식에 맞춰줌 (따라서 아래와 같이 올 수 있는 데이터형식을 전부 작성해줄 필요없음)
• 데이터 형식 T의 Array로 매개변수를 받았다면 return 되는 Array도 T형식의 배열로 Return 해야하기 때문에 동일하게 T로 작성해줌

방식2.

//Generic을 사용하지않은 Call Signature
type Reverse = {
  (array: string[] | number[] | boolean[]): string[] | number[] | boolean[];
};

Function

//Call Signature를 사용한 Function 작성
const reverseArray: Reverse = (array) => {
  return array.reverse();
};
console.log(reverseArray(["A", "B", "C", "D", "E"])); //콘솔출력: [ 'E', 'D', 'C', 'B', 'A' ]

• reverseArray 라는 이름을 갖는 Function은 위에서 작성한 Reverse 형식의 Call Signature를 갖고 array를 파라미터 값으로 받고 array.reverse()를 Return 해줌 
• 따라서 Parameter 값의 데이터 형식과 Return되는 값의 데이터형식은 같기 때문에 T로 동일하게 사용 가능함

---

데이터형이 같은 두개의 Array를 이어주는 Function 만들기

Call Signature

type UnionArray = {
  <T>(arr1: T[], arr2: T[]): T[];
};

Function

const unionArray: UnionArray = (arr1, arr2) => {
  return arr1.concat(arr2);
};
console.log(unionArray(["A", "B", "C"], ["D", "E", "F"])); //콘솔출력: [ 'A', 'B', 'C', 'D', 'E', 'F' ]

---

Array의 길이를 얻는 Function 만들기

Call Signature

방식1.

//Generic 사용
type LengthArray = {
  <T>(array: T[]): Number;
};

방식2.

//Generic 미사용
type LengthArray = {
  (array: string[]): number;
  (array: number[]): number;
  (array: boolean[]): number;
};

 

Function

const lengthArray: LengthArray = (array) => {
  return array.length;
};
console.log(lengthArray([true, false, false])); //[LOG]: 3
console.log(lengthArray([1, 2, 3])); //[LOG]: 3
console.log(lengthArray(["A", "B", "C"])); //[LOG]: 3

---

Array안의 item index 찾는 Function

*Array에 item이 없을 경우 null 리턴

Call Signature

type SearchIndex = {
  <T>(arr: T[], item: T): number | null;
};

Function

const searchIndex: SearchIndex = (arr, item) => {
  const index = arr.indexOf(item);
  return index !== -1 ? index : null;
};
console.log(searchIndex([1, 2, 3, 4], 5)); //[LOG]: null
console.log(searchIndex([1, 2, 3, 4], 2)); //[LOG]: 1

---

index로 Array를 Splice 해주는 Function 만들기

단, 매개변수에 Array와 시작 index만 있을 경우, 시작 index부터 마지막 item 까지 갖는 Array 를 리턴함 

Call Signature

type SpliceArray = {
  <T>(arr: T[], startIndex: number, endIndex: number): T[];
  <T>(arr: T[], startIndex: number): T[];
};

 

Function

const spliceArray: SpliceArray = (arr, startIndex, endIndex?: number) => {
  if (endIndex) return arr.splice(startIndex, endIndex - startIndex + 1);
  return arr.splice(startIndex, arr.length - 1);
};
console.log(spliceArray([1, 2, 3, 4, 5, 6, 7, 8, 9], 3, 6)); //[LOG]: [4, 5, 6, 7]
console.log(spliceArray([1, 2, 3, 4, 5, 6, 7, 8, 9], 3)); //[LOG]: [4, 5, 6, 7, 8, 9]