[typescript] 타입스크립트와 Vue 라우터 연동하기

15 Dec 2023

typescript

타입스크립트(TypeScript)는 JavaScript의 상위 집합으로 정적 형식 체크를 제공하는 프로그래밍 언어입니다. Vue.js는 사용자 인터페이스를 구축하기 위한 프로그레시브 프레임워크로, 라우팅(Routing)을 위한 Vue 라우터(Vue Router)를 제공합니다. 이번 글에서는 타입스크립트와 Vue 라우터를 연동하는 방법에 대해 살펴보겠습니다.

프로젝트 설정

우선, 타입스크립트를 사용하여 Vue 프로젝트를 생성합니다.

vue create my-vue-project --default

프로젝트를 생성한 후에 타입스크립트를 프로젝트에 추가합니다.

vue add @vue/typescript

Vue Router 설정

다음으로, Vue Router를 설치합니다.

npm install vue-router

Vue Router를 사용하여 라우팅을 구현할 때, 타입스크립트에서 Vue Router를 사용하는 방법을 알아보겠습니다.

타입 정의

타입 정의를 위해 router.d.ts 파일을 생성하고 다음 코드를 추가합니다.

import Vue from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';

declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter;
    $route: Route;
  }
}

라우트 정의

라우트 정의를 위해 다음과 같이 routes.ts 파일을 생성하고 라우트를 정의합니다.

import { RouteConfig } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  },
];

export default routes;

라우터 설정

마지막으로, 라우터를 설정합니다.

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

뷰 앱에 적용

마지막으로, 라우터를 뷰 앱에 적용합니다.

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

이제 타입스크립트와 Vue 라우터가 성공적으로 연동되어 있습니다. 이를 통해 타입스크립트를 사용하여 Vue 앱의 라우팅을 보다 안전하게 구현할 수 있습니다.

더 많은 정보를 원하시면 Vue Router 공식 문서를 참고하시기 바랍니다.