Can Typescript be used in Vue single file components (SFC) with Laravel Mix?
If so, how can this setup be implemented?
The current setup includes Laravel Mix 5.0, Typescript 3.7.5, and Vue 2.5.17.
A sample single file component written in Typescript is SingleFileComponent.vue:
<template>
<div>
<ul
v-for="item in items"
v-bind:key="item.id">
<li>{{ item.message }}</li>
</ul>
</div>
</template>
<script lang="ts">
import Axios from 'axios';
export default {
data() {
return {
items: [],
}
},
mounted() {
Axios.get('/api/get-stuff').then(res => {
this.items = res.data;
})
},
}
</script>
This configuration has been set up in webpack.mix.js:
const mix = require('laravel-mix');
mix.ts('resources/js/app.ts', 'public/js')
.webpackConfig({
resolve: {
extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
}
});
When running npm run watch, the following error occurs:
ERROR in /path-to-file/SingleFileComponent.vue.ts
[tsl] ERROR in /path-to-file/SingleFileComponent.vue.ts(21,12)
TS2339: Property 'items' does not exist on type '{ data(): { items: never[]; }; mounted(): void; }'.