배열 이해하기

배열의 타입

타입스크립트에서 배열의 타입은 배열의 요소, 아이템들의 타입이다.
배열의 아이템들이 number타입이면 배열의 타입은 number[]이고, 아이템이 string 타입이면 string[]이다.

//아이템들이 숫자면 숫자 배열타입
const numArray : number[] = [1,2,3];
//아이템들이 문자면 문자 배열타입
const strArray : string[] = ['Type',  'Script']
//객체 타입을 만들어서
type IPerson = {name : string, age?:number}
//해당 배열을 객체타입으로도 만들 수 있다.
const personArray : IPerson[] = [{name:'Lee'}, {name:'Kim', age: 23}]
console.log(numArray)
console.log(strArray)
console.log(personArray)

문자열과 배열간 변환

타입스크립트에서는 문자 타입이 없고 문자열의 내용 또한 변경 할 수 없다. 이러한 특징으로 문자열을 가공하려면 먼저 문자열을 배열로 전환해야 한다.
보통 문자열을 배열로 전환 할 때는 String 클래스의 split을 사용한다.
split메서드는 문자를 쪼개는 구분자를 입력받아 문자열을 string []배열로 만들어 준다.

split(구분자 : string) : string[]

String 클래스의 split을 바로 이용하게 되면 배열의 타입이 결정되지 않는다. 따라서 각 매개변수와 문자열 부분에 들어갈 타입을 미리 결정해주고 직접 정의한 함수에 의해 Stirng 클래스의 split메서드가 이용 되도록 한다.

export const split = (str:string, delim : string = '') : string[] => str.split(delim)

//index.ts
import {split} from './export';
console.log(split('anyword'))

만약 다시 string타입으로 변환하고 싶으면 Array 클래스의 join메서드를 이용하면 되는데 split메서드와 마찬가지로 미리 타입을 결정한 함수가 필요하다.

export const join  = (strArray : string[], delim: string = '') : string => strArray.join(delim)

//index.ts
import {join} from './export';
console.log(join(['g','o','o','d']))

인덱스 연산자

배열이 가지고 있는 아이템 중 특정 위치에 있는 아이템을 얻고자 할때 인덱스 연산자를 사용한다. 인덱스는 0부터 시작이며 사용은 자바스크립트와 동일하다.

const numbers: number[] = [1, 2, 3, 4, 5]
for (let index = 0; index < numbers.length; index++) {
  const item : number = numbers[index];
 console.log(item)  
}
// 1
// 2
// 3
// 4
// 5

배열의 비구조화 할당

객체 뿐아니라 배열에서도 비구조화 할당을 적용하여 사용할 수 있다.

const array: number[] = [1, 2, 3, 4, 5]
// first, second에는 순서에 맞는 아이템을 넣고 나머지 연산자에는 나머지 값들이 담긴다.
const [first, second, ...rest] = array
console.log(first, second, rest)
//1 2 [3, 4, 5]

for in과 for of 문

for 변수 in 객체 문은 index번호를 순회하며
for 변수 of 객체 문은 배열의 값을 순회한다.

for ..in문

for 변수 in 객체 형식으로 사용한다.
변수에는 index를 반환한다.

const names: string[] = ['김사과', '반하나', '차두리']
for (const index in names) {
  const name = names[index]
  console.log(`[${index}] : ${name}`)
}
//[0] : 김사과
//[1] : 반하나
//[2] : 차두리

for ..of문

for 변수 of 객체 형식으로 사용한다.
변수에는 value를 반환한다.

const names: string[] = ['김사과', '반하나', '차두리']
for (const value of names) {
  const name = value
  console.log(`${name}`)
}
//김사과
//반하나
//차두리

제네릭 방식의 타입

배열을 이루는 함수를 작성할 때 number[ ]와 같이 타입이 고정된 함수를 만들기 보다는 T[ ]형태로 배열의 아이템 타입을 한번에 표현하는 것이 편하다.
T와 같이 타입을 변수처럼 취급하는 것을 제네릭(generics type)타입이라고 한다.

const testArray = [1,2,3,4]
const testArray2 = ['1','2','3','4']
type IPerson = { name: string, age?: number }
const personArray : IPerson[] = [{name: 'Lee'}, {name:'Kim', age : 23}]
//배열의 길이를 구하는 함수
const arrayLength = <T>(array : T[]):number => array.length

console.log(arrayLength(testArray)) // 4
console.log(arrayLength(testArray2)) // 4
console.log(arrayLength(personArray)) // 2

위와 같이 임의로 만든 타입과 string, number 타입 모두에서 동작하는 것을 확인 할 수 있다.

제네릭 함수의 타입 추론

제네릭 형태로 구현된 함수는 원칙적으로는 아래와 같이 사용해야한다.

함수이름<타입변수>(매개변수)

//ex.ts
const identity = <T>(n: T): T => n
console.log(
identity<string>('d')
)

하지만 매번 위와 같이 작성하는 것은 번거로워서 타입 변수는 생략이 가능하다.
그때는 타입 추론을 통해 생략된 타입을 찾아낸다.

//ex.ts
const identity = <T>(n: T): T => n
console.log(
identity('value') // value
)

제네릭 함수의 함수 시그니처

함수의 시그니처를 작성할때 특정한 경우에는 변수에 타입을 명시하라고 한다.
예를들어 식별자가 중복이 될때 식별자의 모호성을 해결하기 위해 변수에 타입을 명시한다.

const error = (cb: (number, number?) => number): void => { }
// 식별자 중복 에러
const normal = (cb: (a : number, b?: number) => number): void => {console.log(cb) }
// 1개의 식별자만 타입을 작성해도 되지만 2개 전부 적는 것을 권장한다.

위와 같은 이유로 제네릭 함수에서도 타입을 명시해줘야한다.

const f = <T>(cb : (arg : T, arg2 ?:number) => number):void => {}

전개 연산자

앞서 설명했듯이 나머지 연산자를 사용할 수 있듯 전재 연산자를 사용할 수 있다.

const array1 : number[] = [1,2]
const array2: number[] = [3, 4]

const newArray: number[] = [...array1, ...array2]
console.log(newArray)

range 함수 구현

배열을 이용해서 range함수를 구현해보자
range함수는 ramda 외부 패키지에서 제공하는 메소드로 두개의 인자를 받아 사이의 값을 출력하는 함수이다.

npm i -D @types/ramda 
// lamda 패키지 설치 
//range.ts
export const range = (from : number, to : number) :number[] => from < to ? [from,...range(from+1, to)] : []

//range-test.ts
import { range } from "./range";

const number : number[] = range(1, 9+1);

console.log(number)

참고
타입스크립트를 실행 시 변수를 선언하면 동위 폴더 혹은 하위 폴더의 ts파일 내의 변수 중복을 검사한다.