Question

使用Laravel Mix时是否可以在Vue单个文件组件（SFC）中使用Typescript？

如果是这样，应该如何设置？

我目前正在使用Laravel Mix 5.0，Typescript 3.7.5和Vue 2.5.17。

我有一个用Typescript编写的单个文件组件，例如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>

这是我在webpack.mix.js中配置的：

const mix = require('laravel-mix');

mix.ts('resources/js/app.ts', 'public/js')
   .webpackConfig({
      resolve: {
         extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
       }
   });

运行npm run watch会导致以下错误：

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; }'.

Answer 1

将SFC与Typescript一起使用时，您应该extend：

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

export default Vue.extend({
  ...
})
</script>

如何在Laravel Mix和Vue SFC中使用Typescript？

1 个答案: