# Vue + TS

###### tags: `냥하` `강의`

## vue + ts 환경설정
*TS는 이렇게 초기에 같이 설정한는 것을 추천
*config파일은 package.json내에서가 아닌 따로 관리하는 것이 확장성에 좋음.

### 클래스 문법을 권장하지 않는 이유
`vue.extend`문법 사용하기

### vuejs에서 타입스크립트를 적용하는 방법
1. 서비스를 처음 구축할 때부터 타입스크립트를 사용한다.
2. 기존에 이미 구현된 서비스에 타입스크립트를 점진적으로 사용한다.

## 첫 번째 프로젝트 요약 정리
1. 프로젝트 초기 셋팅 방법
2. 뷰 + 타입스크립트 프로젝트 기본 구조
3. 재활용성을 고려한 공통 컴포넌트 설계 방법(인풋, 목록아이템)
- 인풋 태그의 한글 입력 처리 방법
4. `.vue` 파일에서의 타입스크립트 정의 방식
- `data`: 초기화를 할 때, type을 주면 그 이후에 해당 타입에서 벗어났을 때 오류가 나옴
- `methods`: 매서드의 반환타입정의, parameter의 타입 정의하기
- `props`: props validation
- `computed`: 매서드와 다르게 꼭 반환타입을 정의해줘야함.
5. 타입스크립트를 사용했을때의 이점
- 의도하지 않은 동작에 대한 예방(주의)
- 타입추론

## js프로젝트에 ts입히기
**방법#1**: `vue add typescript` -> 비추천
**방법#2**: 새로 프로젝트 생성해서 .js -> 점진적으로 바꾸기
- 뷰 프로젝트에 타입 스크립트를 점직적으로 적용하는 방법
1. vue +Ts 프로젝트 생성
2. 기존 서비스 코드와 라이브러리를 새 프로젝트에 이동
3. 기본적인 빌드에러 해결
4. 타입스크립트의 혜택을 볼 수 있는 주요 파일들을 위주로 .js -> .ts로 변환하며 적용

🚀 tip: 타입 체킹 정도는 덜 엄격한 방식에서 점점 엄격한 방식으로 적용하는 것을 추천

    "strict": false,
    "noImplicitAny": true,
    "allowJs": true,

점진적으로 ts의 장점을 맛볼수있는 방향으로 전환시키며 `strict`를 `true`로 바꿔보기

## 점진적인 타입스크립트 적용 방식 2단계 - 컴포넌트, API함수
- 스토어를 무지성으로 쓰지 않기
- 스토어, mixin에 다때려박게되면 데이터의 흐름을 파악할 수 없게됨.
- 한 번만 불러오고 땡인경우는 굳이 스토어를 사용할 필요가 없음

props를 넘겨줄때는 props쪽에서 먼저 정의를 하고 넘어오기
store에서 넣어줄 때 자동완성 되는 기능을 활용하기 위함임

제네릭 [공식문서](https://joshua1988.github.io/ts/guide/generics.html)
타입을 마치 함수의 파라미터처럼 사용하는 것
중복된 타입정의를 막을 수 있는 것이 가장 큰 장점