[Typescript] 배열(1)

🔍서론

JavaScript에서의 배열

JavaScript에서의 배열은 아래의 상황처럼 배열 안에 다양한 타입들을 허용한다.

const array = ["1",1,null,true];
array.push("hi",["hello"]);

// ["1",1,null,true,"hi",["hello"]]

 

하지만 초기 선언 배열의 타입값들과 다른 값을 추가하게 되면 배열을 읽을 때 혼란을 줄 수 있으며 애플리케이션의 문제가 될만한 상황이 발생할 가능성이 높다.

 

🚫우리의 엄격한 TypeScript는 이 상황을 허용하지 않는다.

 

const array = ["1",1,null,true];
array.push("hi",["hello"]);

// error : Argument of type string[]->["hello"] is not assignable to parameter of type string | number | boolean | null

1️⃣ 배열 타입

배열타입의 선언은 아래와 같이 이루어진다.

let numberArray : number[];

numberArray = [1,2,3,4,5,6,7,8,9,10];

1️⃣- 1. 배열과 함수타입

괄호는 애너테이션의 어느 부분이 함수반환 부분이고 어느 부분이 배열 타입 묶음인지를 나타내기 위해 사용한다.

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

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

 

1️⃣- 2. 유니언 타입 배열

/* Type : string 또는 (number 배열) */

let stringOrNumberArray : string | number[];

/* Type : (string 또는 number) 배열 */

let arrayOfStringOrNumber : (string| number)[];

 

1️⃣- 3. any 배열의 진화

초기에 빈 배열 + 타입 애너테이션 선언을 하면 TypeScript는 배열을 any [ ]로 취급하고 모든 타입을 받을 수 있다.

/* Type : any[] */
let values = [];

/* Type : string[] */
values.push("");

/* Type : (number | string)[] */
values[0] = 0;

 
이렇게 타입 애너테이션을 작성하지 않으면 배열의 동작이 JavaScript의 허용처럼 모든 것을 허용하는데 이런 상황은 가급적 피하자.
✅TypeScript는 값이 타입을 알 때 가장 잘 작동한다. 

1️⃣- 4. 다차원 배열

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

아래의 두 코드는 똑같다.

let secondDimensionArray1 : number[][];

let secondDimesionArray2 : (number[])[];

 

---

2️⃣ 배열 멤버

 

TypeScript는 배열의 멤버를 찾아서 해당 배열의 타입 요소를 되돌려주는 전형적인 인덱스 기반 접근 방식을 이해하는 언어이다.

const players = ["Bellingham","KDB","Rodrigo"]

/*players 배열은 string[] 타입 */

const player = players[0]

/*player은 string 타입*/

 

2️⃣- 1 . 주의사항 : 불안정한 멤버

만약 아래와 같은 코드가 주어진다면 나는 처음에 어떤 결과를 유추할까?

function withElements(elements: string[]) {
    console.log(elements[9001].length);
}

withElements(["Hello", "World"]);

//result : ???

🐌 결론적으로는 당연하게도 9001번째 인덱스의 값은 없으니 아래와 같은 에러를 반환한다.

 

TypeError: Cannot read properties of undefined (reading 'length')

하지만 이 에러는 JavaScript의 런타임 시점에서 발생되는 오류이다.

 

즉, TypeScript는 배열의 인덱스에 대한 실존 값이 존재하는지 검사하지 않는다.

 

✅순서와 같이 설명해보자면

1. elements[9001]은 존재하지 않기에 undefined가 된다.

2. TypeScript는 elements배열이 string[ ] 임을 알고 있기에 elements[9001]의 타입을 string | undefined로 추론한다.

3. undefined.length를 실행하면 런타임 오류를 발생시키는데 이건 TypeScript의 타입 체크 시점이 아닌 JavaScript의 실행시점에서 생기는 문제이다.

4. 즉, TypeScript는 위와 같은 코드에서 "타입 오류"를 잡아내지 못한다.

타입스크립트에는 배열 조회를 더 안전하게 해주는 noUncheckedIndexedAccess 플래그가 있지만 매우 엄격한 탓에 잘 사용하지 않는다고 한다.

---

3️⃣스프레드와 나머지 매개변수

. . . 연산자를 사용하는 나머지 매개변수와 배열 스프레드는 JavaScript에서 배열과 상호작용하는 핵심 방법이다.

3️⃣- 1. 스프레드

두 개 이상의 배열을 결합하는 법 : . . .스프레드 연산자를 사용한다.

/*Type : string []*/
const players = ["Bellingham","KDB","Rodrigo"];

/*Type : number[]*/
const ages = [21, 33, 28]

/*Type : (string | number)[]*/
const conjoined = [...players, ...ages]

타입시스템에 있어서 입력된 배열이 동일한 타입이라면 출력 배열도 동일한 타입이다.

타입이 다른 두 배열을 스프레드해 새 배열을 생성하면 두개의 원래 타입 중 어느 하나의 요소인 유니언 타입 배열로 유추된다.

3️⃣- 2. 나머지 매개변수 스프레드

TypeScript는 나머지 매개변수로 배열을 스프레드하는 JavaScript의 실행을 인식하고 이에 대해 타입 검사를 수행한다.

따라서, 함수의 인수로 사용되는 배열은 나머지 매개변수와 동일한 타입을 지녀야만 한다.

function exampleFunction(arg1: number, ...args: string[]): void {
    console.log(arg1);
    console.log(args);
}

/* 첫 번째 인수는 숫자, 나머지 인수들은 문자열 */
exampleFunction(1, 'a', 'b', 'c'); /* 정상 동작, 출력: 1 ['a', 'b', 'c'] */

const numberArray: number[] = [2];
const stringArray: string[] = ['x', 'y', 'z'];

/* 배열을 스프레드하여 함수의 인수로 전달 */
exampleFunction(...numberArray, ...stringArray); /* 정상 동작, 출력: 2 ['x', 'y', 'z'] */

const invalidArray: (number | string)[] = [3, 'a', 4];

/* 타입 불일치로 인해 오류 발생 */
exampleFunction(1000,...invalidArray); /* 오류 발생: 'number' 타입은 'string' 타입에 할당될 수 없습니다.*/

 

---