Section 1: Setup

Prerequisites

Vue + TypeScript Starter Kits

# 1. Install Vue CLI, if it's not already installednpm install --global @vue/cli# 2. Create a new project, then choose the "Manually select features" optionvue create<my-project-name>

npm init vite-app<project-name>cd<project-name>npm installnpm run dev

Section 2: Getting Started

Recommendedts.config setup

// tsconfig.json{"compilerOptions": {"target":"esnext","module":"esnext","strict":true,"moduleResolution":"node"    }}

Usage in.vue files

<scriptlang='ts'>...</script>

<scriptlang="ts">import Vue from "vue";export default Vue.extend({// type inference enabledname:"HelloWorld",props:{msg:String}});</script>

import{defineComponent}from'vue';constComponent=defineComponent({// type inference enabled});

Props

import Vue, { PropType } from 'vue'<script lang="ts">importVuefrom"vue";interfacePersonInfo {  firstName:string,  surname:string,  age:number}exportdefaultVue.extend({  name:"InfoCard",  props: {    info: {      type:ObjectasPropType<PersonInfo>,      required:true    }  }});</script>

import Vue from 'vue'<script lang="ts">importVuefrom"vue";interfacePersonInfo {  firstName:string,  surname:string,  age:number}exportdefaultVue.extend({  name:"InfoCard",  props: {    info: {      type:Objectas ()=>PersonInfo,      required:true    }  }});</script>

Data Properties (Options API)

interfacePost{title:string;contents:string;likes:number;}exportdefaultVue.extend({data():{newPost:Post}{return{newPost:{title:"",contents:"",likes:0}};}});

interfacePost{title:string;contents:string;likes:number;}exportdefaultVue.extend({data(){return{newPost:{title:"",contents:"",likes:0}asPost// ❌ Avoid doing this};}});

Computed Properties (Options API)

exportdefaultVue.extend({data(){return{name:'World',}},computed:{greet():string{//👈 Remember to annotate your computed properties like so.return'Hello '+this.name},}})

Other Vue + TypeScript resources