vue2 프로젝트에서 vite 로 바꾸고, vue3 로 마이그레이션 까지 한 상태에서 typescript를 적용하기 위한 그 과정들을 적어봤습니다.
보통 vue 프로젝트 생성 시 초기 설정에서 ts 를 선택할 수 있어서 큰 어려움이 없을겁니다.
기본 베이스가 js 인 프로젝트에서 ts 를 설치하여 js와 함께 통합하여 쓸 수 있게 설정하기 위해 공식홈페이지, 블로그 등을 찾아보며 공부해봤습니다.
🁢 Typescript install & 컴파일 설정
npm install typescript
yarn add typescript
package.json 에 설치된 모습
npm install --save @types/node
yarn add @types/node
package.json 에 설치된 모습
npm install @vue/tsconfig
yarn add @vue/tsconfig
package.json 에 설치된 모습
vite 홈페이지에 들어가면
vue-ts 로 되어있는 Vite를 구성하기 위해 필요한 설정들을 브라우저에서 직접 실행할 수 있는 데모 레포가 나옵니다.
참고해서 작성해보면 됩니다.
https://stackblitz.com/edit/vitejs-vite-q5xzkpvt?file=index.html&terminal=dev
Vitejs - Vite (forked) - StackBlitz
Next generation frontend tooling. It's fast!
stackblitz.com
아래와 같이 tsconfig.app.json, tsconfig.json, tsconfig.node.json 파일 3개가 설정되어 있습니다.
vite 에서 typescript 프로젝트를 생성하면 tsconfig 파일을 세 가지로 나누어서 생성해주는데요. 이 이유는 프로젝트 환경에 따른 타입스크립트 설정을 분리하여 더 유연하게 관리하기 위함이라고 하네요. (Vite는 빌드와 배포 환경을 분리해 유연함을 가지면서도, 빠른 환경을 만들기 위해 이런 구조를 채택.) 해당 내용에 대해 상세하게 정리해주신 분의 글이 있어 링크 남깁니다
똑같이 파일을 생성해주고, 각각 코드를 참고해서 작성해줍니다.
🁢 tsconfig.json
{
"files": [],
"references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
}- references 설정
tsconfig.app.json 과 tsconfig.node.json 을 참조하고 있음을 나타냅니다. 이를 통해 모듈 간의 관계를 명확하게 설정할 수 있습니다.
🁢 tsconfig.app.json
주로 브라우저와 관련된 옵션을 포함합니다.
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"compilerOptions": {
"composite": true,
"allowJs": true,
"checkJs": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.vue"]
}
- 현재 모든 파일이 js 되어 있기 때문에 js 파일들 Import 해서 쓸 수 있게 하는 옵션을 true 로 설정 해줍니다. "allowJs": true
- "checkJs": true : 일반 js 파일에서도 에러체크 여부
타입스크립트 컴파일 옵션 상세 참고 : https://www.typescriptlang.org/tsconfig/
🁢 tsconfig.node.json
Node.js 환경을 대상으로 하는 Typescript 프로젝트에서 추가적인 컴파일 옵션을 설정하기 위해 사용됩니다.
Node.js 특정 기능이나 모듈 시스템과 관련된 설정을 담고 있으며, 주로 Node.js 서버 애플리케이션 또는 Node.js 기반의 라이브러리 개발 시에 사용됩니다.
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
🁢 main.js -> main.ts 로 변경
index.html 에 main.ts 로 수정.
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script> 👈 update!
</body>
🁢 Typescript test
.vue 파일에서 ts 를 적용해보았습니다.
<script lang="ts" setup>
import { useAuthStore } from '@/stores'; 👈 js 파일 허용
const authStore = useAuthStore();
const isManager: Boolean = authStore.tokenPayload().type ~~~ // 👈 type 지정
</script>
js 파일과 type 지정까지 잘되는거 확인했습니다.
앞으로 차차 모든 파일을 ts 로 리팩토링 하는것만 남았네요...!
출처:
https://codingapple.com/unit/typescript-tsconfig-json/
https://stackblitz.com/edit/vitejs-vite-q5xzkpvt?file=src%2FApp.vue,tsconfig.node.json&terminal=dev
'Vue.js' 카테고리의 다른 글
| Vuex -> Pinia migration + 로그인 상태 유지 및 authStore (0) | 2025.01.09 |
|---|---|
| [Vue.js] Vue3 환경에서 Storybook 설치 및 Pagination 공통 컴포넌트 적용기 (0) | 2024.12.18 |
| [Vue.js] Vue2 탈출기: Vue3 마이그레이션 가이드 (1) | 2024.12.18 |
| [Vue.js] Vue2 프로젝트, Webpack에서 Vite로 마이그레이션하기! (0) | 2024.07.31 |
| [Vue.js] Vue 프로젝트, ESLint, Prettier (+typescript) 설정하기! (1) | 2024.06.16 |
