배열과 튜플의 타이핑 및 간단한 tip(rest, generic ...)

배열

 

다음과 같이 배열의 타입을 지정할 수 있습니다.

let arr: number[] = [1, 3, 5];
let arr2: string[] = ["a", "b", "c", "d", "e", "f"];

interface IBook {
  name: string;
  price: number;
}

let books: IBook[] = [
  { name: "story about evil", price: 35000 },
  { name: "critical theory", price: 35000 },
];

 

일반 JS에서는 문자열을 문자의 배열로 인식해서 다음과 같은 코드가 가능했습니다. TS는 문자타입이 없고 문자열을 배열로 인식하지도 않습니다. 따라서 문자열을 배열처럼 다루기 문자열을 그냥 배열로 바꿔야 합니다.

 

// 일반 JS에서는 문자열을 문자의 배열로 인식
const str = "hello";
console.log(str[1]);

// TS에서는 문자열을 배열로 따로 변환해야 함.
let str = "hello";
let array: string[] = str.split("");
let joined = array.join("");

console.log(array);
console.log(joined);

 

문자열과 배열 사이의 변환은 자주 사용하므로 적절한 함수를 만들어 재사용할 수 있도록 만듭시다.

(참고로 delim은 Delimiter[구분 문자]의 약자입니다)

const stringToArray = (str: string, delim: string = ""): string[] =>
  str.split(delim);

const arrayToString = (array: string[], delim: string = ""): string =>
  array.join(delim);

console.log(stringToArray("testing"));
console.log(arrayToString(["h", "e", "l", "l", "o"]));

 

for문

 

일반 JS와 같습니다. in은 index를 of는 요소를 반환합니다. 다만 TS에는 문자열이 이터러블하지 않으므로 배열로 바꿔줘야 합니다. (JS의 자유로움을 여기서 느껴볼 수 있습니다...흑)

let arr = [1, 3, 5];

for (let i in arr) {
  console.log(i);
}

for (let j of arr) {
  console.log(j);
}

 

rest

const func = (a, b, ...rest) => {
  console.log(a);
  console.log(b);
  console.log("rest :", rest); 
};

func(1, 3, 5, 7, 9); // rest에 5, 7, 9를 배열로 반환 [5, 7, 9]

 

제네릭과의 결합

 

let arr:number[] ... 와 같이 배열에 숫자형 데이터만을 넣는 방법보다는 T[]와 같이 유동적으로 배열에 들어갈 타입을 지정할 수 있습니다. 이는 배열을 함수의 인자로 받기 위해서 반드시 알아둬야 합니다.

 

예를 들어 아래와 같이 배열을 인자로 받아 해당 배열의 길이를 반환하는 함수가 있다고 가정합시다.

const arrLength = (arr) => arr.length;

 

이 경우 arr에 타입을 지정해야 하는데 숫자형 배열 요소가 들어올 수도 있고, 문자형 배열 요소가 들어올 수도 있고 심지어 객체 형태로 값이 들어와 Interface 타입이 들어올 수도 있습니다.

이렇게 유동적인 타입을 제어하기 위해서는 다음과 같이 제네릭을 이용하면 됩니다. 매개변수 앞에 <>를 붙여주는 방식으로 이용합니다. (굳이 아래 예시대로 T를 쓸 필요는 없습니다. Type의 약자라서 T를 관습적으로 쓸 뿐입니다.)

const arrLength = <T>(arr: T[]): number => arr.length;

console.log(arrLength([1, 3, 5]));
console.log(arrLength(["h", "e"]));

 

 

튜플

 

바닐라 자바스크립트에서는 튜플이 없습니다. 튜플과 배열의 차이로는 길이 제한입니다.

 

배열은 다음과 같이 길이의 제한이 없습니다.

type StringorNumber = number | string;

let list: StringorNumber[] = [1, 2, "doctor"];

 

튜플은 길이의 제한이 있습니다. 아래 튜플은 타입를 정의한 것처럼 첫번 째 요소가 string, 두 번째 요소가 number 여야 하고, 길이는 2여야 합니다. 그러나 push와 같은 메서드로 요소를 추가하는 것이 가능합니다.

let tuple: [string, number];

tuple = ["what", 3, 5]; // error

tuple.push(5) // push, assign 등을 통해 tuple에 값을 넣을 수 있음

console.log(tuple) // ["what", 3, 5]