정중식의 개발공부로그

tuple type(array 자료에 타입지정)

25 Apr 2023 | typeScript

코딩애플강의를 보고 정리했습니다.

array 자료에 타입을 지정할때

// 이런식이나,
const food: (string | number)[] = ['소고기', 25000];

// 이런식,
const food: string[] = ['소고기'];

// 혹은 이렇게..
const food: number[] = [1212];

이런식으로 지정을 해줬었는데,
tuple타입을 활용하면 좀 더 구체적으로 타입을 지정해줄수있다.

tuple type

tuple 타입은 array에 붙일 수 있는 타입인데,
자료의 위치까지 정확히 지정할 수 있는 타입이다.

Ex)

let 멍멍이: [string, boolean];
멍멍이 = ['dog', true];
  • []대괄호 안에 타입을 적어주면된다.
  • []대괄호 안에 차례로 세부 타입을 기입하면된다.
  • 첫 자료는 string,둘째 자료는 boolean만 허용해주고 다른게 들어오면 에러를 낸다.

응용 rest parameter

function 함수(...x: string[]) {
  console.log(x);
}

이런식으로 rest 파라미터를 활용해서 타입을 지정해주는게 있는데, tuple을 이용해서 타입지정이 가능하다.

Ex)tuple타입을 활용한 예..

function 함수(...x: [string, number]) {
  console.log(x);
}
함수('kim', 123); //가능
함수('kim', 123, 456); //에러
함수('kim', 'park'); //에러

tuple타입을 활용하면 rest 파라미터를 조금 더 엄격하게 사용할 수 있다.

optional chaining

tuple안에서 optional chaining적용이 가능하다.

type Num = [number, number?, number?];
let 변수1: Num = [10];
let 변수2: Num = [10, 20];
let 변수3: Num = [10, 20, 10];

하지만 아래와 코드는 에러를 낸다.

type Num = [number, number?, number];

array중간에 있는 자료는 옵션이라는게 앞뒤가 안맞기 때문인데,
그래서 ?옵션 기호는 맨 뒤에만 붙일 수 있다.
물음표 두개를 쓰고싶다면, 뒤에서 두개만 붙이는 식으로 할 수 있다.

array 두개를 spread연산자로 합칠때 타입지정

let arr = [1, 2, 3];
let arr2 = [4, 5, ...arr];

이런식의 타입지정은 아래와같이 해주면 된다.

let arr = [1,2,3]
let arr2 :[number, number, ...number[]] = [4,5, ...arr]

Related Posts