[Typescript] 배열과 튜플

79ptke·2023년 6월 8일

타입스크립트

목록 보기
3/9
post-thumbnail

타입스크립트에서는 배열과 튜플 타입이 있습니다.
배열은 우리가 흔히 알고있는 것 처럼 [1, 2, 3]같이 대괄호 안에 들어가 있는 것을 말합니다.
튜플은 배열의 요소에 들어가는 타입이 여러가지일 때 사용할 수 있는 타입입니다.
먼저 타입스크립트에서의 배열에 대해서 알아보도록 하겠습니다.

✅ 배열

타입스크립트에서의 배열은 타입을 고정시킬 수 있지만, 길이까지는 고정시킬 수 없습니다.

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

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

let boolArr: Array<boolean> = [true, false,  true]; //제네릭문법으로 썼다.

만약 숫자 타입인데 배열 안에 문자열이 섞여 있으면 오류가 발생합니다.

let numArr:number[] = [1, 2, "3"]; <-- 마지막 3이 문자열이므로 오류가 남.

✅ 튜플

튜플 타입은 자바스크립트에 없고 타입스크립트에서 특별히 제공되는 타입입니다.
튜플은 길이와 타입이 고정되어있지 않고 유연한 자바스크립트와 다르게 길이와 타입이 고정되어 있는 배열을 말합니다.

// 길이와 타입이 고정된 배열
let tup1:[number, number] = [1, 2];
// tup1 = [1,2,3];  <-- 길이가 다르기때문에 오류가 남.
// tup1 = ['1',"2"]; <-- number 티입이 아니라 string(문자열) 타입이라서 오류가 남.

// 다양한 타입으로 이루어진 배열
let tup2:[number, string, boolean] = [1, "2", true];
//tup2 = ["2",1, true]; <-- 위치가 달라지면 오류가 남. 문자열과 숫자의 배열 위치가 바뀜.

순서가 중요할 때 튜플을 사용해서 값을 잘 못 넣지 않도록 해줍니다.

const users = [
    ["갑",1],
    ["을",2],
    ["병",3],
    ["정",4],
]

만약 이 코드에서 ["정",4] 다음에 [5,"무"]라고 추가하는 경우가 생겼다고 가정해봅니다.
위 코드에서 첫 번째 인덱스틑 무조건 문자열이어야하는 경우인데 만약 [숫자,문자열]로 구성되어 있는 [5,"무"]를 추가하면 오류가 발생할 것 입니다.
이를 방지하고자

// 순서가 중요할때 튜플을 사용함.
const users:[string,number][] = [
    ["갑",1],
    ["을",2],
    ["병",3],
    ["정",4],
]

이렇게 users옆에 대괄호를 만들어 users:[string,number][]라고 적으면 오류를 줄일 수 있습니다.

위의 내용은 <한 입 크기로 잘라먹는 타입스크립트> 강의 내용을 참고하면서 작성했습니다.

0개의 댓글