[TS]Object

✅ TypeScript의 객체

TS에서의 객체는 JS와 똑같이 표현된다. 

const dpg = {
  name: 'Elton',  
  breed: "Australian Shpherd",
  age: 0.5
}

타입 추론에 의해 name과 breed는 string, age는 number로 할당된다. 

함수에서 매개변수로 객체를 받는다면 어떻게될까? 직접해보자.

const printName = (name: { first: string; last: string }): void => {
  console.log(`${name.first} ${name.last}`);
};

printName이라는 함수에 name객체를 파라미터로 받고 있다. name 파라미터의 키로 first, last가 오며 type은 string이다.

 

파라미터를 살펴보면 객체의 형태를 알 수 있다. 

printName을 호출하기 위해 인자를 주입할 때 작성한 함수에 올바른 인자를 주입하지 않으면 에러를 반환하는 것을 알 수 있다. 

 

"인자 타입 {}은 파라미터 타입으로 지정되어 있는  '{first: string; last: string;}' 에 할당할 수 없다. first와 last를 적어라." 라며 친절하게 설명해준다. 

const printName = (name: { first: string; last: string }): void => {
  console.log(`${name.first} ${name.last}`); // kim jeongmin
};
printName({ first: "kim", last: "jeongmin" });

void 반환 타입 Annotation을 적어주었다. 자동으로 추론된다고 해도 Annotation을 적어주는게 좋다.

//				      객체의 타입         =      실제 값
let coordinate: { x: number; y: number } = { x: 32, y: 6 };

변수에 객체를 할당해준 모습이다. 

function randomCoordinate(): { x: number; y: number } {
  return { x: Math.random(), y: Math.random() };
}

객체 리터럴 형태의 반환 타입 Annotation을 가지는 함수이다. 

printName의 인자를 할당하는 과정에서 객체에 프로퍼티를 직접 추가했을 경우 에러가 발생했고, student라는 변수에 담아서 할당했을 경우 에러가 발생하지 않았다. student 객체를 전달하면 TS는 객체 안에 first, last가 있는지만 검사한다. 하지만 객체 리터럴을 직접 작성할 경우 오류를 발생시킨다. 즉, 사전에 별도의 변수를 정의하는 과정을 거치면 지정된 프로퍼티 외에는 타입 검사를 무시한다.