Typescript #5 구조분해 Destructuring

eunji hwang·2020년 5월 14일
3

TYPESCRIPT

목록 보기
5/6

타입스크립트에서 구조분해에 대해 알아보자.

구조분해

배열

const input = [1,2];
const [first, second] = input;

first // 1
second // 2

--------------------------------------

const num = [1,2,3,4,5]

third = num[3]
fourth = num[4]

third // 3
fourth // 4

--------------------------------------

const [ ,a, ,c, ] = [11,22,33,44,55]

a // 22
c // 44

const [first] = [11,22,33,44,55]

first // 11

const [first, ...and] = [11,22,33,44,55]

first // 11
and // [22,33,44,55]

튜플

const tp: [number, string, boolean] = [7, 'hello', true];

const [a,b,c] = tp; // a=7, b=hello, c=true

const [a,b,c,d] = tp; // d에 위치할 4번째 값이 없음으로 오류!
const [a,b,c,...d] = tp; // 4번째 값이 없지만 나머지 값이 들어갈 수 있음으로 빈 튜플 들어간다.
const [a] = tp; // a=7
const [,b] = tp; // b=hello

객체

const obj = {
  a: 'string'
  b: 12,
  c: true 
}

const {a,b} = obj
a // 'string'
b // 12

const {a, ...etc} = obj
a // 'string'
etc // {b:12, c:true}
etc.b // 12
etc.c // true

프로퍼티이름 변경하기

const obj = {
  a: 'string'
  b: 12,
  c: true 
}

const {a : name1, b : name2} = obj;
// a 를 name1로 변경
// b 를 name2로 변경

// 구조분해와 함께 타입 지정하기
const {a:name1, b:name2}: {a:string, b:number} = obj;

기본 값

function obj(paramObj: {a:string,b?:number}) {
  const { a , b= 100} = paramObj;
}

매개변수로 객체인 paramObj를 받는다.
paramObj.a의 데이터 타입은 string,
paramObj.b의 데이터 타입은 number이다. ? 는 b의 값이 있을수도 없을수도 있단 말

함수선언

type C = {a:string, b?:number }

function func ({a, b}: C): void {
}

// 기본값 적용하기
function func ({a="", b=0} = {}): void {
}

처음 배열 구조분해보다 복잡시러워 졌다.. 단순한 형태일때만 써야겠다..

전개연산자

2차 배열일때...

profile
TIL 기록 블로그 :: 문제가 있는 글엔 댓글 부탁드려요!

0개의 댓글