타입스크립트 배열 타입 선언 방법

타입스크립트( Typescript )에서 배열 타입은 배열에 저장할 수 있는 값의 자료형을 명확하게 설정하는 방법이다.

문자열 배열은 문자열만, 숫자 배열은 숫자만 저장하도록 타입을 설정하는 것을 뜻한다.

배열 타입을 선언 방식은 요소 타입 뒤에 `[] (배열을 의미하는 표기 )`를 붙이는 방식이며, 제네릭 형태의 배열 타입을 사용하는 방법도 있다.

여러가지 자료형을 함께 저장해야 하는 경우에는 유니온 타입을 배열 타입으로 설정할 수 있다.

객체 배열도 각 객체가 가져야 할 속성과 속성 타입을 정의하여 선언할 수 있다.

배열 타입을 명시하면 타입스크립트가 배열에 잘못된 자료형의 값이 추가되는 것을 컴파일 단계에서 확인할 수 있어 타입 안정성을 보장받을 수 있다.

배열을 사용하는 함수에서는 매개변수와 반환값에도 배열 타입을 설정할 수 있다.

타입스크립트 배열 타입 선언 방법

타입[] 형태로 배열 타입 선언하기

타입스크립트는 타입 배열( 타입[] )을 생성할 수 있다.

타입 배열을 만드는 방법은 요소의 타입 뒤에 []를 붙이는 방식이다.

숫자만 저장하는 배열이라면 number[],
문자열만 저장하는 배열이라면 string[]처럼 선언한다.

타입스크립트는 배열 타입은 배열에 다른 타입의 값이 추가되는 것을 컴파일 단계에서 검사한다.

/** */

const scores: number[] = [90, 80, 70];

scores.push(100); /* 가능 */

/*
scores.push("A");
오류: string 타입의 값은 number[] 배열에 추가할 수 없다.
*/

console.log(scores);

scores는 number[] 타입배열로 선언했으며, 배열의 각 요소는 number 타입이어야 한다.

숫자형태 100은 number 타입이며, 배열에 정상적으로 추가할 수 있다.

"A"는 string 타입이기에 number[] 타입인 scores 배열에 추가할 수 없다.

타입[] 형태로 배열 타입 선언하기

타입[] 형태로 배열 타입 선언하기

number[]를 사용해 숫자 배열 선언하기

타입스크립트에서는 숫자만 저장하는 배열을 선언하려면 number[]를 사용할 수 있다.

number는 숫자 타입을 뜻하고,
뒤에 붙은 []는 해당 타입의 값을 여러 개 저장하는 배열임을 지칭한다.

다음 코드의 numbers 변수는 숫자만 저장할 수 있는 배열이다.

/** */

const numbers: number[] = [1, 2, 3];

/* 배열 전체 출력 */
console.log(numbers);

/* 첫 번째 요소 출력 */
console.log(numbers[0]);

/* 두 번째 요소 출력 */
console.log(numbers[1]);

/* 세 번째 요소 출력 */
console.log(numbers[2]);

/* for 반복문 */
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

/* for...of 반복문 */
for (const number of numbers) {
    console.log(number);
}

const numbers: number[] = [1, 2, 3]; 으로 숫자형 배열을 생성했다.

number[]의 모든 요소는 number 타입이며, [1, 2, 3]은 배열에 저장된 숫자 값이다.

numbers 배열에는 오로지 숫자만 저장할 수 있으며,
문자열과 같이 number가 아닌 타입의 값을 추가하는 경우,
타입스크립트의 타입 검사에서 오류가 발생한다.

배열의 각 요소는 인덱스로 접근할 수 있다.

배열 인덱스는 0부터 시작하므로 numbers[0]은 첫 번째 값인 1을 반환한다.

첫번째 for 반복문을 사용하면 배열의 인덱스를 이용해 값을 하나씩 가져올 수 있다.

i는 0부터 시작하며 numbers.length보다 작은 동안 반복한다.

numbers[i]를 사용하면 현재 인덱스에 해당하는 배열 요소를 가져올 수 있다.

두번째 for...of 반복문은 배열의 값을 직접 하나씩 가져온다.

number에는 반복할 때마다 numbers의 배열값인 1, 2, 3이 순서대로 저장된다.

결과는 다음과 같다.

number[]를 사용해 숫자 배열 선언하기

number[]를 사용해 숫자 배열 선언하기

Array 형태로 배열 숫자 타입 선언하기

타입스크립트는 Array<number> 문법을 사용해 숫자 배열 타입을 선언할 수 있다.

Array<number>에서 Array는 배열을, <number>는 배열에 저장할 요소의 숫자 타입을 지정한다.

Array<number>으로 선언한 배열은 1, 2, 3과 같은 숫자 값만을 저장할 수 있다.

/* 숫자 배열 선언 */
const numbers: Array<number> = [1, 2, 3];

/* 첫 번째 요소 출력 */
console.log(numbers[0]);

/* 두 번째 요소 출력 */
console.log(numbers[1]);

