배열과 튜플

한 입 크기로 잘라먹는 타입스크립트 - 배열과 튜플

- src/chapter2.ts

// 배열
let numArr: number[] = [1, 2, 3]; // 배열의 타입 정의1

let strArr: string[] = ['hello', 'im', 'winterlood'];

let boolArr: Array<boolean> = [true, false, true]; // 배열의 타입 정의2 (제네릭 문법 사용)

// 배열에 들어가는 요소들의 타입이 다양할 경우 (바 '|' 가 들어가는 유니온 타입)
let multiArr: (number | string)[] = [1, 'hello']; // 마우스 커서 올리면 자동 추론됨.

// 다차원 배열의 타입을 정의하는 방법
let doubleArr: number[][] = [
    [1, 2, 3]
  , [4, 5]
];

// 튜플(자바스크립트엔 없고 타입스크립트에만 존재) : 길이와 타입이 고정된 배열
let tup1: [number, number] = [1, 2];
// tup1 = [1, 2, 3]; // 길이 넘어서는 배열 저장X
// tup1 = ['1', '2']; // 타입 만족하지 않는 배열 저장X

let tup2: [number, string, boolean] = [1, '2', true]; // 3개의 타입에 길이가 3 으로 저장
// tup2 = ['2', 1, true]; // 타입 순서 만족하지 않는 배열 저장X
// tup2 = [1]; // 길이가 다른 배열 저장X

// 튜플도 별도로 존재하는 자료형이기보다 배열이다.

이후 터미널에서 컴파일한다.

- Terminal

tsc

컴파일 결과인 chapter2.js 파일이 잘 생성된다.

- chapter2.js

// 배열
let numArr = [1, 2, 3]; // 배열의 타입 정의1
let strArr = ['hello', 'im', 'winterlood'];
let boolArr = [true, false, true]; // 배열의 타입 정의2 (제네릭 문법 사용)
// 배열에 들어가는 요소들의 타입이 다양할 경우 (바 '|' 가 들어가는 유니온 타입)
let multiArr = [1, 'hello']; // 마우스 커서 올리면 자동 추론됨.
// 다차원 배열의 타입을 정의하는 방법
let doubleArr = [
    [1, 2, 3],
    [4, 5]
];
// 튜플(자바스크립트엔 없고 타입스크립트에만 존재) : 길이와 타입이 고정된 배열
let tup1 = [1, 2];
// tup1 = [1, 2, 3]; // 길이 넘어서는 배열 저장X
// tup1 = ['1', '2']; // 타입 만족하지 않는 배열 저장X
let tup2 = [1, '2', true]; // 3개의 타입에 길이가 3 으로 저장
export {};
// tup2 = ['2', 1, true]; // 타입 순서 만족하지 않는 배열 저장X
// tup2 = [1]; // 길이가 다른 배열 저장X
// 튜플도 별도로 존재하는 자료형이기보다 배열이다.

튜플 타입을 정의했지만, 자바스크립트 파일로 컴파일되어 변환될 때 배열로 변환된다.

- src/chapter2.ts

...
// push, pop 사용 가능
tup1.push(1);
tup1.pop();
tup1.pop();
tup1.pop();
// 위처럼 배열 메서드 사용시 튜플의 길이 제한이 발동하지 않음. 따라서 주의하기.

// 튜플을 사용하는 상황 : 배열 사용할 때 index 의 위치에 따라 넣어야 하는 값이 이미 정해져 있고, 순서 지키는게 중요할 때, 튜플 타입을 이용하여 값을 잘 못 넣지 않도록 방지.
const users: [string, number][] = [
    ['이정환', 1]
  , ['이아무개', 2]
  , ['김아무개', 3]
  , ['박아무개', 4]
//  , [5, '최아무개']
];

참고링크 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런