How to add Typescript to a Nativescript-Vue project?

Update (30-Jan-2019): Good news - I think they are adding out-of-the-box support for Typescript with the template in this PR.

So from now on we should be able to choose Typescript as the language option when bootstrapping the project with the template.

I had encountered the same problem and here is what I did to add TypeScript to my Nativescript-Vue project. (I do not have enough reputation to add a comment so I have to post this as an answer)

1. Create the project with vue init nativescript-vue/vue-cli-template <project-name>
   • There is a warning about webpack.config.js during the project creation and I was asked to run ./node_modules/.bin/update-ns-webpack --configs
   • Vue Devtools does not work with tns preview so I had disabled it as well
2. Add the following:
   • Install typescript and vue as devDependencies
   • Rename app/main.js to app/main.ts
   • In app/main.ts, change import App from './components/App' to import App from './components/App.vue'
   • Add tsconfig.json (copied from this stater project AND commented out "strict": true,)
   • In webpack.config.js, add 'vue$': 'nativescript-vue' under alias and exclude: /node_modules|vue\/src/, under module.rules (to the one for ts - details here)
   • As you has mentioned in your step 3 and 4, I had also created the env.d.ts and shims.vue.d.ts under types/ folder accordingly (Note that in the tsconfig.json file I copied, it had defined "typeRoots": ["types"])
3. I had tested it with tns preview --bundle
   • The app is running fine on my android phone (no errors, changes can be seen on the phone)
   • if necessary, I can test that if it would work with the command tns run android --bundle

Hope the above can help.

Version

Versions used are as follow:

• Nativescript CLI: 5.1.0
• nativescript-vue: 2.0.2
• webpack: 4.28.3

Reference

1. This is the git commit I did in order to add TypeScript to the project.
2. The official blog post about adding TypeScript to nativescript-vue - It was very helpful but unfortunately it did not work immediately after following those steps (maybe because I had used a different vue-init template)
3. And of course kudos to the detailed steps listed in this stack overflow question which had given me the direction to fix my project :-)

There is also now a Vue CLI 3 plugin for Nativescript-Vue that will scaffold out an entire project in Javascript or Typescript and then utilize the Vue CLI 3 infrastructure to help you. Disclaimer: I'm the primary contributor to the current state of the plugin.

It also includes the ability to have code sharing between web and native projects or you can proceed with just a native only project.

You can utilize the CLI 3 UI experience or use the terminal. Either way, you can do the following:

1. Create a new Vue project and make sure you choose Typescript. In the terminal this would be vue create my-app and then in the prompts, choose Typescript.
2. If you are in the terminal, make sure you change to the project's directory. If you are in the UI, then this is unnecessary.
3. Add the plugin to the project. In the terminal this would be vue add vue-cli-plugin-nativescript-vue.

If you like templates with out of the box support for nativescript navigator (router), vuex, typescript/eslint, prettier, and structured using module-oriented approach (https://mnapoli.fr/organizing-code-into-domain-modules/) for easy maintenance as your app grows, you may clone our open-source project: https://github.com/Lyduz/nitibo