unable to use typescript in vue

Question

A while back I created a vue project using vue init webpack ., and everything worked fine.

Now I tried to install typescript and ts-loader. I created a file in src which contains:

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

I added tsconfig.json

{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"strict": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"sourceMap": true,
},
"include": [
 "src/**/*.ts",
 "src/**/*.vue"
],
"exclude": [
 "node_modules"
]
}

And I renamed the main.js file to main.ts and router/index.js to router/index.ts.

For the webpack configuration, I added/modified few lines:

 {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        ts: [
          {
            loader: 'ts-loader',
            options: {
              appendTsSuffixTo: [/\.vue$/]
            }                
          }
        ]
      }         
    }        
  },
  {
    test: /\.ts$/,
    loader: 'ts-loader'
  },

I added for ts-loader and I modified some stuff for vue-loader (the path for webpack is build/webpack.base.conf.js)

There are no errors while running npm run dev but there are few warning though.

The problem here is there is in the file src/components/HelloWorld.vue

<template>
 <div class="hello">
   <h2>Essential Links</h2>
   {{message}}
 </div>
</template>

<script lang="ts">
  import Vue from 'vue'

  export default class AppTest extends Vue {
   message: string = 'Hello!'
  }
</script>

[Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

I tried so many ways to fix this by updating the configuration and all but nothing seems to be working.

Can anyone help me out with this?

Your saying that you made no changes to the `HelloWorld.vue` file? It only stopped working after you added in typescript? — skribe, Aug 14 '18 at 07:57
yeah i modified HelloWorld.vue, added `lang="ts"`, created the class, assigned variable and using it in the template. Yes after modified this only it is not working. — Sam, Aug 14 '18 at 08:03

score 1 · Accepted Answer · answered Aug 14 '18 at 09:05

1

If you want to use a class-style component, you also need to add the @Component decorator to the class (assuming you're using vue-class-component):

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class AppTest extends Vue {
   message: string = 'Hello!'
}

answered Aug 14 '18 at 09:05

sroes

14,663
1
53
72

Yeah i added it, but it shows error in vscode, so i thought that it is a mistake, but it is building fine. Thanks. You have any idea why this error is showing up in vscode, **Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning**. – Sam Aug 14 '18 at 09:51
Yeah, `vue-class-component` uses the ECMAScript stage 1 decorators which you have to enable in the TypeScript compiler by adding `"experimentalDecorators": true` to your `tsconfig.json` (in the `compilerOptions` section) – sroes Aug 14 '18 at 10:34
yeah i already added it, actually before adding that line there is a build failure with the same error i mentioned in the comment above, but after adding that line in tsconfig and adding @component decorator shows error on hover of AppTest class in vscode only. But its not actually impacting while building. – Sam Aug 14 '18 at 15:47
You can use Vue Cli 3 to generate a typescript-vue project. It pretty much creates everything you need to use typescript with vue to see how it should look like. – Jeremy Walters Aug 15 '18 at 07:46

unable to use typescript in vue

1 Answers1