How to use the kind of TypeScript in a Single File Component with Vue?

Question

I'm trying to use the TypeScript benefits in a Vue SFC,

Install the ts-loader, typescript dependencies

I added the tsconfig.json configuration

// tsconfig.json
{
    "compilerOptions": {
      // this aligns with Vue's browser support
      "target": "es5",
      // this enables stricter inference for data properties on `this`
      "strict": true,
      // if using webpack 2+ or rollup, to leverage tree shaking:
      "module": "es2015",
      "moduleResolution": "node"
    }

}

But when trying to compile the next component it shows me error.

<script lang="ts">
import Vue from "vue";
import { mapState,mapGetters } from 'vuex'


export default Vue.extend({
    data() {
        return {
            number : 0
        }
    },
    methods:{
        // error void
        upCount() : void {
            this.$store.commit('increment');
        },
        downCount() : void{
            this.$store.commit('decrement');
        },
        upCountBy() : void {
            this.$store.commit('incrementBy',{count : this.number});
        }

    },
....

the error

Module parse failed: Unexpected token (45:12) You may need an appropriate loader to handle this file type.

I am using VueJs together with WebPack from a Laravel and Laravel Mix base installation. How do I solve this?

Which line in the example does correspond to line 45 from the error message? — Sarah Groß
– Sarah Groß, Commented Apr 5, 2019 at 16:31
@Connum yes, it is commented in the code, the return of type void or any return marks it as error — DarkFenix
– DarkFenix, Commented Apr 5, 2019 at 16:35

Sarah Groß · Accepted Answer · 2019-04-05 16:35:54Z

2

When I started using Vue and TypeScript, I ran into similiar problems at first and it took me quite a while to get it to work. Try adding this to your webpack.config.js

...
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: [{
            loader: 'ts-loader',
            options: {
              appendTsSuffixTo: [ /\.vue$/ ]
            }
          }],
          exclude: /node_modules/
        },
        // make sure vue-loader comes after ts-loader
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
...

answered Apr 5, 2019 at 16:35

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DarkFenix Over a year ago

Yes, I added your answer but it still shows the same error

Sarah Groß Over a year ago

did you restart the webpack-dev-server? Because when you make changes to the webpack config, they'e not automatically reloaded like hot module reload. It's something that happens to me quite often. ;-)

DarkFenix Over a year ago

Yes, restart and the error persists. I'm using laravel mix, could this be a detail?

Sarah Groß Over a year ago

I'm not familiar with lavarel myself, but it shouldn't really make a difference since this is all about the assets that will be executed client-side, not any php code. It might help if you posted your webpack config file in the question as well.

bastian83 · Accepted Answer · 2019-04-19 20:49:25Z

2

Try and flip the order of Connum's suggested answer.

module: {
      rules: [
                {
                    test: /\.vue$/,
                    use: 'vue-loader',
                },
                {
                    test: /\.ts$/,
                    exclude: /node_modules/,
                    use: [{ loader: 'ts-loader', options: { appendTsSuffixTo: [/\.vue$/] } }],
                },
              ]
}

Worked for me. You have installed the vue-loader?

npm i -D ts-loader typescript vue-loader

edited Apr 19, 2019 at 20:49

answered Apr 19, 2019 at 20:42

bastian83

313 bronze badges

Collectives™ on Stack Overflow

How to use the kind of TypeScript in a Single File Component with Vue?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related