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

크롱·2023년 7월 25일
0

TypeScript

목록 보기
10/25

점 3개 ...destructuring에 대해 알아볼겁니다😉

🥶 rest parameter

함수에 파라미터가 몇개 들어올지 모를때
점3개로 rest 파라미터를 만들어주면 됩니다.

... 점 3개 붙이면 됨💘💘💘

rest parameter자리에 들어온 데이터는 전부 [] 배열에 담아줍니다.

function 함수(...a){
	console.log(a)
}
함수(1,2,3) //[1,2,3]


function 함수(num, ...a){ 
  //다른 파라미터 있으면 맨 뒤에 위치

}



👇타입지정은 어떻게하냐면👇

function 함수(...a :number[]){
	console.log(a)
}
함수(1,2,3) //[1,2,3]


🥵 spread operator

괄호를 없애주는 문법

let arr=[1,2,3];
let arr2 =[4,5];
let arr3 = [...arr,...arr2] // [1,2,3,4,5]

😳 destructuring

let [hi,num] = ['안녕',200]
console.log(hi) //'안녕'
console.log(num) //200

object에서 🐸 destructuring 🐸
let {student:student,age:age}={student:true, age:20}true20
             
자바스크립트 신문법에선, student와age를 생략가능하다.
let {student,age}={student:true, age:20}


----------------------------------------------------------
🦾함수에 넣어보자!🦾

let 오브젝트 = {student:true, age:20}

👇 student란 변수에 true, age란 변수에 20들어감.👇
function 함수({student,age}) {
	console.log(student,age)
}
함수(오브젝트)

destructuring 타입지정

그래서 destructuring 타입지정 그거어떻게하는건데......

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

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

함수(person); //true 20

----------------------------------
너무 기니까 type 지정했다
type Info = { student: boolean; age: number };
function 함수({ student, age }: Info) {
  console.log(student, age);
}



연습 문제 및 예제 코드

  • 1번
    숫자 여러개를 입력하면 최댓값을 return 해주는 함수

최댓값(6,3,7,2) 이렇게 쓰면 7이 return 되어야합니다.
(조건1) 넣을 수 있는 숫자 갯수는 제한없음, 0 이상의 정수만 가능합니다.
(조건2) Math.max() 사용금지 반복문이나 쓰셈

function 최댓값(...x : number[]) {
  let result = 0;
  x.forEach((i)=>{
    if (result < i) {
      result = i
    }
  })
  return result;
}
console.log(최댓값(4,6,3,2)) 

반복문을 써서 파라미터로 들어온 숫자를 계속 result와 비교합니다. 
그래서 숫자가 더 크면 result 를 그 숫자로 갈아치우고 
그게 아니면 냅둡니다.


  • 2번
type UserType = {
  user : string,
  comment : number[],
  admin : boolean
}

function 함수({user, comment, admin} :UserType) :void{
  console.log(user, comment, admin)
}

함수({ user : 'kim', comment : [3,5,4], admin : false }) 


  • 3번
type Type= (number|string|boolean) [];

function 함수([a,b,c]:Type){
    console.log(a,b,c)
}


함수( [40,'wine',false] )
profile
👩‍💻안녕하세요🌞

0개의 댓글