Typescript - rest & destructuring

Typescript rest & spread

rest parameter란 함수의 파라미터의 값 갯수가 가변적일때 ...을 사용하여 여러개의 파라미터가 들어올 수 있도록 한다.

function myFunc(...a: number[]) {	// ...을 사용하여 갯수제한을 없앤다.
   									// 배열 형태로 파라미터 타입을 선언한다.
}

myFunc(1, 2, 3, 4, 5)	// 5개의 파라미터
myFunc(1, 2)	// 2개의 파라미터

다른 파라미터와 같이 사용 하기 위해선 rest parameter를 맨 마지막에 선언해야한다.

function myFunc(x:string, ...a: number[]) {	// ...a는 뒤에 있어야한다.

}

 

spread operation이란 객체 또는 배열을 다른 객체, 배열에 복제해서 옮겨야 할 때 사용한다.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let spreadArr = [...arr1, ...arr2];	// 배열 2개를 spread operation을 사용하여 생성

 

 

 

반응형

 

 

 

Typescript Destructuring

Destructuring이란 구조 분해 문법이라고 한다.

오브젝트 및 배열의 각각의 데이터를 변수로 만들때 구조분해를 통해 간단하게 할 수 있다.

// destructuring 처리를 하지 않았을때
let pet = {
    petName: 'bomi',
    petAge: 7
}

// 각각의 변수에 오브젝트의 값을 넣어준다.
let petName = pet.name;
let petAge = pet.age;


// destructuring 처리를 했을때
let { petName , petAge } = { petName: 'bomi', petAge: 7 } // 한번에 변수 처리를 할 수 있다.

 

함수에 destructuring 을 사용하면 오브젝트를 파라미터로 넘길때 편리하게 사용할 수 있다.

function petFunc({ petName , petAge } ) {	// 함수 파라미터에도 destructuring 할 수 있다.
    console.log(petName, petAge);
}

petFunc( { name: 'bomi', age: 7 } )

 

typescript로 함수에 파라미터를 destructuring 처리 후 타입을 선언하는 방법이다.

interface PetInfo { petName: string , petAge: number };	// object를 interface로 선언한다.

let petInfo: PetInfo = {
    petName: 'bomi', 
    petAge: 7 
}

// destructuring 파라미터에 타입을 선언한다.
function petFunc({ petName, petAge }:  { petName: string , petAge: number }) {
    console.log(petName, petAge);
}

petFunc( petInfo );