다음 프로젝트에서 Vue에 TypeScript를 적용할 수 있는지 문의를 받아 공부를 시작했습니다. 공식 문서를 보니 설정이 어렵지 않아서 바로 적용해 봤습니다.

Vue도 Node.js가 설치되어 있어야 합니다. 아직 설치하지 않았다면 React 개발 환경 설정 글의 Node.js와 yarn 설치 부분을 먼저 진행해 주세요.

터미널(Windows는 PowerShell)을 열고

$ npm install -g @vue/cli

만약에 맥유저분들은 위에 명령어가 위에 이미지처럼 나오는경우 sudo를 앞에 추가해주세요
그 후 패스워드 입력창에 노트북 비밀번호를 입력하고
비밀번호가 노출되지않아도 입력되는중이니 놀라지말고 Enter를 눌러주세용

$ sudo npm install -g @vue/cli

Vue CLI를 전역으로 설치한 뒤 Vue 3 버전으로 프로젝트를 생성합니다. (Vue 3가 기본 버전이 되어 Vue 3 기준으로 작성했습니다.)

$ vue create 프로젝트명

프로젝트를 생성한 뒤 yarn을 쓴다면 yarn serve, npm을 쓴다면 npm run serve로 실행합니다.

$ vue add typescript

위 명령어를 실행하면 TypeScript를 설치해 사용할 수 있습니다.