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

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

---

## 1. 스토어 상태 관리

타입스크립트 장점
- api 호출
- 데이터 스펙 정의

스토어를 쓰지 않아도 되는 상황
- 데이터를 받아와서 하위 컴포넌트 하나에 넘겨주는 간단한 상황

<br/>

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

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

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


<br/>

## 3. API 함수 타입 정의

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

src/api/index.ts


src/api/index-instance.ts


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

<br/>

## 4. props 속성 타입 정의

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

src/components/ListItem.vue


<br/>