[Typescript] 배열, 튜플

정혜인·2023년 8월 2일

typescript

목록 보기
6/15

🙋🏻‍♂️ 배열

배열을 사용하는 방법에는 크게 두가지가 있다.

방법 1️⃣ : (배열 요소 타입)[]

let numArr: number[] = [1,2,3];

let strArr: string[] = ["hello", "im", "hyein"];

let boolArr: boolean[] = [true, false, true];

: (배열의 요소의 타입)[] 로 타입 정의
number[]에서 number 자리에는 배열의 요소의 타입을 적고, 그 뒤에 []를 적어주면 배열 형식이라는 뜻이 된다.
ex. number[], string[], boolean[]

방법 2️⃣ : array<배열 요소의 타입>

let numArr: Array<number> = [1,2,3];

let strArr: Array<string> = ["hello", "im", "hyein"];

let boolArr: Array<boolean> = [true, false, true];

: array<배열 요소의 타입> 로 타입 정의


✅ 배열에 들어가는 요소들의 타입이 다양할 경우

typescript는 점진적 타입 시스템을 사용하기 때문에 변수의 타입을 모르겠을 때에는 변수를 가까이 대고 있으면 vscode에서 type을 유추해준다.

let multiArr: (number | string)[] = [1, "hello"];

: (타입 | 타입)[] 로 타입 정의
위 코드처럼 배열의 요소가 number나 string일 경우, | 연산자를 사용하여 type을 작성해주고, 배열이라는 표시의 []를 붙여주면 된다.


✅ 다차원 배열의 타입을 정의하는 방법

let doubleArr: number[][] = [
    [1, 2, 3],
    [4, 5],
]

: : 타입[][] 로 타입 정의
다차원 배열은 위 코드처럼 대괄호 []를 차원 수만큼 여러개 붙여주면 된다.


🙋🏻‍♂️ 튜플

: 길이와 타입이 고정된 배열 (javascript에는 없는 타입)

let tup1: [number, number] = [1, 2];
let tup2: [number, string, boolean] = [1, "2", true];

: [타입, 타입, 타입 ...] 로 타입 정의
위 코드처럼 지정해준 타입, 요소의 수 그대로만 순서대로 넣을 수 있다.


위 코드처럼 순서대로 대입했을 때 타입이 달라서도 안되고, 요소의 수가 달라서도 안된다.

⚠️ 하지만, 튜플 형식은 javascript로 변환하면 배열과 똑같이 사용된다.

그래서 타입스크립트에서 push()나 pop() 같은 배열 메소드를 사용해도 문제가 없으므로 배열 메소드는 항상 ⚠️주의⚠️하며 사용해야 한다.

❓ 튜플 사용이 유용한 경우

아래 사진처럼 2차원 배열인 users에 ["이름", 인덱스번호] 순으로 넣어뒀는데, 만약 다른 사람이 [인덱스번호, "이름"] 순서로 추가해버리면 ..?


만약 튜플이 아닌 그냥 배열이었다면 아무런 문제가 발생하지 않는다.

하지만 순서가 중요한 상황이라면 배열을 사용하는 것보다 튜플을 사용하는 것이 더 효율적이다.

인덱스의 위치에 따라서 넣을 값이 정해져있고, 그 순서가 중요할 때에는 튜플을 사용하면 오류를 발생시키기 때문에 실수 발생을 확인할 수 있다.

0개의 댓글