yourfile.ts and all the existing code in it is still valid. Now we can start incrementally turning things into classes, and assigning types to arguments, and lo and behold, soon you’ll have a reasonably type-safe code base.
TL;DR; This article is an expanded description of the following commit.
add typescript support · coding-blocks-archives/Vue_Typescript_Todolist@54d8328
Contribute to Vue_Typescript_Todolist development by creating an account on GitHub.
When I started using Vue, the first thing I wanted to figure out was how to use Typescript here. Two very good resources — one by Vue and one by Typescript are of a lot of help, but won’t get to the end of the road. The Vue article does not tell you about the changes we need in webpack. The Microsoft repo needs changes in Vue core.
So let us explore who we can start adding TS support to Vue. (All this is done and saved on this repo . You an use the commit history as a reference to the steps mentioned here) Start with installing the dependencies —
yarn add typescript ts-loader
Then, we need to add a
Next, we need to add
ts-loaderin our webpack config.
Remember to add it right at the top of the rules, before other rules.
Also add ts to resolved extensions —
extensions: ['.js', '.vue', '.json', '.ts'],
To ensure that .vue components are treated as moduels, we need to do the following in the vue config file as well. So we need to add the
esModuleflag to it.
One of the gotchas of using Typescript in Vue is that the entry point HAS TO BE in typescript. Which means,
main.js must become
Basically just renaming should work, as ts is superset of js, but it will not understand component types. We can work that around using render functions. Below is the new
And finally we need to add a tiny shim to make sure tsc understands that all .vue modules are extended from the
Vue class. Add this as vue.d.ts to the
Now you can write any code you want in ts. For .vue components, to write script in Typescript, you need to use the script tag like this —
//You Typescript code guess here
Obligatory shameless self-plug :
I am one of the co-founders of Coding Blocks — A Software Programming bootcamp, based out of New Delhi, India. Among other things, we teach Full Stack Web Development using NodeJS, via both classroom programmes, as well as online classes. You can follow our Medium to find more articles on Android and Web development.