typescript 함수 rest 파라미터, destructuring 할 때 타입지정

rest 파라미터란

함수에 어떤 파라미터가 몇개 들어올지 미리 정의가 불가능한 경우가 있다.
3개일지 4개일지 아니면 100개일지 모른다면 점 3개 ... rest 파라미터로 만들어주면 된다.

<script>
function fuc(...a) {
	console.log(a) // [1,2,3,4,5]
}
fuc(1,2,3,4,5)
</script>

함수 파라미터 작명할 때 점 3개를 붙여주면 여기엔 파라미터가 잔뜩 들어올 수 있다~ 라고 정의가 가능하다.

이를 rest 파라미터라고 한다. rest 파라미터는 다른 일반 파라미터 뒤에만 올 수 있다.
rest 파라미터자리에 집어넣은 값들은 전부 배열안에 담겨있다.

rest 파라미터 타입지정

rest 파라미터는 항상 배열안에 담겨오기 때문에 타입지정도 array처럼 해주면 된다.

function fuc(...a :number[]) {
	console.log(a) // [1,2,3,4,5]
}
fuc(1,2,3,4,5)
</script>

Spread operator과 차이

코드를 짜다보면 점 3개 붙이는 경우가 또 있는데 array 혹은 object 괄호를 벗기고 싶을 때 왼쪽에 사용한다.

<script>
let arr = [3,4,5]
let arr2 = [1,2, ...arr]
console.log(arr2) // [1,2,3,4,5]
</script>

array 혹은 object 왼쪽에 점 3개를 붙이면 괄호를 벗겨주세요 라는 뜻이다.

...spread는 array, object 자료 왼쪽에, 여러개의 파라미터를 의미하는 rest는 함수선언할 때 소괄호 안에 등장한다.

Destructuring 문법

자바스크립트에서 array, object 안에 있는 데이터를 빼서 변수로 만들고 싶을 때 쓰는 문법이 있다.

<script>
let { student, age } = { student: true, age: 20 }
</script>

이런식으로 destructuring 문법을 사용하면 똑같이 변수로 뺄 수 있다.

<script>
let [a, b] = ["hello", 100]
</script>

array 자료도 마찬가지로 왼쪽으론쪽 똑같이 보이게 변수 작명을 해주면 쉽게 뺄 수 있다.
다만 특징은 object destructuring할 땐 변수이름을 속성이름과 맞춰주는게 편리하고, array destructuring할 땐 변수이름을 마음대로 작명이 가능하다.

Destructuring 문법도 함수 파라미터에 사용 타입지정

object가 들어 있는 자료구조의 타입은 마찬가지로 object형태로 타입을 지정해주면 된다.
만약 타입이 길어지게 되면 type 키워드를 이용하는 방법도 있다.

<script>
let person = { student : true, age : 20 }

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