[TypeScript] Tuple Type

2022. 7. 10. 18:28·TypeScript/기초
반응형

Tuple Type? 

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

let anything : [string, boolean];
anything = ['test', true];

[] 괄호 안에 타입을 적으면 Tuple Type이 된다. 

 

type Num = [number, number?, number?];
let num1 :Num = [10];
let num2 :Num = [10,20];
let num3 :Num = [10,20,30];

Tuple 안에서도 물음표를 사용해서 옵션이라고 표현을 할 수 있다. 

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

하지만 물음표 옵션은 제일 마지막부터 순차적으로 붙일 수 있으며, 중간에 갑자기 나올 순 없다. 

 

Rest Parameter

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

함수에 파라미터를 넘길 때 점 3개를 붙이면 rest parameter라고 한다. 

아직 몇개의 파라미터가 들어갈지 확정되지 않은 상황에 사용하는 방식인데, Tuple을 사용하면 엄격하게 제어할 수 있다. 

 

하지만, 일반 파리미터를 2개 넣는 것과 기능상 차이는 없다. 

 

Spread 연산자를 합칠 때의 Tuple

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

점 3개의 또다른 방식인 spread 연산자를 사용하면 array의 괄호를 벗겨주는 기능을 한다. 

그래서 배열을 합칠 때 사용하는 경우가 있다. 

 

그런 경우에는 Tuple 타입을 어떻게 지정해야할까? 

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

Tuple Type에 점 3개를 붙여주면 아직 몇개의 데이터가 들어올지 모른다는 의미로 사용이 가능하다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'TypeScript > 기초' 카테고리의 다른 글

[TypeScript] d.ts  (2) 2022.07.12
[TypeScript] Declare & Ambient Module  (1) 2022.07.11
[TypeScript] React에서 사용하기_2편  (1) 2022.07.10
[TypeScript] React에서 사용하기_1편  (1) 2022.07.09
[TypeScript] Generic  (1) 2022.07.08
'TypeScript/기초' 카테고리의 다른 글
  • [TypeScript] d.ts
  • [TypeScript] Declare & Ambient Module
  • [TypeScript] React에서 사용하기_2편
  • [TypeScript] React에서 사용하기_1편
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    next.js
    바질 키우기
    ChatGPT
    리얼클래스
    타일러영어
    CCNA
    프로그래머스
    식물
    자바스크립트
    덤프
    ReactNative
    typescript
    react
    webpack
    CSS
    Docker
    다이소
    바질
    Node.js
    네트워크
    Babel
    영어회화
    알고리즘
    타입스크립트
    네이버 부스트캠프
    영어독학
    리얼학습일기
    javascript
    redux
    리액트
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[TypeScript] Tuple Type
상단으로

티스토리툴바