[TS] Array Types

✅ Array Types

배열에 타입을 지정하는 방법을 살펴보자.

변수를 선언하고 type에 빈배열을 설정했다. 배열에 무언가 하려하거나 숫자를 넣는 등 초기화를 하면 에러가 발생한다. 왜냐하면 타입이 빈 배열이라고 알려두었기 때문에 항상 아무것도 없어야 한다. 그 대신 배열 대괄호 앞에 어떤 타입인지 밝혀줘야 한다.  

const activeUsers: string[] = ["jeong", "haha"];

문자열 배열이라는 의미로 원한다면 빈 상태로 시작할 수 있고, 문자열을 넣어줄 수도 있다.

const activeUsers = [];

위 코드처럼 빈배열에 타입을 지정하지 않으면 any 혹은 never이 설정된다. 이것은 ts 설정에 의한 것이며, any가 아닌 never로 뜨기 원한다면 tsconfig.json 에서 strick: true로 설정하고 noImplicitAny: false를 하면 된다. 중요한 것은 문자열 배열을 만들고 빈 상태로 시작하더라도 타입을 지정해주는 것이 좋다. 

// const bools: boolean[] = [];
const bools: Array<boolean> = [];

두 코드는 불리언을 갖는 배열로 같은 의미의 구문이다. 배열도 마찬가지로 객체처럼 커스텀  타입도 선언할 수 있다. 

type Point = {
  x: number;
  y: number;
};

const coords: Point[] = []

coords.push({x:23, y:8}); // 정상
coords.push({x:20}) // Error: y가 없으므로 유효하지 않다.
coords.push({x:20, y: '6'}) // Error: string Type을 할당할 수 없다.

👉 다차원 배열

2차원 혹은 3차원 배열, 배열 안의 객체와 같은 처리는 어떻게 할까?

const board: string[][] = [
  ["X", "O", "X"],
  ["X", "O", "X"],
  ["X", "O", "X"],
];

const demo: number[][][] = [[[1]]];

const objarr: { x: number }[] = [{ x: 1 }, { x: 2 }];

대괄호[]를 추가하여 배열의 깊이를 나타내는 것은 유효하다. string이 아닌 객체를 사용해 배열 객체임을 나타내줄 수 있다.

 

👌 연습 코드 살펴보기

type Product = {
  name: string;
  price: number;
};

const product: Product[] = [
  { name: "coffee mug", price: 2500 },
  { name: "coffee", price: 20000 },
  { name: "coffee mashine", price: 998000 },
  { name: "gbwl", price: 500 },
];

function getTotal(pro: Product[]): number {
  let total = 0;
  pro.map((item) => (total += item.price));
  return total;
}