Using TypeScript with NativeScript-Vue

Mobile, NativeScript, TypeScript, Vue.js   •   December 14th, 2018

NativeScript-Vue Logo

Over the past year or so I have been working on a project that uses Vue.js for the web UI. I’ve really grown to love the framework over that time and found myself wishing I could use it for native mobile apps.

Smarter people than me had the same wish and actually did something about it. Enter NativeScript-Vue, which allows you to create NativeScript apps with the Vue,js framework. NativeScript allows you to create actual native apps (not using webviews like Cordova / PhoneGap) using JavaScript, CSS and XML. The Vue plugin replaces the XML part with Vue.js.

As time has gone on and my applications have become bigger and more complex, I started to miss the type safety and even the IDE IntelliSense you get with some languages. VS Code makes a decent stab at IntelliSense with JavaScript but it’s not perfect and doesn’t highlight type safety errors.

Replacing the JavaScript in my Vue components with TypeScript solves these issues. However I could find no complete documentation on how to set this up for NativeScript-Vue. There is a guide on the NativeScript-Vue blog, but it’s incomplete. This article should hopefully bridge the gap and is a result of many hours of trial and error.

Prerequisites

This article assumes that you have installed the NativeScript CLI and mobile SDKs. If you haven’t, you can follow this guide. It is for NativeScript 5.0 and NativeScript-Vue 2.0.

Create the Project

The first thing I’m going to cover is setting up the project from the CLI. It’s pretty simple. Just type

Copy to Clipboard
at the command line. You’ll be presented with the following:

Choose Vue.js and the initial project will be configured for you.

cd into your project directory and open it in VS Code (or your preferred IDE 🤷‍♂️)

Configuring for TypeScript

To transpile our Vue TS components we need the TypeScript Loader for Webpack and TypeScript installed. The project setup should have already installed the TS Loader, but I’ll include it here anyway. We also need Vue Property Decorator to add component and property annotations. Finally we need the full Vue.js package, but only for type definitions and autocomplete.

These are installed by running:

Copy to Clipboard

Configure Webpack

Webpack has to be configured to route .ts and .vue files through the TypeScript Loader. When I first used NS-Vue, I was using NS 4.x. I recently updated to 5.1 and had to manually add the TypeScript configuration to webpack.config.js. However, when creating a new NS-Vue project from scratch in version 5.x, these settings are already in place.  I’ll highlight them here anyway in case anyone runs into the same issues as I did.

  1. Update the entryPath to have a .ts file extension.
    TS EntryPath
  2. Add .ts to the extensions to resolve:
    Webpack TS Extension
  3. Add an alias to map Vue import to the NativeScript-Vue library. This is so that type declarations and autocomplete will work correctly.
    Vue alias
  4. Add a rule so that .ts and .vue files are procesed by the ts-loader.
    Vue ts-loader config

Add tsconfig

We need to add tsconfig.json to the project root to set the TypeScript compiler options. The content below should work for any project. Note that we need to enable the experimentalDecorators setting so that we can add component decorators.

Copy to Clipboard

Update files

We now need to rename /app/app.js to app.ts so that it will be processed as a TypeScript file. You may see a compiler error where the module ‘./components/Home’ can’t be found. I haven’t fount a way to fix this, so I add a ts-ignore comment.

Copy to Clipboard

Open /app/components/Home.vue. Modify the script block so that the lang attribute is set to ts.

Copy to Clipboard

The content of the script block by default looks like this:

Copy to Clipboard

We want to change it so that it uses proper TS classes. To do this we’re going to need decorators. I’ll add a blog entry at a later date into all the cool stuff you can do with Vue Decorators. When done, the script block content should look like this:

Copy to Clipboard

Computed methods are defined as accessor methods. Props are defined with the @Prop decorator and other components referenced in this component are defined in the @Component decorator. Full documentation can be found here.

Now just run your app. Replace android with ios to run on ios. The –hmr flag enables experimental hot module reloading. YMMV but I’ve found it works most of the time, but occasionally doesn’t reflect changes until a full app reload is done.

Copy to Clipboard

Hopefully this helps you avoid the problems I ran into. NativeScript-Vue is a great framework and I’m looking forward to using it a lot more.