/* 세 번째 요소 출력 */
console.log(numbers[2]);

/* 배열의 각 요소 출력 */
for (const number of numbers) {
    console.log(number);
}

숫자 배열 타입인 상수 numbers를 선언한다.

Array<number>는 numbers가 숫자를 요소로 가지는 배열이다.

숫자배열은 인덱스로 접근하여 화면에 출력할 수 있고,
for...of 반복문을 사용해 numbers 배열의 요소를 하나씩 화면에 출력할 수 있다.

Array 형태로 배열 숫자 타입 선언하기

Array 형태로 배열 숫자 타입 선언하기

string[] 형태로 문자열 배열 타입 선언하기

타입스크립트에서 string[]은 문자열만 저장하는 배열이다.

string은 문자열 타입을 뜻하고, 뒤의 []는 배열을 뜻이다.

string[]는 문자열만 저장할 수 있는 배열 타입임을 나타낸다.

/** */

/* 숫자 배열 선언 */
/* 문자열만 저장할 수 있는 배열을 선언한다. */
const names: string[] = ["리센느", "원이", "리브", "미나미", "메이", "제나"];

/* 1번째 요소 출력 */
console.log(names[0]);

/* 2번째 요소 출력 */
console.log(names[1]);

/* 3번째 요소 출력 */
console.log(names[2]);

/* 4번째 요소 출력 */
console.log(names[3]);

/* 5번째 요소 출력 */
console.log(names[4]);

/* 6번째 요소 출력 */
console.log(names[5]);

/* 배열의 모든 값을 반복해서 출력한다. */
for (const name of names) {
    console.log(name);
}

names 변수를 string[]을 사용해 문자열 배열로 만든다.

names 배열에는"리센느", "원이", "리브", "미나미", "메이", "제나"처럼 문자열 값만 저장할 수 있으며, 문자열 외 다른 타입은 문자열 배열에 저장될 수 없다.

names 배열의 각각의 개별 값을 가져오기 위해 인덱스를 이용할 수 있으며, 인덱스는 0부터 시작한다.

for...of 반복문은 배열에 저장된 문자열을 처음부터 하나씩 가져와 출력하며, name에는 "리센느", "원이", "리브", "미나미", "메이", "제나"가 차례대로 들어간다.

string[] 형태로 문자열 배열 타입 선언하기

string[] 형태로 문자열 배열 타입 선언하기

Array<string> 형태로 문자열 배열 타입 선언하기

타입스크립트에서 문자열만 저장할 수 있는 배열 타입을 사용하기 위해 `Array<string>` 을 사용할 수 있다.

`Array<string>`에서 `Array`는 배열을 `<string>`은 배열에 저장할 요소의 타입이 문자열임을 뜻한다.

/** */

const names: Array<string> = [
  "리센느",
  "원이",
  "리브",
  "미나미",
  "메이",
  "제나"
];

/* 배열 전체 출력 */
console.log(names);

/* 배열의 첫 번째 값 출력 */
console.log(names[0]);

/* 배열의 모든 값을 순서대로 출력 */
for (const name of names) {
  console.log(name);
}

`const names: Array<string>`에서 `names`는 변수명, `Array<string>`은 문자열 배열 타입으로 선언했다.

`Array<string>`으로 선언했기 때문에 배열에는 `"리센느"`, `"원이"`처럼 문자열 값만을 저장할 수 있다.

문자열이 아닌 숫자를 넣으면 타입스크립트의 타입 검사에서 오류가 발생한다.

문자열 배열 타입은 인덱스로 접근하여 값을 가져올 수 있다.

`names[0]`은 배열의 첫 번째 요소를 가져올 수 있으며, 값은 `"리센느"`이다.

`for...of` 반복문을 사용하면 배열에 들어 있는 문자열을 처음부터 마지막까지 하나씩 가져와 화면에 출력할 수 있다.

Array<string> 형태로 문자열 배열 결과

Array<string> 형태로 문자열 배열 타입 선언하기

boolean[] 형태로 불리언 배열 타입 선언하기

타입스크립트에서 boolean[] 타입을 사용하면 true 또는 false 값만 저장하는 배열을 사용할 수 있다.

boolean[] 타입으로 선언된 타입의 요소는 모두 boolean 타입이어야 한다.

만약, boolean 타입 이외의 다른 타입이 입력되려고 한다면 에러가 발생한다.

/** */

/* boolean 타입의 값만 저장할 수 있는 배열을 선언한다. */
const checkedList: boolean[] = [true, false, true];

/* 배열 전체를 출력한다. */
console.log(checkedList);

/* 배열의 각 요소를 출력한다. */
console.log(checkedList[0]);
console.log(checkedList[1]);
console.log(checkedList[2]);

/* 배열의 모든 값을 순서대로 출력 */
for (const checkval of checkedList) {
  console.log(checkval);
}

checkedList 변수를 boolean[] 타입으로 선언하여, boolean 요소를 저장할 수 있도록 한다.

boolean[] 타입은 boolean 요소로 구성된 배열 타입으로, 배열 내에는 true와 false 같은 불리언 값만을 저장할 수 있다.

