타입스크립트 - 객체 타입

Kaydenna92·2022년 11월 28일
0

typescript

목록 보기
3/4

1. 객체 타입

  • 객체는 프로퍼티를 가지는 자바스크립트 값
  • 객체 타입을 정의하려면, 해당 객체의 프로퍼티들과 각 프로퍼티의 타입들을 나열한다.

아래 함수에서, 매개변수는 x와 y라는 두개의 프로퍼티로 이루어진 타입으로 표기되고 있다.
두 값은 타입은 모두 number.
각 프로퍼티를 구분할때 ',' 또는 ';'을 사용할 수 있고 가장 마지막에 위치한 구분자의 표기는 선택사항.
각 프로퍼티의 타입 표기 또한 선택사항. 만약 타입을 지정하지 않는다면, 해당 프로퍼티는 any 타입으로 간주한다.

function printCoord(pt: { x: number; y: number }) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}

printCoord({ x: 3, y: 7 });

1-1. optional property

  • 객체 타입은 일부 또는 모든 프로퍼티의 타입을 선택적인 타입, 즉 옵셔널로 지정할 수 있다.
  • 옵셔널은 프로퍼티 이름 뒤에 '?'을 붙이면 된다.
  • 자바스크립트에서는 존재하지 않은 프로퍼티에 접근하였을 때, 런타임 오류가 발생하지 않고, undefined값을 얻게 된다.
  • 이 때문에 옵셔널 프로퍼티를 읽었을 때, 해당 값을 사용하기에 앞서 undefined인지 여부를 확인해야한다.
function printName(obj: { first: string; last?: string }) {
  // error: obj.last의 값이 제공되지 않으면 프로그램이 멈춘다.
  console.log(obj.last?.toUpperCase());

  if (obj.last !== undefined) {
    // OK
    console.log(obj.last.toUpperCase());
  }
  // 최신 JS 문법을 사용했을 때 또 다른 안전한 코드
  console.log(obj.last?.toUpperCase());
}

// 둘 다 ok.
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });

profile
persistently

0개의 댓글