[TypeScript] 뷰 프로젝트에 TypeScript를 설치 및 적용하는 방법

 

 

 

오늘은 뷰 프로젝트에 TypeScript를 설치하고 적용해보자. ( 귀찮아서 프리티어랑 린트 적용한 프로젝트에서 진행.. )

 

사전준비물을 VSCode와 Vue프로젝트이다. (나는 Vue3..)

기존에 만들어진 Vue프로젝트에 Typescript을 설치할 거다. 그럼 하나하나 따라가보자.

 

 

TypeScript 및 관련 패키지 설치

 

1) Typescript 설치

vue add typescript

 

 

2)  ts-loader 설치

npm i ts-loader

 

ts-loader는 .ts로 작성 된 파일을 웹브라우저에서 읽을 수 있는 javascript코드로 변환해주는 작업을 해주고, 빌드시 타입검사를 해준다.

 

 

3) tsc-watch 설치

npm add tsc-watch

 

tsc-watch는 .ts파일을 감시하고 있다가 변경사항이 생기면 바로바로 컴파일한 .

js를 사용자가 설정한 경로에 떨어뜨려준다.

- 보통 빌드하기전에 웹서버에서 소스코드를 확인하고 싶을 때 사용함.
- 물론 사용자가 직업 명령어를 입력해서 컴파일 해도 되지만, 이 친구는 자동으로 해주기 때문에 편함

 

이렇게 하면 Vue에서 Typescript를 사용할 수 있다.

 

 

Vue파일에서 TypeScript 테스트

 

 

샘플코드

<script lang="ts"> // lang="ts" 속성 추가

import { defineComponent } from 'vue';

export default defineComponent({
    name: 'sample-component',
    data() {
        return {
            msg: 'Hello'
        };
    },
    computed: {
        greet(): string { // greet함수는 리턴값이 string임
            return this.msg + ' world';
        }
    }
});
</script>

<template>
    <div>
        {{ greet }}
    </div>
</template>

 

구동결과

 

 

.ts에 대한 정리는 다음에 해야겠다. 설정파일까지 설명하려면 너무 길어 질 거 같다..