[TS] 배열과 튜플

 

목차

 

 

 

📌  배열

 

개별 자바스크립트 배열은 하나의 특정 타입의 값만 가진다.

타입 스크립트는 초기 배열의 어떤 데이터 타입이 있는지 기억하고

배열이 해당 데이터 타입에서만 작동하도록 제한한다.

 

📍배열 타입

 

변수에 타입 에너테이션을 제공해 배열이 포함해야하는 값의 타입을 알려주어야 한다.

 

// 선언과 할당을 동시에
let car:string[] = ['BMW','AUDI','BEN']

// 선언과 할당을 분리
let fruits: string[] = [];
fruits.push("apple");
fruits.push("banana");

// 제네릭 사용
let fruits:Array<number>= new Array<number>();
fruits.push(1);
fruits.push(2);

 

 

배열과 함수 타입

 

괄호는 어느 부분이 함수 반환 부분이고 어느 부분이 배열 타입 묶음인지를 나타내기 위해 사용

 

// 타입은 string 배열을 반환하는 함수
let createStrings : () => string[];

// 타입은 각각의 string을 반환하는 함수 배열
let stringCreators:(() => string)[];

 

유니언 타입 배열

 

배열의 각 요소가 여러 선택 타입 중 하나일 수 있음을 나타내려면 유니언 타입 사용

유니언 타입 배열에서 괄호 사용은 매우 중요 !!!

 

// 다음 두 코드는 동일하지 않다
// 타입은 string 또는 number 의 배열
let stringOrArrayOfNunbers : string | number[];

// 타입은 각각 number 또는 string인 배열의 요소
let stringOrArrayOfNunbers : (string | number)[];

 

any 배열의 진화

 

배열 또한 타입 에너테이션이 없다면 any[] 취급 

빈 배열로 선언했어도 값에 맞게 타입은 진화한다.

 

// 타입 : any[]
let values = [];
// 타입 : string[]
values.push('');
// 타입 : (number | string)[]
values[0] = 0;

 

 

다차원 배열

 

2차원 배열 또는 배열의 배열은 두개의 []를 갖는다.

 

let values : number[][];

values = [
    [1,2,3],
    [4,5,6],
    [7,8,9],
]

 

 

📍배열 멤버

 

배열 요소의 타입은 배열의 타입을 따라간다.

 

onst names = ["Ben", "Rock"];
const firstName = names[0];
// firstName의 타입은 string

const nameNumber = ["Ben", 34];
const firstName = nameNumber[0];
// firstName의 타입은 number | string

 

🔗  주의 사항 : 불안정한 멤버

 

타입 스크립트도 완벽하지 않기 때문에, 배열의 길이를 넘는 값을 호출 했을 때, 타입 오류를 출력하지 않는

오류가 있다.

 

function el(elements: string[]) {
	console.log(el[123].length); // 오류 없음
}

el(["123","1424"]);

 

📍스프레드와 나머지 매게변수

 

나머지 매게변수

 

[TS] 함수

 

스프레드

 

... 스프레드 연산자를 사용해 배열을 결합

기존 두 배열이 같은 타입이면 동일한 타입으로 출력 되고, 서로 다른 타입이면 유니언 타입으로 출력된다.

 

const stringArr = ["abc", "dcd"];
const ages = [12,34];
const joinArray = [...stringArr, ...ages];
// 타입: (string | number)[]

 

나머지 매게변수 스프레드

 

함수에서 매개변수로 …을 사용해서 임의 갯수의 매개변수를 받을 때, 한 가지 타입의 값을 가져야 한다.

 

function logFunc(name: string, ...names: string[]) {
	for (const name of names) {
		console.log(`${name}, ${name}!`)
	}
}

logFunc("Jiin", "Ben", "Been", "Bon");
// OK

logFunc("Jiin", 123, 423);
// Error

 

 

📍 튜플

 

JS에서는 튜플이 없으면 단순히 배열의 한 종류로 취급된다.

타입스크립트는 튜플의 타입 표기법을 배열과 다르게 선언 가능하다.

 

튜플특징

튜플 타입은 가변 길이의 배열 타입보다 더 구체적으로 처리

튜플은 불변 구조이기 때문에 읽기 전용(readlonly)이다.

as const를 기술하면 쉽게 값의 정의로부터도 튜플 타입을 가져올 수 있다.

 

// 여러 타입에 대응하는 any 타입 배열을 선언한 예
let tuple : any[] = [true, 'the result is ok']
// any[] 타입은 타입 기능을 무력화 하므로 배열과 다른 튜플의 타입 표기법으로 선언 가능
const array: number[] = [1, 2, 3, 4, 5];
const tuple : [boolean, string] = [true,'the result is of']

 

🔗  튜플 추론

 

타입 스크립트는 생성된 배열을 튜플이 아닌 가변 길이의 배열로 취급

튜플 타입임을 증명하려면 명시적 튜플 타입 또는 const 어시션을 사용하는 방법이 있다.

 

// const 어시션을 사용한 예
// $ExpectType readonly ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
const days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const;