[TS] Syntax | 02. 객체 타입 명시하기

2024. 6. 24. 22:19·Language/TypeScript

객체의 타입은 각 property의 타입을 정의함으로서 나타낼 수 있습니다.

let product: {
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean;
  sizes: string[];
}

위 객체에서 membersOnly와 같이 물음표(?)를 붙이면 optional property가 됩니다.

Optional property는 인스턴스를 생성할 때 선언하지 않아도 되는 property입니다.

 

특정 property의 이름이나 개수를 지정하기 어려울 때는 다음과 같이 나타낼 수도 있습니다.

let stock: {
  [id: string]: number;
} = {
  c001: 3,
  c002: 0,
  c003: 1,
  // property의 개수와 이름에 제한이 없습니다.
}

 

property의 타입을 지정하기 어려울 때도 있는데, 이 때는 객체에 any 타입을 사용합니다.

대표적인 예로 JSON구문을 파싱하는 json.parse( ) 함수가 있습니다.

단, 이는 타입을 명시하지 않는 표기와 같기 때문에 가능하면 지양해야 하는 방법입니다.

// JSON의 파싱결과 어떤 자료형이 나올지 알 수 없습니다.
const parsedProduct:any = JSON.parse('{ "name": "bag", "price": 12000 }');

// any 대신 property의 타입을 미리 명시합니다.
const paredProduct: {
  name. string;
  price: number;
} = JSON.parse('{ "name": "bag", "price": 12000 }');

// as를 사용해 다음과 같이 나타낼 수도 있습니다.
const paredProduct = JSON.parse('{ "name": "bag", "price": 12000 }') as {
  name. string;
  price: number;
}
728x90

'Language > TypeScript' 카테고리의 다른 글

[TS] type | 01. 열거형(enum)  (0) 2024.06.28
[TS] Syntax | 03. 함수 타입 명시하기  (0) 2024.06.24
[TS] Syntax | 01. 변수 타입 명시하기  (0) 2024.06.24
[TS] TSC에 대해서  (0) 2024.06.24
[TS] TypeScript 프로젝트 시작하기  (0) 2024.06.24
'Language/TypeScript' 카테고리의 다른 글
  • [TS] type | 01. 열거형(enum)
  • [TS] Syntax | 03. 함수 타입 명시하기
  • [TS] Syntax | 01. 변수 타입 명시하기
  • [TS] TSC에 대해서
Rayi
Rayi
  • Rayi
    아카이브
    Rayi
  • 전체
    오늘
    어제
    • 분류 전체보기 (262)
      • CS (40)
        • ML (3)
        • CV (2)
        • PS (34)
      • Reveiw (17)
        • Paper (17)
        • Github (0)
      • Pytorch (5)
      • Language (58)
        • Python (7)
        • JavaScript (32)
        • TypeScript (16)
        • C++ (3)
      • IDE (12)
      • Git (13)
      • Frontend (71)
        • React (8)
        • SolidJS (20)
        • CSS (12)
      • UI (3)
      • Backend (15)
        • DB (17)
        • Node.js (11)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    nodejs
    CV
    react
    python
    C++
    API
    deploy
    GAN
    review
    vscode
    mongo
    ML
    ts
    js
    PyTorch
    CS
    CSS
    Git
    postgresql
    PRISMA
    DB
    backend
    SOLID
    Express
    frontend
    Three
    html
    ps
    figma
    UI
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.5
Rayi
[TS] Syntax | 02. 객체 타입 명시하기
상단으로

티스토리툴바