Vue+TypeScript Cheatsheets

Cheatsheets for experienced Vue developers getting started with TypeScript

• Vue 3 specifics

Section 1: Setup

Prerequisites

1. A good understanding of Vue.js
2. Read the TypeScript support section in the Vue docs 2.x | 3.x

Vue + TypeScript Starter Kits

1. Using the Vue CLI , you can select the TypeScript plugin to be setup in a new a Vue project.

# 1. Install Vue CLI, if it's not already installed
npm install --global @vue/cli

# 2. Create a new project, then choose the "Manually select features" option
vue create <my-project-name>

2. Vite is a new build tool by Evan You. It currently only works with Vue 3.x but supports TypeScript out-of-the-box.

⚠ Currently in beta. Do not use in production.

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

Section 2: Getting Started

Recommended ts.config setup

note: strict:true stricter inference for data properties on this. If you do not use it, this will always be treated as any

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

Usage in .vue files

Add lang="ts" to the script tag to declare TS as the lang used.

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

In Vue 2.x you need to define components with Vue.component or Vue.extend:

<script lang="ts">
import Vue from "vue";

export default Vue.extend({

  // type inference enabled
  name: "HelloWorld",
  props: {
    msg: String
  }
});
</script>

In Vue 3.x you can use defineComponent to get type inference in Vue component options

import { defineComponent } from 'vue';

const Component = defineComponent({
    // type inference enabled
});

Other Vue + TypeScript resources

• Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/