튜플

튜플이란?

JS에서 튜플이라는 타입은 자바스크립트에서 존재하지 않는 개념이다.

string 배열 타입 선언

let iveTopMembers : string[] = ['안유진', '장원영', '레이'];

string타입 배열로 선언하려면 다음과 같이하면 된다.

튜플로 선언

let numberAndStringTuple : [number, string] = [
  23,
  '코드팩토리'
]
numberAndStringTuple.push('아이유');
console.log(numberAndStringTuple); //[23, '코드팩토리' ,'아이유']

23, '코드팩토리'이렇게 타입을 맞춰서 넣어야한다.
순서가 바뀌거나 다른타입이거나 더 많이 넣거나 안된다.
하지만 push로 나중에 해당 타입을 추가하는 것은 에러가 발생하지 않는다.

readonly 튜플로 선언

let unmodifiableTuple : readonly [number, string] = [
  23,
  '코드팩토리',
]

// unmodifiableTuple.push() //에러발생 

리드온리를 사용하는 순간 push를 막아준다. 튜플을 정확하게 사용하려면 리드온리를 사용하자

tuple 유추하기

let actresses = ['김고은', '박소담', '전여빈']; //string[]

let actressesTuple = ['김고은', '박소담', '전여빈'] as const; // const로 캐스팅을 하면 정확하게 써야한다.
const actressesTuple1 = ['김고은', '박소담', '전여빈'] as const; 

let stringArray : string[] = [
  ...actressesTuple,
  ...actressesTuple1,
  // ...[1,2,3] //숫자를 넣으면 안된다.
]

named 튜플

const namedTuple: [name: string, age: number] = [
  '코드팩토리',
  32

이름을 지어준다. 좀더 이해하기 쉬워진다. 추가 정보를 알려준다.

튜플끼리 할당시 주의 사항

const tuple1 : [string, string] = ['아이유','유애나'];
const tuple2 : [number, number] = [1, 2];

// let tuple3 : [boolean, boolean] = tuple1;
// let tuple4 : [number, number, number] = tuple2
//에러발생 같은 타입끼리만 할당이 가능하다.

let tuple5 : [number, number] = tuple2

오로지 같은 타입끼리만 할당이 가능하다.

let ive: [string, string] = [
  '장원영',
  '안유진'
]

let stringArr: string[] = ive; //포괄적인 개념이므로 가능하다. 하지만 반대는 안된다.

// let ive2: [string, string] = stringArr;
//ive타입으로 할당했지만 TS는 타입만 신경쓴다. 그래서 string[]타입은 구체적인 타입으로 안된다.

만약 튜플과 리스트 사이에서 할당하려고 할 때 리스트는 튜플보다 포괄적인 개념이다. 리스트는 개수는 상관없기 때문이다.
그래서 리스트타입에 튜플을 할당하는 것은 가능하나
튜플타입에 리스트를 할당하는 것은 불가능하다.

2차원 튜플

const tuple2D = [
  ['코드팩토리', 32],
  ['아이유', 31],
  ['김고은', 30],
] //(string | number)[][] 2차원 배열

const tuple2D1: [string, number][] = [
  ['코드팩토리', 32],
  ['아이유', 31],
  ['김고은', 30],
] //string, number로 이루어진 tuple이 여러개 있다. 라고 생각하면 된다.