[TypeScript] 객체

🎯 객체

const user = {
  name: "KJY",
  age: 26
}

• TypeScript에서 객체(Object)는 JavaScript와 마찬가지로 key-value 쌍으로 이루어진 데이터 구조
• TypeScript에서는 아래의 객체 리터럴 방식으로 구현 가능

✅ 객체 리터럴

const user: {name: string, age: number} = {
  name: "KJY",
  age: 26
}

• user은 객체
• 해당 객체는 두 속성인 name과 age를 가지고 있음
• TypeScript에서는 이 속성들의 이름과 타입을 명시적으로 정의할 수 있게 해줌
• 이 때 아래의 코드 부분을 구조적 타입 시스템이라고 함
• property 기반 타입 시스템이라고 부르기도 함

const user: {name: string, age: number} = ...

---

🎯 readonly

✅ 정의

readonly는 객체의 property나 배열 요소를 수정하지 못하게 제한

✅ 사용 예시

let config: {
  readonly apiKey: string;
  api: string;
} = {
  apiKey: "MY_API_KEY",
  api: "https://api.example.com",
};

config.api = "https://api.newExample.com"; // 가능
config.apiKey = "NEW_API_KEY";; // 불가능

• 현재 config 객체에 apiKey라는 property가 readonly 속성이 설정돼있음
• 그래서 읽기 전용이기에 값을 바꾸지 못함
• readonly 속성이 아닌 api는 변경 가능
• 만일 강제로 apiKey를 변경하려고 하면 아래의 에러가 발생
  

---

🎯 타입 별칭

✅ 정의

• type 키워드를 사용하여 복잡하거나 반복되는 타입에 이름을 붙여주는 문법
• 이를 통해 가독성 향상, 재사용성 증가, 유지보수 용이한 코드 작성 가능

✅ 사용 예시

type User = {
  name: string;
  age: number;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
};

let user: User = {
  name: "홍길동",
  age: 26,
  nickname: "gildong",
  birth: "2000-01-01",
  bio: "안녕하세요, 홍길동입니다.",
  location: "서울",
};

• User는 객체 타입에 붙인 타입 별칭
• 이 타입을 사용하면 User 타입이 필요한 여러 곳에서 재사용 가능
• 타입이 변경될 경우, User 정의만 수정하면 전체 코드에 반영 ➡️ 유지보수성 매우 높아짐

---

🎯 인덱스 시그니처

✅ 정의

객체의 key-value 쌍의 타입 규칙을 정의할 수 있는 문법으로, 정해지지 않은 여러 속성을 갖는 객체를 다룰 때 유용

✅ 사용 예시

type CountryCodes = {
  [key: string]: string;
};

let countryCodes: CountryCodes = {
  Korea: "KR",
  UnitedState: "US",
  UnitedKingdom: "UK",
};

• key는 string 타입이어야 하며, 값(value) 역시 string 타입
• 따라서 Korea나 UnitedState 같은 모든 속성의 key는 문자열이어야 하며, 그에 대응하는 값도 문자열이어야 함.
• 동적으로 속성이 바뀔 수 있는 객첼르 다룰 때 유용

⚠️ 주의할 점

• 만약 countryCodes 객체에 아무 값도 없어도 [key: string]: string; 이 규칙을 위반하지만 않으면 모든 객체를 허용(아무런 프로퍼티가 없으니)
• 반드시 인덱스 시그니처의 Value의 타입과 일치하거나 호환해야 함

---

출처

https://www.inflearn.com/course/한입-크기-타입스크립트/dashboard