-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
ListView.vue를 ts로 변경 후 에러가 발생합니다.
22.03.21 09:48 작성 조회수 371
1
점진적인 타입스크립트 적용 방식 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);
},
};
}
답변을 작성해보세요.
0
0
장기효(캡틴판교)
지식공유자2022.03.21
엇 vue 파일을 js로 인식하는 케이스는 처음 보는데요.. script 태그에 lang="ts"를 넣고 Vue.extend() 문법을 쓰셔도 에러가 난다는거죠?
답변 2