[TS series ] TS 기본문법 #4

_sqrlkoo·2022년 12월 9일
0

TypeScript

목록 보기
4/12
post-thumbnail

Object

TS에서 객체형태 타입 지정하는 법

let printName: {first: string, last: string} = {
  fitst : "Koo",
  last : "jangwoo"
}
// 객체타입을 사용하는 변수

function printName (person: {first: string, last: string}): void {
  console.log(${person.first}, ${person.last})
}
// 함수 파라미터 타입 애너테이션을 작성하는 법

function coordinate(): {x: number, y: number} {
  return {x : Math.random(), y: Math.random()};
}
//객체 리터럴 형태의 반환 타입 애너테이션을 가지는 경우

초과된 객체 프로퍼티

만약, 객체 프로퍼티를 추가하면 어떻게 될까?

예를 들어, 다음의 함수가 있고

function printName (person: {first: string, last: string}): void {
  console.log(${person.first}, ${person.last})
}

함수를 호출할때 객체 프로퍼티를 추가하여 입력하면 어떻게 될까?

printName({first: "Mick", last : "Jagger", age: 432})

오류를 보인다. age라는 프로퍼티를 찾을 수 없다고 한다.

그럼 다음과 같이 작성하면 어떨까?

let person = {first: "Mick", last : "Jagger", age: 432, isAlive: true};

printName(person);

잘 나온다.

오류가 나지 않는다! 정말 희한하다!

찾아보니 TS초기부터 이래왔는데 일반적으로 여기 이 객체를 변수로 가지고 있다면 함수로 필요한 프로퍼티인 first와 last뿐만 아니라 age와 isAlive등도 가지고 있죠?

age와 isAlive는 사용하지 않는 프로퍼티이다.

이 객체를 전달하면 TS는 객체안의 first와 last만 확인한다.

직접 객체 리터럴을 작성했을 때 처럼 추가 확인은 하지 않는다!

필요한 프로퍼티가 전달되는지 아닌지만 확인하고 나머지는 그냥 같이 있는걸로 취급한다.

그래서 직접 객체 리터럴을 전달하는 경우에는 오류를 띄우겠지만 사전에 별도의 변수로 정의하는 과정을 거치면 지정된 프로퍼티 외에는 그냥 무시하게 된다!

++ 추가로

지정된 함수 안에 프로퍼티가 부족하면 어떨까?

오류가 납니다! 프로퍼티는 모두 들어가야 합니다!

0개의 댓글