- The Vue Instance
- Template Syntax
- Computed Properties and Watchers
- Class and Style Bindings
- Conditional Rendering
- List Rendering
- Event Handling
- Form Input Bindings
- Components Basics
- Component Registration
- Custom Events
- Dynamic & Async Components
- Handling Edge Cases
Transitions & Animation
- Enter/Leave & List Transitions
- State Transitions
Reusability & Composition
- Custom Directives
- Render Functions & JSX
- Single File Components
- TypeScript Support
- Production Deployment
- State Management
- Server-Side Rendering
- Reactivity in Depth
- Migration from Vue 1.x
- Migration from Vue Router 0.7.x
- Migration from Vuex 0.6.x to 1.0
- Migration to Vue 2.7
- Comparison with Other Frameworks
- Join the Vue.js Community!
- Meet the Team
Vue CLI provides built-in TypeScript tooling support.
A static type system can help prevent many potential runtime errors, especially as applications grow. That’s why Vue ships with official type declarations for TypeScript - not only in Vue core, but also for vue-router and vuex as well.
Since these are published on NPM, and the latest TypeScript knows how to resolve type declarations in NPM packages, this means when installed via NPM, you don’t need any additional tooling to use TypeScript with Vue.
Note that you have to include
strict: true (or at least
noImplicitThis: true which is a part of
strict flag) to leverage type checking of
this in component methods otherwise it is always treated as
See TypeScript compiler options docs for more details.
Vue CLI 3 can generate new projects that use TypeScript. To get started:
For developing Vue applications with TypeScript, we strongly recommend using Visual Studio Code, which provides great out-of-the-box support for TypeScript. If you are using single-file components (SFCs), get the awesome Vetur extension, which provides TypeScript inference inside SFCs and many other great features.
WebStorm also provides out-of-the-box support for both TypeScript and Vue.
To let TypeScript properly infer types inside Vue component options, you need to define components with
If you prefer a class-based API when declaring components, you can use the officially maintained vue-class-component decorator:
Plugins may add to Vue’s global/instance properties and component options. In these cases, type declarations are needed to make plugins compile in TypeScript. Fortunately, there’s a TypeScript feature to augment existing types called module augmentation.
For example, to declare an instance property
$myProperty with type
After including the above code as a declaration file (like
my-property.d.ts) in your project, you can use
$myProperty on a Vue instance.
You can also declare additional global properties and component options:
The above declarations allow the following code to be compiled:
Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of certain methods. For this reason, you may need to annotate the return type on methods like
render and those in
If you find type inference or member completion isn’t working, annotating certain methods may help address these problems. Using the
--noImplicitAny option will help find many of these unannotated methods.
If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems.