월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js + TypeScript 완벽 가이드
현재 vue2 typescript 적용 된 프로젝트에서 composition api 적용 시 에러 문의
현재 vue2 vue-news 프로젝트에서 "@vue/composition-api": "^1.4.9",를 활용하여 composition api 적용 중 dispatch(action)을 호출 하는경우 [vuex] unknown action type: FETCH_NEWS가 발생하고 있습니다. import { defineComponent,reactive, toRefs } from '@vue/composition-api'import { MutationTypes } from './store/mutations'import { ActionTypes } from './store/actions'export default defineComponent({ name: 'App', async setup(props, context) { const store = context.root.$store console.log(store?.state) store?.commit(MutationTypes.SET_NEWS, [1, 2, 3]) console.log(ActionTypes.FETCH_NEWS) await store?.dispatch('FETCH_NEWS') await store?.dispatch(ActionTypes.FETCH_NEWS) // 데이터 함수 선언(data) const state = reactive({ loading: false, }) return { ...toRefs(state), } },}) 소스 확인 결과 api 호출 시 store 객체를 접근하는 경우 위와 같은 에러가 발생하며, store객체를 주석처리 하거나 ActionTypes를 분리하여 import를 하면 정상적으로 api 호출이 되었습니다. import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'// import { setDefaultOptions } from '@/api/instance/intercepter'import store from '@/store'const APP_BASE_URI: string = ""const options = {}function create(url: string, options = {}): AxiosInstance { const instance = axios.create(Object.assign({ baseURL: url }, options)) console.log(store) instance.interceptors.request.use( (config: AxiosRequestConfig) => { return config }, (error) => { return Promise.reject(error.response) }, ) return instance} import { fetchNews } from '@/api'import { ActionContext } from 'vuex'import { Mutations, MutationTypes } from './mutations'import { RootState } from './state'enum ActionTypes { FETCH_NEWS = 'FETCH_NEWS',}type MyActionContext = { commit<K extends keyof Mutations>( key: K, payload: Parameters<Mutations[K]>[1], ): ReturnType<Mutations[K]>} & Omit<ActionContext<RootState, RootState>, 'commit'>const actions = { async [ActionTypes.FETCH_NEWS](context: MyActionContext, payload?: any) { const { data } = await fetchNews() context.commit(MutationTypes.SET_NEWS, data) return data },}type Actions = typeof actionsexport { actions, Actions, ActionTypes } 혼자 해결 방법을 찾아보다가 방법이 없어 문의 드립니다.. 해당 에러가 발생하는 이유가 뭔지 궁금합니다..
- 미해결Vue.js + TypeScript 완벽 가이드
github 권한 요청 부탁드립니다.
두 번째 프로젝트에서 깃헙 권한이 필요하다고 해서 글을 남깁니다. [깃헙: mpcbpro ]
- 미해결Vue.js + TypeScript 완벽 가이드
router no overload mathes this call 오류
- 프로젝트를 생성할 때부터 계속 routes 오류가 발생합니다. main.ts index.js ts로 바꾸기 전 파일 그대로.. -------------------------------------------- 버전 문제라는 것을 알았고 해결완료했습니다!vue-router와 vuex 둘 다 해당 강의 버전과 동일하게 하니 해결되었습니다..그런데 걱정이 있습니다. 2주 뒤에 vue, ts로 새 프로젝트를 진행하려하는데, 그때는 최신 버전을 사용할 것 같습니다.그렇다면 위의 문제를 최신 버전을 유지한채 해결하려면 어떻게 해야하나요? 따로 해주어야 하는 것이 있나요?
- 미해결Vue.js + TypeScript 완벽 가이드
두번째 프로젝트 github 권한요청드립니다.
두번째 프로젝트 github 권한요청드립니다. username: JuneHyung 인프런 : cjh951114@gmail.com 감사합니다.
- 미해결Vue.js + TypeScript 완벽 가이드
권한 요청합니다
깃헙: kkuyu 인프런: devils67@naver.com 감사합니다~
- 미해결Vue.js + TypeScript 완벽 가이드
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); }, }; }
- 미해결Vue.js + TypeScript 완벽 가이드
error overlay를 감추는 필드를 추가하면 에러가 발생합니다.
"점진적인 타입스크립트 적용 방식 2단계 - 컴포넌트, API 함수" > "API 파일에 타입스크립트 적용 및 호출 로직 구현"의 [1분 24초 경] error overlay를 감추는 방식이 변경된 것 같습니다. 저의 경우, vue cli로 프로젝트를 생성하면 vue.config.js가 기본으로 생성되고 있고, 약간의 내용(i.e. "transpileDependencies: true,")이 포함되어있습니다. 일단 무시하면서 진행하고 있는데, 아래의 에러가 발생하고 있습니다. 변경된 방법을 아시나요? [package.json] "dependencies": { "axios": "^0.26.1", "core-js": "^3.8.3", "vue": "^2.6.14", "vue-router": "^3.0.1", "vuex": "^3.0.1" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-typescript": "~5.0.0", "@vue/cli-service": "~5.0.0", "@vue/eslint-config-typescript": "^9.1.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-vue": "^8.0.3", "prettier": "^2.4.1", "typescript": "~4.5.5", "vue-template-compiler": "^2.6.14" } [vue.config.js] const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, devServer: { overlay: false, }, }); [에러 메시지] ----- C:\test\vue-news-ts>npm run serve > vue-news-ts@0.1.0 serve C:\test\vue-news-ts > vue-cli-service serve INFO Starting development server... ERROR ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'overlay'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? } ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'overlay'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? } at validate (C:\test\vue-news-ts\node_modules\webpack-dev-server\node_modules\schema-utils\dist\validate.js:115:11) at new Server (C:\test\vue-news-ts\node_modules\webpack-dev-server\lib\Server.js:232:5) at serve (C:\test\vue-news-ts\node_modules\@vue\cli-service\lib\commands\serve.js:183:20) at processTicksAndRejections (internal/process/task_queues.js:93:5) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue-news-ts@0.1.0 serve: `vue-cli-service serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vue-news-ts@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\sundlee\AppData\Roaming\npm-cache\_logs\2022-03-20T14_22_26_938Z-debug.log C:\test\vue-news-ts> ----
- 미해결Vue.js + TypeScript 완벽 가이드
nom run serve를 하면 오류가 납니다.
vue-advancded의 vue-news에 있는 파일을 새로 만든 news의 디렉토리로 옮기고npm run serve를 실행하면아래처럼 routes/index.js와 store/index.js를 찾을 수 없다는 오류가 납니다.모두 파일은 위치해 있지만 이렇게 됩니다.어떻게 해결해야 하는지 좀 알려 주세요. webpack compiled with 1 error ERROR in src/main.ts:3:20 TS7016: Could not find a declaration file for module './routes/index.js'. '/Users/jungkyungsuk/Workspaces/inflearn/learn-vue-typescript/vue-news/src/routes/index.js' implicitly has an 'any' type. 1 | import Vue from "vue"; 2 | import App from "./App.vue"; > 3 | import router from "./routes/index.js"; | ^^^^^^^^^^^^^^^^^^^ 4 | import store from "./store/index.js"; 5 | 6 | Vue.config.productionTip = false; ERROR in src/main.ts:4:19 TS7016: Could not find a declaration file for module './store/index.js'. '/Users/jungkyungsuk/Workspaces/inflearn/learn-vue-typescript/vue-news/src/store/index.js' implicitly has an 'any' type. 2 | import App from "./App.vue"; 3 | import router from "./routes/index.js"; > 4 | import store from "./store/index.js"; | ^^^^^^^^^^^^^^^^^^ 5 | 6 | Vue.config.productionTip = false; 7 |
- 미해결Vue.js + TypeScript 완벽 가이드
개발환경에 대해서
안녕하세요 이 강의를 처음으로 수강하는데요(로드맵을 안따라왔습니다.) 전반적인 개발환경에 필요한 세팅이나.. 등등 부족하여서 프리티어쪽 에러로 막혀버립니다. 혹시 초반 세팅에 필요한게 있을까요? vue@cli랑 eslint정도만 설치한 상태에서 초반에 ts입력하여 자동완성되는 vbase-ts도 따로 vueSnippets 설치해서 진행하다가 프리티어 eslint 에러로 진행이안되네요. Replace `..import Vue from "vue"` with `import Vue fro "vue"; eslint(prettier)가 뜹니다.
- 미해결Vue.js + TypeScript 완벽 가이드
Cl4nn5 두번째 프로젝트 깃헙 권한 요청드립니다.
두번째 프로젝트 깃헙 권한 요청드립니다. 감사합니다
- 미해결Vue.js + TypeScript 완벽 가이드
beforeEnter 메소드에 마우스 올려보면.. 왜 any로 표시될까요?? (버전문제로 판명됨.....)
라우터 파일에 TS 적용 및 라이브러리 내부 타입 선언 파일 설명 영상에서 3:50분쯤 beforeEnter 메소드에 마우스 올려보면 저같은 경우는 any 로 표시되네요... Route 로 나와야 하는데... 왜 그런건가요??... 이미지 링크 (이미지 작게 보이시죠? ㅠㅠ) 그럼 답변 부탁드립니다! ############################### 버전 문제 판명됨 ############################################# 확인해보니깐 버전문제이네요.... 영상에서 같은 버전인 "vue-router": "^3.4.9", 로 하니 문제가 없는데요 import 가 되었습니다. (Router) 버전 4버전에서 import 가 안되는 문제이네요...ㅠㅠ
- 미해결Vue.js + TypeScript 완벽 가이드
todoItems 일부러 타입 안맞게 해당 변수 값을 저장 시켰는데요 왜 밑에 빨간색이 안나올까요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사 todoItems 변수를 todoItems: [] as Todo[] 이렇게 Todo 로 선언했는데요 this.todoItems = 1; 이렇게 선언하면 밑에 빨간색이 나와야 하는데 왜 안나오는걸까요... tsconfig 파일에서 "noImplicitAny": true, 이렇게 true 로 설정했는데... 왜 그런건가요?? 답변 부탁드립니다 ㅠㅠ 감사합니다.
- 미해결Vue.js + TypeScript 완벽 가이드
깃헙 권한 요청 드립니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지 안녕하세요. [Vue.js + TypeScript 완벽 가이드] 강의를 수강중입니다. 2번째 프로젝트에서 깃헙 권한이 필요하다고 해서 글을 남깁니다. [깃헙: syh8088] - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결Vue.js + TypeScript 완벽 가이드
깃헙 권한 요청드립니다-
안녕하세요. [Vue.js + TypeScript 완벽 가이드] 강의를 수강중입니다. 2번째 프로젝트에서 깃헙 권한이 필요하다고 해서 글을 남깁니다. [깃헙: aui9f] - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결Vue.js + TypeScript 완벽 가이드
깃헙 권한 요청드립니다.
2번째 프로젝트 권한 요청 드립니다. bbanchu1@gmail.com
- 미해결Vue.js + TypeScript 완벽 가이드
깃헙 권한 요청드립니다.
2번째 프로젝트 권한 요청드립니다. igoman2@ajou.ac.kr 입니다. 감사합니다.
- 미해결Vue.js + TypeScript 완벽 가이드
두 번째 프로젝트 깃헙 권한 요청드립니다.
안녕하세요. 두 번째 프로젝트 깃헙 권한 요청드립니다. Kim-taeshin
- 미해결Vue.js + TypeScript 완벽 가이드
깃헙 권한 요청드립니다.
안녕하세요 강사님 두 번째 프로젝트 깃헙 접근 권한 요청드립니다. 깃헙 아이디는 tjehdrjs72 입니다.
- 미해결Vue.js + TypeScript 완벽 가이드
두 번째 프로젝트 깃헙 권한 요청 드립니다.!!
2/9일에 계정명 pyyyyye 으로 권한 요청드리고 확인하신 댓글까지 보았는데 지금 들어가보려고 하니까 404 에러 뜨고, 권한 받은 레퍼지토리 목록에도 확인이 안되어서 다시 요청 드립니다.ㅠㅠ 계정명 : pyyyyye 아이디 : qkzud8033@hanmail.net
- 미해결Vue.js + TypeScript 완벽 가이드
깃헙 권한 요청드립니다.
안녕하세요. 두번째 프로젝트 깃헙 권한 요청 부탁드립니다. 깃헙 아이디 guruJelly 입니다.