0Pricing
TypeScript Academy · 강의

튜플: 고정 길이 형식 배열

위치가 정해진 구조화된 데이터를 위해 튜플을 정의합니다.

튜플: 고정 길이 형식 배열은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

환영합니다

튜플은 요소 수가 고정되어 있고 각 위치에 특정 타입이 지정된 배열입니다. 좌표나 키-값 쌍처럼 구조화된 데이터에 적합합니다.

튜플 정의하기

튜플 타입에는 각 요소의 타입을 순서대로 나열합니다. 길이는 고정되며 각 위치에는 선언된 타입의 값만 저장할 수 있습니다.
const point: [number, number] = [10, 20];
const entry: [string, number] = ['age', 25];

튜플 요소에 접근하기

인덱스로 튜플 요소에 접근하세요. TypeScript는 각 위치의 타입을 알고 있습니다.
const pair: [string, number] = ['Alice', 30];
const name: string = pair[0]; // string
const age: number = pair[1];  // number

튜플 구조 분해

튜플을 구조 분해하면 각 변수에 위치를 기반으로 구체적인 추론 타입이 지정됩니다.
const [x, y]: [number, number] = [5, 10];
console.log(x + y); // 15

튜플과 배열

배열은 같은 타입의 요소를 가변 개수만큼 가질 수 있습니다. 튜플은 특정 위치에 고정된 개수의 요소를 가지며 요소마다 타입이 다를 수도 있습니다.
const arr: number[] = [1, 2, 3, 4];   // variable length
const tup: [number, string] = [1, 'a']; // fixed: 2 elements

선택적 튜플 요소

`?`를 사용하여 튜플 요소를 선택 사항으로 표시하세요. 선택적 요소는 필수 요소 뒤에 와야 합니다.
type Named = [string, string?]; // name, optional nickname
const a: Named = ['Alice'];
const b: Named = ['Bob', 'Bobby'];

튜플의 나머지 요소

튜플에는 특정 타입의 후속 요소를 가변 개수만큼 받는 나머지 요소를 포함할 수 있습니다.
type StringAndNumbers = [string, ...number[]];
const data: StringAndNumbers = ['scores', 90, 85, 78];

이름이 지정된 튜플 요소

TypeScript 4.0에서는 이름이 지정된 튜플 요소를 추가했습니다. 이름은 타입 시스템에 영향을 주지 않으면서 가독성을 높입니다.
type Range = [start: number, end: number];
const r: Range = [0, 100];

읽기 전용 튜플

생성 후 튜플이 변경되지 않도록 `readonly`를 추가하세요.
const origin: readonly [number, number] = [0, 0];
// origin[0] = 5; // Error

함수 반환 값으로 사용하는 튜플

함수에서 튜플을 반환하는 것은 서로 다른 타입의 여러 값을 반환할 때 React 훅과 유틸리티 함수에서 사용하는 패턴입니다.
function useCounter(): [number, () => void] {
  let count = 0;
  return [count, () => { count++; }];
}

as const로 튜플 추론하기

`as const`가 없으면 튜플 리터럴이 배열 타입으로 확장될 수 있습니다. 정확한 튜플 타입을 추론하려면 `as const`를 사용하십시오.
const pair = [1, 'hello'] as const;
// type: readonly [1, 'hello'] — not (number | string)[]

빠른 확인

아무런 타입 주석 없이 `const t = [1, 'hello']`를 작성하면 TypeScript는 어떤 타입으로 추론합니까?

복습

튜플은 위치마다 타입이 지정된 고정 길이 배열을 정의합니다. 좌표, 키-값 쌍, 여러 값을 반환하는 함수에 사용하십시오. 변경을 막으려면 읽기 전용으로 만들고, 리터럴 튜플 타입을 추론하려면 `as const`를 추가하십시오.

자주 묻는 질문

“튜플: 고정 길이 형식 배열” 강의는 무료인가요?

네 — “튜플: 고정 길이 형식 배열” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“튜플: 고정 길이 형식 배열”에서 뭘 배우나요?

위치가 정해진 구조화된 데이터를 위해 튜플을 정의합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“튜플: 고정 길이 형식 배열” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 형식이 지정된 배열: T[] 및 Array
  2. Readonly 배열과 불변 데이터
  3. 튜플: 고정 길이 형식 배열
  4. 열거형: 숫자 및 문자열 상수
← TypeScript Academy(으)로 돌아가기