boolean[] 형태로 불리언 배열 타입 선언하기

boolean[] 형태로 불리언 배열 타입 선언하기

객체 배열 타입 선언하기

타입스크립트는 배열의 각 요소가 객체일 때 객체의 속성과 각 속성의 타입을 지정하여 배열 타입을 선언할 수 있다.

`{ id: number; name: string }[]`의 간단한 코드를 예로 들면, id는 number 타입, name은 string 타입인 객체들을 저장하는 배열이다.

/** */

/* 객체 배열 타입 선언 */
const users: { id: number; name: string }[] = [
  { id: 1, name: "리센느" },
  { id: 2, name: "원이" },
  { id: 3, name: "리브" },
  { id: 4, name: "미나미" },
  { id: 5, name: "메이" },
  { id: 6, name: "제나" },
];

/* 배열의 각 객체 정보 출력 */
console.log(users[0]?.id, users[0]?.name);
console.log(users[1]?.id, users[1]?.name);
console.log(users[2]?.id, users[2]?.name);
console.log(users[3]?.id, users[3]?.name);
console.log(users[4]?.id, users[4]?.name);
console.log(users[5]?.id, users[5]?.name);

/* 배열의 각 객체 정보 출력 */
users.forEach((user) => {
  console.log(user.id, user.name);
});

`{ id: number; name: string }` 부분은 배열에 저장되는 객체 구조이다.

`id: number`는 `id` 속성에 숫자 타입의 값을 사용하고,
`name: string`은 `name` 속성에 문자열 타입의 값을 사용한다.

`[]`는 배열 객체를 뜻한다.

다음과 같은 객체는 배열의 요소로 사용할 수 있다.

{ id: 1, name: "리센느" }

객체 배열 타입 선언하기

객체 배열 타입 선언하기

객체 배열에 타입 지정하기

타입스크립트에서는 배열 안에 데이터의 타입으로 지정할 수 있다.

객체 여러 개를 배열에 저장할 경우,
객체의 구조를 type으로 정의하고, 배열 타입을 User[]와 같은 형태 선언할 수 있다.

/** */

type User = {
  id: number;
  name: string;
  isActive: boolean;
};

const users: User[] = [
  { id: 1, name: "리센느", isActive: true },
  { id: 2, name: "원이", isActive: false },
  { id: 3, name: "리브", isActive: true },
  { id: 4, name: "미나미", isActive: false },
  { id: 5, name: "메이", isActive: true },
  { id: 6, name: "제나", isActive: false },
];

/* 첫 번째 사용자 정보 출력 */
console.log(users[0]);

/* 첫 번째 사용자의 이름 출력 */
console.log(users[0]?.name);

/* 첫 번째 사용자의 이름 출력 */
console.log(users[0]?.isActive);

/* 활성 상태인 사용자만 출력 */
const activeUsers: User[] = users.filter((user) => user.isActive);

console.log(activeUsers);

/* 배열의 각 객체 정보 출력 */
users.forEach((user) => {
  console.log(user.id, user.name);
});

User 객체 타입을 선언한다.

User[] 은 User 객체를 담고 있는 배열이며, User 객체만이 허용된다.

activeUsers 역시 User[]로 선언하고, filter()를 사용하여, isActive 값이 true인 사용자만 activeUsers 배열에 저장한다.

아래는 위의 코드에 대한 실행 결과를 보여준다.

객체 배열에 타입 지정하기

문자열과 숫자를 함께 저장하는 배열 타입

타입스크립트의 배열에 여러 종류의 타입을 저장할 때,
유니언 타입(Union Type)을 사용한다.

한가지 코드를 보자.

const values: (string | number)[] = ["A", 1, "B", 2];

여기서 (string | number)[]는 배열의 각 요소가 string 또는 number 타입임을 표시하며,
"A", "B" 같은 문자열과 1, 2 같은 숫자 만을 배열에 함께 저장할 수 있다.

/** */

/* 문자열 또는 숫자를 저장할 수 있는 배열을 선언한다. */
const values: (string | number)[] = ["A", 1, "B", 2];

/* 배열 전체를 출력한다. */
console.log(values);

/* 배열 요소를 출력한다. */
console.log(values[0]);
console.log(values[1]);
console.log(values[2]);
console.log(values[3]);

/* 배열의 각 요소를 출력한다. */
values.forEach((value) => {
    console.log(value);
});

const values 변수를 선언한다.

(string | number)에서 | 기호는 유니언 타입을 나타내며,
배열의 요소로 string 또는 number 타입을 사용할 수 있다.

뒤에 붙은 []는 해당 타입의 값들을 저장하는 배열임을 지칭한다.

문자열과 숫자를 함께 저장하는 배열 타입

-

const values: string | number[] = [1, 2, 3];

-

const numbers: number[] = [1, 2, 3, 4];

-

const user: [number, string] = [1, "민수"];

-

const names: readonly string[] = ["민수", "지영"];

names.push("현우"); // 오류

-