JS배열의 문제점

JS에서 배열의 문제점

JS 배열 문제점은 아무타입이나 넣을 수 있다

const number = [1, '2', 3, '4', 5]; //JS에서는 가능하다.

number배열안에 number타입 string타입이 들어가 있는 것을 볼 수 있다.

TS에서 배열

let strings: string[] = ['1', '2', '3'];
strings.push(1); // 에러가난다.

배열을 선언할 때 string배열로 선언을 하게 되면 string타입이 아닌 타입을 넣을 때에 에러가 발생한다.

TS의 배열에서 string타입과 number타입 받기

let stringsOrNumbersArray : (string | number)[] = [
  1,
  '2',
  3,
  '4',
]

배열 안에 string 또는 number타입을 넣을 수 있다.

TS의 배열에서 string배열 또는 number배열 선언하기

let stringArrNumberArr : string[] | number[] = [
  1,
  2,
  3,
]

stringArrNumberArr = [
  '1',
  '2',
  '3'
],
stringArrNumberArr = [
  '1',
  2,
  '3'
] //에러발생

헷갈릴 수 있는 부분

//그냥 string or number 배열이다.
let stringOrNumberArr: string | number[]  =[
  1,2,3
]
stringOrNumberArr = '3';

string 또는 number[]이다.

네로잉

let boolsArr = [true,false,true]; // boosArr는 boolean array로 유추

boolsArr.push(false) //가능
// boolsArr.push(1) //에러

boolsArr는 boolean array로 네로잉이 된다.
그래서 number타입을 넣을 경우 에러가 발생하게 된다.

for(let i = 0; i < onlyString.length; i++){
  let item = onlyString[i] //item은 string타입
}

for(let item of onlyNumbers){
  //item number타입
}

let number3 = onlyNumbers[0];  
//number타입으로 유추


let number4 = onlyNumbers[9099] 
// number타입으로 유추, TS는 인덱스의 길이를 신경쓰지 않기 때문에 에러가 나지 않는다. 
//JS에서 컴파일하면 undefined가 나온다. 이런데에서 버그가 나올 수 있따.

타입스크립트는 인덱스의 길이를 신경쓰지 않기 때문에 조심해야 한다.

Spread Operator

/**
 * Spread Operator
 */

const onlyString = ['1', '2', '3', '4'];
const onlyNumbers = [1,2,3,4];

const arr1 = [
  ...onlyString //string[]
]

const arr2 = [	// (string | number) []
  ...onlyString,
  ...onlyNumbers
]