Integrate TypeScript with vue single-file components for Meteor

This meteor package adds TypeScript support in your single-file .vue components.

wildhart:vue-typescript-babel is a Meteor 3 compatible republish of nathantreid:vue-typescript-babel, created by Nathan Reid (@akanix42). All credit to the original author. Changes from nathantreid:vue-typescript-babel@1.0.3:

• The typescript lang handler is a plain synchronous function instead of a fiber-based Meteor.wrapAsync wrapper, which cannot return a result on Meteor 3 (no fibers).
• Depends on wildhart:npm-check (Meteor 3 republish of akryum:npm-check).
• Rebuilt and published with the Meteor 3 toolchain (the 1.0.3 isopack bundles a fibers-era promise package that throws Cannot find module 'fibers' at plugin load on Meteor 3).

Prerequisites

This package is an add-on for a Meteor 3 compatible republish of akryum:vue-component, such as bslocombe:vue-component@0.16.2. You must first have that package installed.

Your app must also provide the Babel TypeScript transform (the Babel 7 line):

meteor npm install --save-dev @babel/plugin-transform-typescript@^7

Installation

meteor add wildhart:vue-typescript-babel

Usage

Set your script's lang attribute to ts or typescript:

1<script lang="ts">
2  let message: string;
3
4  export default {
5    mounted() {
6      message = 'world';
7      console.log(`Hello, ${message}!`);
8    }
9  }
10</script>

Or with vue-class-component:

1<script lang="typescript">
2  import Vue from 'vue'
3  import Component from 'vue-class-component'
4
5  let message: string;
6
7  @Component
8  class MyButton extends Vue {
9    mounted() {
10      message = 'world';
11      console.log(`Hello, ${message}!`);
12    }
13  }
14    
15  // The export default has to be on a separate line due to the way the code is transpiled.
16  export default MyButton;
17</script>

Importing TypeScript files

This plugin only handles compilation of TypeScript within .vue files. To import other TypeScript files, you must install a .ts compiler such as nathantreid:typescript-babel or barbatus:typescript.

TypeScript compilation notes

The Babel TypeScript compiler performs transpilation only; type-checking is not supported. As a result, this plugin currently doesn't provide type checking.