Как использовать Typescript с Laravel Mix и Vue SF C? - PullRequest
Новая
       18

Как использовать Typescript с Laravel Mix и Vue SF C?

0 голосов
/ 17 февраля 2020

Можно ли использовать Typescript в Vue отдельных файловых компонентах (SF C) при использовании Laravel Mix?

Если да, как это настроить?

В настоящее время я использую 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; }'.
...