ListView.vue를 ts로 변경 후 에러가 발생합니다.

점진적인 타입스크립트 적용 방식 2단계 - 컴포넌트, API 함수 > axios 타입 정의 마무리 > 40초경

ListView.vue의 script부분을 ts로 변경하면 에러가 발생하고 있습니다.

ListView.vue파일을 ListView.vue.js로 추론하고 있는 것이 문제인 것 같은데, 이를 vue로 인식하게 할 수 있나요?

[변경전]

<script>
import { fetchNews } from '@/api';
import ListItem from '../components/ListItem.vue';

export default {
  components: {
    ListItem
  },
  data() {
    return {
      newsItems: [],
    };
  },
  methods: {
    async fetchNewsItems() {
      const response = await fetchNews();
      console.log(response.data);
      this.newsItems = response.data;
    },
  },
  created() {
    this.fetchNewsItems();
  },
}
</script>

[변경후]

<script lang="ts">
import Vue from 'vue';
import { fetchNews } from '@/api';
import ListItem from '../components/ListItem.vue';

export default Vue.extend({
  components: {
    ListItem
  },
  data() {
    return {
      newsItems: [],
    };
  },
  methods: {
    async fetchNewsItems() {
      const response = await fetchNews();
      console.log(response.data);
      this.newsItems = response.data;
    },
  },
  created() {
    this.fetchNewsItems();
  },
});
</script>

[에러 메시지]

ERROR in src/views/CreateListView.ts:1:22

TS2306: File 'C:/test/vue-news-ts/src/views/ListView.vue.js' is not a module.

> 1 | import ListView from '@/views/ListView.vue';

| ^^^^^^^^^^^^^^^^^^^^^^

2 | import bus from '../utils/bus';

3 | import { CreateElement } from 'vue';

4 |

[CreateListView.ts]

import ListView from '@/views/ListView.vue';
import bus from '../utils/bus';
import { CreateElement } from 'vue';

export default function createListView(name: string) {
  return {
    name,
    mounted() {
      bus.$emit('off:progress');
    },
    render(h: CreateElement) {
      return h(ListView);
    },
  };
}

인프런 커뮤니티 질문&답변