6. 점진적인 타입스크립트 적용 방식 2단계 - 컴포넌트, API 함수

tags: 지호, Vue.js + TypeScript 완벽 가이드

---

1. 스토어 상태 관리

타입스크립트 장점

• api 호출
• 데이터 스펙 정의

스토어를 쓰지 않아도 되는 상황

• 데이터를 받아와서 하위 컴포넌트 하나에 넘겨주는 간단한 상황

2. API 파일에 타입스크립트 적용 및 호출 로직 구현

컴파일했을 때 화면에서 오류화면 안 보이게 하기

module.exports = {
  devServer: {
    overlay: false,
  },
};

3. API 함수 타입 정의

서버에서 주고 받을 데이터 타입 미리 정의

src/api/index.ts

src/api/index-instance.ts

제네릭: https://joshua1988.github.io/ts/guide/generics.html

4. props 속성 타입 정의

api 파일에서 정의한 타입을 import하여 사용

src/components/ListItem.vue