# \[S5] 객체 타입

TS는 객체의 형태를 설명하는 애너테이션을 만들 수 있다.

매개변수나, 반환 타입에 설정 가능

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

printName({ first: "hh", last: "aaaaa" });
```

#### 초과 프로퍼티

```tsx
// 초과 프로퍼티
// 아래와 같이 지정되지 않은 인자를 추가하면 에러가 발생함.
printName({ first: "Mike", last: "Jagger", age: 476 });

// 하지만 변수에 설정한 후 호출하면 에러가 사라짐
const sig = { first: "Mike", last: "Jagger", age: 476, isAlive: true }
printName(sig) 
// 필요한 것만 전달하고 나머지는 전달하지 않음
```

#### Type Alias 타입 별칭

타입을 재사용하고 이름을 지정하는 방법

여러 프로퍼티를 가지는 객체 타입에 작업

```tsx
// 타입 별칭, 반복되어 재사용 가능한 타입을 지정함
type Point = {
  x: number;
  y: number;
};

let coordinate: Point = { x: 34, y: 2 };

function randomCoorinate(): Point {
  return { x: Math.random(), y: Math.random() };
}

function doublePoint(point: Point): Point {
  return { x: point.x * 2, y: point.y * 2 };
}

// 원시 타입도 가능
type MyNum = number
```

#### 중첩 객체

중첩되는 객체도 타입 설정이 가능하다.

```tsx
// 중첩 객체
type Song = {
  title: string;
  artist: string;
  numStreams: number;
  credits: { producer: string; writer: string };
};

function calculatePayout(song: Song): number {
  return song.numStreams * 0.0033;
}

function printSong(song: Song) {
  console.log(`${song.title} - ${song.artist}`);
}

const mySong: Song = {
  title: "나는요",
  artist: "IU",
  numStreams: 151351351,
  credits: {
    producer: "IUA",
    writer: "IUB",
  },
};
```

#### 선택적 프로퍼티

프로퍼티를 필수가 아닌 선택으로 설정할 수 있다.

```tsx
// 선택적 프로퍼티
type Point = {
  x: number;
  y: number;
  z?: number;
};

const myPoint: Point = { x: 1, y: 3 };
```

#### readonly

TS 에서 객체의 프로퍼티를 변경되지 않는 읽기전용으로 설정함

```tsx
// Readonly
type User = {
    readonly id: number;
    username: string
}

const user: User = {
    id: 12356,
    username: "cotman"
}

console.log(user.id)
user.id = 235235
```

원시값의경우만 변경 불가능, 객체와 배열은 변경 가능함

#### 교차 타입

여러 타입을 결합해 새로운 타입을 만들 수 있음

```tsx
// 교차 타입
type Circle = {
  radius: number;
};

type Colorful = {
  color: string;
};

type ColorfulCircle = Circle & Colorful;

const happyFace: ColorfulCircle = {
  radius: 4,
  color: "Yellow",
};

type Cat = {
  numLives: number;
};

type Dog = {
  breed: string;
};

type CatDog = Cat & Dog & { age: number };

const christy: CatDog = {
  numLives: 7,
  breed: "Husky",
  age: 33,
};
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://onemorebottlees-organization.gitbook.io/onemorebottlees-til/lecture/udemy/typescript-with-webpack-and-react/s5.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.