[TypeScript] Tuple Type

2022. 7. 10. 18:28·TypeScript/기초
목차
  1. Tuple Type? 
  2. Rest Parameter
  3. Spread 연산자를 합칠 때의 Tuple
반응형

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
  1. Tuple Type? 
  2. Rest Parameter
  3. Spread 연산자를 합칠 때의 Tuple
'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)
  • 태그

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

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.