객체 타입 정의
2025. 4. 4. 16:26ㆍ프론트엔드/TypeScript(공부)
728x90
# 📚 배열(Array)과 튜플(Tuple) 정리
TypeScript에서 배열과 튜플을 사용하는 방법을 예제와 함께 정리합니다.
---
## 🔹 1. 배열 (Array)
### 📌 배열 타입 정의 방법
- 요소 타입 뒤에 `[]`를 붙여 배열을 정의합니다.
- 또는 제네릭 문법인 `Array<타입>`을 사용할 수 있습니다.
```ts
let numArr: number[] = [1, 2, 3]; // 숫자 배열
let strArr: string[] = ["hello", "im", "winterlood"]; // 문자열 배열
let boolArr: Array<boolean> = [true, false, true]; // 제네릭을 이용한 정의
📌 다양한 타입 요소를 갖는 배열
- 여러 타입이 섞인 배열은 유니온 타입을 사용합니다.
let multiArr: (number | string)[] = [1, "hello"]; // 숫자 또는 문자열
📌 다차원 배열
- 다차원 배열은 [][]를 이용해 정의합니다.
let doubleArr: number[][] = [
[1, 2, 3],
[4, 5],
]; // 2차원 숫자 배열
🔸 2. 튜플 (Tuple)
📌 튜플 정의 방법
- 튜플은 길이와 각 요소의 타입이 고정된 배열입니다.
let tup1: [number, number] = [1, 2]; // 숫자 2개
let tup2: [number, string, boolean] = [1, "hello", true]; // 다양한 타입
📌 튜플과 배열의 차이
- 튜플은 요소의 개수와 타입이 고정되어 있어 타입 안전성을 강화합니다.
- 하지만 .push()와 같은 배열 메서드는 고정 길이를 무시할 수 있으므로 주의가 필요합니다.
let tup1: [number, number] = [1, 2];
tup1.push(3); // 길이 고정 무시됨 (에러 발생 안 함)
console.log(tup1); // [1, 2, 3]
📌 튜플 사용 이유
- 구조가 명확해져 실수를 방지할 수 있습니다.
❌ 잘못된 배열 사용 (순서 오류지만 오류 발생 X):
const users = [
["이정환", 1],
["이아무개", 2],
[5, "조아무개"], // 순서 오류
];
✅ 튜플을 사용하면 순서 오류를 타입에서 잡아줍니다:
const users: [string, number][] = [
["이정환", 1],
["이아무개", 2],
[5, "조아무개"], // 오류 발생
];
✅ 요약
항목 설명
| 배열 | 타입[] 또는 Array<타입>으로 정의, 유니온과 다차원 배열도 가능 |
| 튜플 | 길이와 타입이 고정된 배열, 구조화된 데이터를 안전하게 표현 |
| 주의점 | .push() 등으로 튜플 길이가 의도치 않게 변할 수 있음 |
728x90
'프론트엔드 > TypeScript(공부)' 카테고리의 다른 글
| 열거형(Enum) 타입 (0) | 2025.04.04 |
|---|---|
| 타입 별칭과 인덱스 시그니처: (0) | 2025.04.04 |
| 원시 타입과 리터럴 타입 (0) | 2025.04.04 |
| 타입스크립트 컴파일러 옵션 완벽 가이드 (0) | 2025.04.02 |
| 자바스크립트 모듈과 ES 모듈 시스템(ESM) 완벽 정리 (0) | 2025.04.02 |