Introduction to the Script Setup Syntax
While the evolution from Vue 3.1 to 3.2 was technically a minor version update, it comes with a major improvement in TypeScript experience. This new version of Vue promotes the Script Setup syntax, which was previously an experimental feature, and is now an officially supported one. With it, we have a simpler way to write components with the Composition API and a more elegant way of using TypeScript in our Vue apps.
This tutorial will focus on the TypeScript aspects of using the new Script Setup syntax. So to get the most out of this tutorial, make sure that you have a basic familiarity with TypeScript, the Composition API, and the Script Setup syntax. If you need a refresher on any of these, you can check out the official docs or the Vue Mastery courses on these subjects.
TypeScript with Script Setup
Although the Script Setup syntax is just syntactic sugar for the Composition API, it gives us highly useful features to use when working with props and emits in TypeScript. Since the Script Setup syntax is still just the Composition API under the hood, we will still be writing most of our TypeScript code the same way as with the
setup() function, such as creating
reactive, and functions. But the way that we’ll be using props and emit is very different in this new syntax.
So first, we’ll go through some TypeScript fundamentals for working with the Composition API, and then we’ll get into the new TypeScript features of the Script Setup syntax. The goal is to provide a well-rounded tour of the Vue-TypeScript combination that features the newest recommended practices.
Throughout the article, we’ll be covering the following topics:
- type inference
If you want to follow along with the code in this tutorial, you can create a new Vue TypeScript app using Vite. If you’re new to Vite, you can check out our course taught by its creator, Evan You.
npm init vite@latest my-app -- --template vue-ts cd my-app npm install npm run dev
As a newer alternative, you can also use the official scaffolding tool
npm init vue@latest
To opt-in to using the Script Setup syntax, you can simply just add the
setup attribute to the
You can opt-in this feature in any one of your components.
For the best IDE support, you can use VSCode with the Volar plugin. As an alternative, you can also use WebStorm, which comes with built-in support for Script Setup.
So when you put your mouse cursor on a variable, it will show you its type:
Then same when you do that in the
![Screen Shot 2021-09-11 at 4.45.17 AM.png](https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F4.opt.1637696562238.jpg?alt=media&token=ce644127-d301-4c0d-99ad-762621f47bbe) Now let’s begin our tour of the new Vue TypeScript experience. We’ll start with the most fundamental of all things: creating reactive variables.