TypeScript - 튜플: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타 여러분! 오늘 우리는 TypeScript의 튜플이라는 fascinante 세상으로 뛰어들어 보겠습니다. 튜플에 대해 들어본 적이 없으시다면 걱정 마세요 – 이 튜터리얼이 끝나면 튜플 마스터가 될 것입니다! 여러분의 좋아하는 음료를 손에 들고, 편안하게 앉아 이 흥미로운 여정을 함께 시작해 보세요.

TypeScript - Tuples

튜플이란?

자, 구체적인 내용으로 넘어가기 전에 튜플이 무엇인지 이해해 보겠습니다. 생각해 보세요, 여러 종류의 아이템을 넣을 수 있는 작은 상자가 있지만, 그 상자의 아이템 순서를 정확히 기억해야 한다는 조건이 있습니다. 이것이 바로 TypeScript에서의 튜플입니다 – 각 요소가 다른 타입을 가지고, 순서가 중요한 고정 길이의 배열입니다.

문법

기본적인 내용부터 시작해 보겠습니다. 다음은 TypeScript에서 튜플을 선언하는 방법입니다:

let myTuple: [string, number, boolean] = ['Hello', 42, true];

이 예제에서 우리는 myTuple이라는 이름의 튜플을 만들었는데, 이 튜플은 문자열, 숫자, 블루이언으로 구성된 세 개의 요소를 포함하고 있습니다. 여기서 순서는 중요합니다 – 첫 번째 요소는 문자열, 두 번째 요소는 숫자, 세 번째 요소는 블루이언이어야 합니다.

튜플의 값에 접근하기

이제 우리 튜플을 만들었으니, 그 값에 어떻게 접근할 수 있을까요? 간단합니다! 배열과 마찬가지로 인덱스 표기법을 사용합니다. 기억하세요, 프로그래밍에서는 0부터 시작합니다.

let myTuple: [string, number, boolean] = ['Hello', 42, true];

console.log(myTuple[0]); // 출력: 'Hello'
console.log(myTuple[1]); // 출력: 42
console.log(myTuple[2]); // 출력: true

이 예제에서 myTuple[0]은 첫 번째 요소를 반환하고, myTuple[1]은 두 번째 요소를 반환하며, 이와 같이 진행됩니다. 마치 상자를 열고 하나씩 아이템을 꺼내는 것과 같습니다.

튜플 연산

튜플은 배열과 동일한 연산을 많이 지원합니다. 몇 가지를 살펴보겠습니다:

1. 길이

우리의 튜플에 몇 개의 요소가 있는지 length 속성을 사용하여 확인할 수 있습니다:

let myTuple: [string, number, boolean] = ['Hello', 42, true];
console.log(myTuple.length); // 출력: 3

2. 추가하기 (push)

우리의 튜플에 요소를 추가할 수 있습니다. push 메서드를 사용합니다:

let myTuple: [string, number] = ['Hello', 42];
myTuple.push(true);
console.log(myTuple); // 출력: ['Hello', 42, true]

하지만 조심하세요! TypeScript는 이를 허용하지만, 튜플의 구조를 변경할 수 있으므로 예상치 못한 행동을 초래할 수 있습니다.

3. 제거하기 (pop)

우리의 튜플에서 마지막 요소를 제거할 수 있습니다. pop 메서드를 사용합니다:

let myTuple: [string, number, boolean] = ['Hello', 42, true];
myTuple.pop();
console.log(myTuple); // 출력: ['Hello', 42]

이 역시도 조심하세요! 이 메서드를 사용하면 튜플의 구조를 변경할 수 있습니다.

튜플 업데이트

우리의 튜플의 값을 업데이트할 수 있습니다. 특정 인덱스에 새로운 값을 할당합니다:

let myTuple: [string, number] = ['Hello', 42];
myTuple[0] = 'Hi';
myTuple[1] = 100;
console.log(myTuple); // 출력: ['Hi', 100]

단, 튜플에서 정의된 타입을 따라야 합니다. 예를 들어, 다음과 같은 작업은 할 수 없습니다:

let myTuple: [string, number] = ['Hello', 42];
myTuple[0] = 100; // 오류: 타입 'number'은 'string' 타입으로 할당할 수 없습니다.

튜플의 구조 분해

구조 분해는 튜플의 값을 별도의 변수로 분리하는 방법입니다. 마치 상자를 열고 모든 아이템을 테이블에 펼치는 것과 같습니다. 다음은 그 방법입니다:

let myTuple: [string, number, boolean] = ['Hello', 42, true];
let [greeting, theAnswer, isAwesome] = myTuple;

console.log(greeting);    // 출력: 'Hello'
console.log(theAnswer);   // 출력: 42
console.log(isAwesome);   // 출력: true

이 예제에서 우리는 세 개의 새로운 변수(greeting, theAnswer, isAwesome)를 만들고 튜플의 값을 순서대로 할당했습니다.

함수 매개변수와 튜플 타입

튜플은 함수에서 매우 유용할 수 있습니다. 예를 들어, 우리는 사람의 이름과 나이를 받아 인사말을 반환하는 함수를 만들 수 있습니다. 이를 위해 튜플을 사용할 수 있습니다:

function greetPerson(person: [string, number]): string {
const [name, age] = person;
return `Hello, ${name}! You are ${age} years old.`;
}

let person: [string, number] = ['Alice', 30];
console.log(greetPerson(person)); // 출력: "Hello, Alice! You are 30 years old."

이 예제에서 우리의 greetPerson 함수는 문자열과 숫자로 구성된 튜플을 기대합니다. 그런 다음 구조 분해를 사용하여 이 값을 분리하고 인사말을 만듭니다.

튜플 메서드

다음은 튜플에서 사용할 수 있는 몇 가지 일반 메서드입니다:

메서드	설명	예제
push()	튜플의 끝에 하나 이상의 요소를 추가합니다	myTuple.push(4)
pop()	튜플에서 마지막 요소를 제거합니다	myTuple.pop()
concat()	두 개 이상의 튜플을 결합합니다	let newTuple = tuple1.concat(tuple2)
slice()	튜플의 일부를 반환합니다	let portion = myTuple.slice(1, 3)
indexOf()	주어진 요소가 최초로 발견되는 인덱스를 반환합니다	let index = myTuple.indexOf(42)

이 메서드들은 튜플에서 작동하지만, 이를 사용하면 튜플의 구조를 변경할 수 있으므로 조심스럽게 사용해야 합니다!

이제 여러분은 TypeScript 튜플에 대한 기초 교육을 마쳤습니다. 튜플을 생성하고 값에 접근하며, 업데이트하고 함수에서 사용하는 방법을 배웠습니다. 여러분의 TypeScript 프로젝트에서 튜플을 활용해 보세요.

기억하세요, 연습이 완성입니다. 따라서 튜플을 자유롭게 실험해 보세요. 누가 알략니까? 튜플이 여러분의 새로운 최애 TypeScript 기능이 될지도 모릅니다!

행복하게 코딩하세요, 여러분의 튜플이 항상 정렬되길 바랍니다!

Credits: Image by storyset