Vue 3.0에서 타입스크립트 사용하기

 

타입스크립트는 정적 타입을 지원하여 개발자가 더욱 안정적이고 예측 가능한 코드를 작성할 수 있게 도와줍니다. Vue 3.0은 기본적으로 타입스크립트를 지원하므로, 이제는 더욱 간편하게 타입스크립트를 사용할 수 있습니다.

 

1. 프로젝트 설정
   Vue CLI를 사용하여 Vue 3.0 프로젝트를 생성합니다. 터미널에서 다음 명령어를 실행하세요:
   

vue create my-vue-app

   생성된 프로젝트 폴더로 이동한 후, 타입스크립트 옵션을 선택합니다. 이후 필요한 설정을 입력하면 타입스크립트가 자동으로 프로젝트에 추가됩니다.

2. 컴포넌트 작성
   타입스크립트로 작성된 Vue 컴포넌트를 생성해보겠습니다. `HelloWorld.vue` 파일을 생성하고 다음과 같이 작성합니다:

   <template>
     <div>
       <h1>{{ greeting }}</h1>
       <button @click="incrementCount">Click me!</button>
     </div>
   </template>

   <script lang="ts">
   import { defineComponent, ref } from 'vue';

   export default defineComponent({
     name: 'HelloWorld',
     props: {
       msg: {
         type: String,
         required: true,
       },
     },
     setup(props) {
       const count = ref(0);

       const incrementCount = () => {
         count.value++;
       };

       return {
         greeting: `Hello, ${props.msg}!`,
         count,
         incrementCount,
       };
     },
   });
   </script>

   위 예제에서는 `defineComponent` 함수를 사용하여 컴포넌트를 정의하고, `props`로 `msg`를 받아오고 있습니다. `setup` 함수 내에서 `ref`를 사용하여 `count` 변수를 정의하고, `incrementCount` 함수를 작성하였습니다.

3. 타입 정의
   타입스크립트를 사용하면 타입을 명시적으로 지정하여 코드의 가독성과 안정성을 높일 수 있습니다. `HelloWorld.vue` 파일과 같은 디렉토리에 `types.d.ts` 파일을 생성하고 다음과 같이 작성합니다:

   declare module '*.vue' {
     import { DefineComponent } from 'vue';
     const component: DefineComponent<{}, {}, any>;
     export default component;
   }

   위 예제에서는 Vue 컴포넌트를 정의한 `DefineComponent` 타입을 전역으로 사용할 수 있도록 설정하였습니다.

4. 메인 애플리케이션
   생성된 Vue 3.0 애플리케이션의 `main.ts` 파일에서 `HelloWorld` 컴포넌트를 사용해보겠습니다.

   import { createApp } from 'vue';
   import App from './App.vue';
   import HelloWorld from './components/HelloWorld.vue';

   createApp(App)
     .component('HelloWorld', HelloWorld)
     .mount('#app');

   위 예제에서는 `createApp` 함수를 사용하여 애플리케이션을 생성하고, `component` 함수를 사용하여 `HelloWorld` 컴포넌트를 전역으로 등록하였습니다.

5. 타입 체크 및 사용
   이제 타입 체크가 적용된 컴포넌트를 사용해보겠습니다.

   <template>
     <div>
       <HelloWorld msg="Vue 3.0 with TypeScript" />
     </div>
   </template>

   <script lang="ts">
   import { defineComponent } from 'vue';
   import HelloWorld from './components/HelloWorld.vue';

   export default defineComponent({
     name: 'App',
     components: {
       HelloWorld,
     },
   });
   </script>

   위 예제에서는 `HelloWorld` 컴포넌트를 `App.vue` 파일에서 사용하고 있습니다. `msg` prop에는 문자열 "Vue 3.0 with TypeScript"을 전달하고 있습니다.

6. 실행 및 확인
   이제 프로젝트를 실행하여 결과를 확인해보겠습니다. 터미널에서 다음 명령어를 실행하세요:

   npm run serve

  

   브라우저에서 `http://localhost:8080`으로 접속하면 페이지가 표시됩니다. "Hello, Vue 3.0 with TypeScript!"이라는 메시지와 "Click me!" 버튼이 표시되며, 버튼을 클릭할 때마다 카운트가 증가합니다.

   이처럼 Vue 3.0에서 타입스크립트를 사용하면 컴포넌트의 타입이 명확하게 지정되어 코드 작성에 도움이 됩니다. 타입스크립트의 장점을 활용하여 더욱 안정적이고 확장 가능한 Vue 애플리케이션을 개발할 수 있습니다.