Develop/TypeScript

[Typescript] 함수 rest parameter, destructuring 시 타입지정

dawonny 2023. 9. 28. 16:51
728x90
반응형

rest parameter

먼저 rest parameter 에 대해서 간단히 짚고 넘어가자

function PrintNumArr(...a){
  console.log(a)
}

PrintNumArr(1,2,3,4,5)

위처럼 함수 파라미터를 만들때 앞에 ... 을 붙여주면

그 위치에는 여러값들이 들어있는 리스트가 남는다고 생각할 수 있다.

[LOG]: [1, 2, 3, 4, 5]

그럼 rest parameter 의 타입지정은 어떻게 할까?

 

rest parameter 의 타입지정

array 취급이기 때문에 (숫자가 들어가는 array 라는 가정하에) number[] 이런식으로 작성해줄 수 있겠다.

아래와 같다

function PrintNumArr(...a:number[]){
  console.log(a)
}

PrintNumArr(1,2,3,4,5)

 

spread operator 와는 달라요

js 코드를 짜다보면 ... 을 붙이는 경우가 또 있는데

spread operator 가 그 경우이다

array 나 object 의 괄호를 벗기고 싶을 때 사용한다.

예를 들면 아래와 같다

let arr = [1,2,3]
let arr2 = [...arr, 4,5]
console.log(arr2)
[LOG]: [1, 2, 3, 4, 5]

arr 앞에 ... 을 붙였더니 [1,2,3] 이 1,2,3 이런식으로 값만 빼올 수 있었다.

 

 

destructing

js 에서 array, object 안의 데이터를 빼서 변수로 만들고 싶을 때 쓸 수 있는 문법이다.

object 의 경우를 먼저 보자

let person = { student : true, age : 20}
let student = person.student;
let age = person.age

위 코드를 

let person = { student : true, age : 20}

let {student, age} = { student : true, age : 20}

이렇게 작성할 수 있다.

student 라는 변수와 age 라는 변수에 student 속성의 값 true 를 넣어주고, age 속성의 값 20 을 넣어주었다.

(object destructing 의 경우 변수이름과 속성이름을 맞춰주는 것이 편리하다고 한다)

 

이번에는 array 의 경우를 보자

let [x, y] = ['hi', 123]

x 와 y 라는 변수를 만들어 array의 데이터 값을 쉽게 빼서 변수로 저장했다.

 

destructing 문법을 함수 파라미터에 적용하기

let person = { student : true, age : 20 }

function 함수(a, b){
  console.log(a, b)
}
함수(person.student, person.age)
let person = { student : true, age : 20 }

function 함수({student, age}){
  console.log(student, age)
}
함수({ student : true, age : 20 })

같은 내용이지만 아래의 코드가 destructing 문법을 사용한 예이다.

 

이 문법을 사용하면 파라미터로 들어오는 student 의 값인 true 는 student 라는 변수에 들어가고

age 의 값인 20 은 age 라는 변수에 들어간다.

만약 함수에 파라미터로써 들어가는 object, array 가 항상 같은 형태라면 이런 코드를 작성해도 좋겠다.

 

위 코드에서 함수 파라미터에 타입지정을 한 것은 아래와 같다

let person = { student : true, age : 20 }

function 함수({student, age}:{student:boolean, age:number}){
  console.log(student, age)
}
함수({ student : true, age : 20 })

object 처럼 타입지정을 하면 된다.

 

예제

array 자료를 파라미터로 입력할 수 있는 함수를 만들어보자

dexstructing 문법을 써야하며, 함수실행시 입력한 파라미터들을 콘솔창에 입력해야한다

type arr = (number | string | boolean)[];

function myfunc([a,b,c]:arr){
  console.log(a,b,c)
}

myfunc( [20, 'hi', false] )

ref: 코딩애플

728x90
반응형