타입스크립트 기초 - 8

Stulta Amiko·2022년 6월 29일

typescript 기초

타입스크립트 기초

목록 보기

8/24

배열

자바스크립트에서 배열은

let arr_name = new Array(arr_length)

와 같은 방식으로 선언을 한다
혹은 배열의 길이를 넣지않고 push를 해주면서 값을 넣어줄 수도 있다.

혹은 다른언어에서 많이 사용하는 방법인 []를 사용해서 만드는 방법도 있다.

let arr_name = [1,2,3]

과 같이 기본적인 배열을 선언하는 방법도 있다.

자바스크립트에서 배열은 객체이다.

타입스크립트에서는 배열의 타입을 지정해 줄 수 있다.

let num_arr :number[] = [1,2,3]
let str_arr: string[] = ['string','arr']

type Person = {name: string,age?: number}
let Person_arr: Person[] = [{name:'jack'},{name:'jane',age:33}]

console.log(num_arr)
console.log(Person_arr)
console.log(str_arr)

실행결과
[ 1, 2, 3 ][ { name: 'jack' }, { name: 'jane', age: 33 } ]
[ 'string', 'arr' ]

위와같은방식으로 타입을 지정해주고 배열을 만들 수 있다.

문자열과 배열간 변화

string클래스에는 split 함수가 있다.
구분자를 넣으면 그걸 이용해서 문자열에서 문자를 구분해준다
그리고 그걸 배열에 담는 코드를 만들어보면

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

default.ts

import {split} from './default'

console.log(
    split('hello'),
    split('h_e_l_l_o','_')
)

index.ts

와 같이 코드를 만들면

출력결과
[ 'h', 'e', 'l', 'l', 'o' ][ 'h', 'e', 'l', 'l', 'o' ]

와같이 나오게된다.
delim에 구분자를 넣게 되고 매개변수로 받는 문자열은 타입이 string이니 string 클래스의 split 함수를 사용할수 있게 된다.
그점을 이용해서 반환값을 배열로 받게 하는 함수를 만든다.
따라서 위와같은 결과가 나오게 된다.

반대로 배열을 문자열로 다시 결합할 경우에는
string 클래스의 join 함수를 사용한다.

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

default에 다음과 같은 export 문을 추가하고

let arr :string[] = split('hello')
console.log(
    join(arr)
)

index에 다음과 같은 코드를 추가하면

결과로는 hello라는 문자열이 나오게된다.
위와같은 방식으로 문자열을 배열로 만들거나 문자가 있는 배열을 문자열로 만들수 있다.
또한 디폴트 파라미터로 ''를 지정해놨지만 만약 다른 문자를 넣는다면 문자와 문자사이에 문자를 추가하는것도 가능하다

배열의 디스트럭처링

let array: number[] = [1,2,3,4,5]
let [first,second,third,...other] = array
console.log(first,second,third,other)

실행결과
1,2,3,[4,5]

이런식으로 디스트럭처링 해서 할당해줄 수 있다.

for in/for of

let names = ['jack','jane','steve']

for(let index in names){
    const name = names[index]
    console.log(`[${index}] = ${name}`)
}

실행결과
[0] = jack
[1] = jane
[2] = steve

for문을 좀더 간결하게 사용하는 방법으로 for in 문이 있고 위와같은 방식으로 사용할 수 있다.

let jack = {name: 'jack',age: 32,job: "programmer"}
for(let property in jack){
    console.log(`${property}: ${jack[property]}`)
}

실행결과
name: jack
age: 32
job: programmer

위와 같은 코드도 for in 문으로 반복할 수 있다.
객체의 프로퍼티에 접근하는 for문이다.

let arr:number[] = [1,2,3,4,5]
for(let num of arr){
    console.log(num)
}

실행결과
1 2 3 4 5

좀더 간결하게 사용하는 방법에는 위와 같이 for of 문이 있다.

제네릭

값을 받을때 한정된 타입이 아닌 여러 타입으로 받으려고 할때 제네릭이라고 한다.
제네릭 자체는 자바에도 있어서 몇번 보고 넘어갔지만 사실 좀 헷갈린다
예를들어 배열의 길이를 구하는 함수와 빈배열인지 판단하는 함수를 구현한다고 하자.

export const arr_length = <T>(array: T[]): number => array.length
export const is_Empty = <T>(array:T[]):boolean => arr_length(array) == 0

default.ts

import { arr_length,is_Empty } from "./default";

let num_arr :number[] = [1,2,3,4,5]
let str_arr :string[] = ['jake','jane','jade']

type Person = {name: string,age?: number}

let per_arr :Person[] = [{name:'jake',age: 30},{name: 'jane'}]

console.log(
    arr_length(num_arr),
    arr_length(str_arr),
    arr_length(per_arr),
    is_Empty([]),
    is_Empty([1]),
)

index.ts
실행결과
5 3 2 true false

위 코드를 보면 어떤 방식에서 제네릭이 작동하는지 알 수 있다.
한가지 타입에 구애받지않고 여러 타입을 받는다는 것이다.

range

const range = (from: number,to: number): number[] => from<to ? [from,...range(from+1,to)] : []

let number: number[] = range(1,10)

console.log(number)