TypeScript(optional property)

Dev_Go·2022년 7월 11일
0

TypeScript Essentials

목록 보기
16/24
post-thumbnail

optional property


optional property는 필요한 property가 아니고 상황에 따라서 있을 수도 있고 없을 수도 있다.

?를 넣는 방법

interface Person2 {
  name: string;
  // name은 꼭 있어야되는 형태이지만 age는 있을 수도 있고
  // 없을 수도 있는 형태라면 ?를 뒤에 붙여주면 된다.
  age?: number;
}

function hello2(person: Person2): void {
  console.log(`안녕하세요 ${person.name} dlqslek.`);
}

hello2({ name: "Winnie", age: 20 });
hello2({ name: "Anna" });

인덱서블 타입 (Index Signatures(Indexable types))

객체, 배열과 같은 경우 속성이 많이 들어갈 경우 하나하나 타이핑을 해줄 수는 없는 경우도 있다. 또는 어떤 속성이 들어갈 지 확정지을 수 없는 경우도 있다. 이 경우에는 인덱서블 타입을 활용하는 것이 좋다.

[index]의 타입은 string과 number만 지정할 수 있다. 이는 생각해보면 당연한게 객체의 key는 문자만 되고(object.key), 배열은 인덱스(array[0])는 숫자이기 때문.

interface Person3 {
  name: string;
  age?: number;
  // 어떤 이름의 property가 와도 괜찮다.
  [index: string]: any;
}

function hello3(person: Person3): void {
  console.log(`안녕하세요 ${person.name} 입니다..`);
}

const p31: Person3 = {
  name: 'Winnie',
  age: 20,
};

const p32: Person3 = {
  name: 'Anna',
  systers: ['Sung', 'Chan']
};

const p33: Person3 = {
  name: 'Bokdaengi',
  father: p31,
  mother: p32,
}

hello3(p33);
profile
프론트엔드 4년차

0개의 댓글