2017-12-20 16 views
10

Vue.js + TypeScript 설정의 최소한의 실제 예를 웹에서 검색했습니다. 평소와 같이 "최신 자바 스크립트 스택"과 같이 대부분의 튜토리얼은 불과 몇 달 전에 작성되었거나 매우 구체적인 설정에 따라 오래된 것입니다. 위에 구축 할 수있는 일반적이고 검증 가능한 예제가없는 것 같습니다.TypeScript를 Vue.js 및 단일 파일 구성 요소와 함께 사용하는 방법은 무엇입니까?

내가 사용하는 기본 템플릿은 모든 기본 옵션을 사용하여 vue-cli init webpack을 실행하여 제공되는 템플릿입니다. 이렇게 많은 코드가 생성되므로 여기에 모든 것을 붙여 넣지는 않습니다. 일부 발췌가 필요한 경우, 기꺼이 질문을 업데이트 할 것입니다.

공식적인 Vue.js 문서는 TypeScript를 SFC와 함께 설정하는 것을 고려하지 않기 때문에 제 목적에는 쓸모가 없습니다. 나가 시도한 최신은 명부의 마지막에이었다. 나는 정확하게 설정을 따라하지만 npm run dev에 다음과 같은 오류로 저를 실행합니다

[tsl] ERROR in /Users/[REDACTED]/ts-test/src/main.ts(12,3) 
     TS2345: Argument of type '{ el: string; router: any; template: string; components: { App: { name: string; }; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'. 
    Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'. 

사람은 이런 일이 발생하고 어떻게 해결하는 이유에 대해 어느 정도의 실마리를 제공 할 수 있습니까? 더 나아가 webpack 템플릿으로 Vue.js + TypeScript 구성을 설정하는 방법에 대한 간략하고 간단한 단계별 예제를 매우 환영합니다.

바닐라 자바 ​​스크립트를 사용하여 Vue.js에서 프로덕션 환경에서 실행되는 여러 클라이언트 프로젝트를 이미 성공적으로 완료했지만 Vue.js와 결합 된이 TypeScript 툴링은 나 혼란에 빠져 있습니다.

+0

안녕하세요 언급했다 생각하지 않는 것은 타이프 라이터와 템플릿이이 https://github.com/morganster 도움이되기를 바랍니다있다/vue-ts-webpack-template – Morganster

+0

불행히도 지금은 Vue 라우터 부분을 다루지 않으므로. – herrbischoff

+0

현재로서는 모든 예제가 비대 해지고 복잡하거나 vue-router/vuex를 고려하지 않습니다. 이 설정으로 인내심을 잃을 것입니다. 나는 아마 그 모든 것을 버리고 내가 항상 가지고있는대로 계속할 것이다. – herrbischoff

답변

5

typescriptvue을 사용하려고했습니다. 내 개인 의견 : 그것은 잘 작동하지 않습니다. 일부 vue 내부가 typescript에 적합하지 않기 때문에 :

  1. vuex 글로벌 Vue 인스턴스를 변이
  2. Vue.use, Vue.mixin 및 기타 유사한 일을 this.$store.dispatch('some_action') 내 연구를하고있는 동안

은, 나는 발견했다 이 멋진 상용구 : Daniel Rosenwasser의 typescript-vue-tutorial 및 Microsoft의 TypeScript-Vue-Starter.

나는 나 자신에 의해 typescriptvue-webpack-template을 모방하는 것을 시도했다 : https://github.com/sobolevn/wemake-vue-template

더 나은 typescript + vue 워크 플로우를하는 것도 좋은 도구가 있습니다

결국 나는 flow을 사용하기로 결정했습니다. 관심이 있으시면 this project template을 확인하십시오.

+0

감사합니다. 제가 거의 모든 게시물과 기사에서 인상적인 인상을 받았기 때문에 흥미로운 관찰이었습니다. TypeScript + Vue.js는 훌륭한 일치가 될 것이고 TypeScript는 특히 유용 할 것입니다. 지금까지 제가 말할 수있는 것은 그것이 실망 스럽다는 것입니다.나는 왜 내 툴을 작동 시키는데 몇 시간을 소비해야하는지 알지 못한다. – herrbischoff

+0

@herrbischoff 내 가장 큰 질문이었습니다. – sobolevn

+0

Flow를 사용해 보았지만 JavaScript/TypeScript Language Server와 함께 사용하면 오류가 발생합니다. Vim과 VScode에서 언어 서버는'// @ flow'에 대해 불평하고 Type 선언은 TypeScript에 대해 독점적 인 것으로 불평합니다. 맨,이 자바 스크립트 스택은 일할 때의 악몽 일뿐입니다 ... 커뮤니티가 심호흡을하고, 근무 기본값을 정의하고, 작동하지 않는 것을 수정하고 거기에서 계속하는 방법은 어떨까요? 모든 프론트 엔드 개발 **을 더 이상 수행해야하는지 여부에 대해 의문의 여지까지 나를 좌절시킵니다. – herrbischoff

3

절대적으로 @ sobolevn의 의견에 동의합니다. 하지만, 저에게 많은 정보가 있습니다. TypeScript에 대한 커뮤니티 지원은 그만한 가치가 있습니다. VSCode에서

  1. *.vue 파일의 TypeScript 보풀이 지원 :

    는 뷰의 생태계는 더 타이프되고 있습니다. 이 문제는 vetur을 참조하십시오.

  2. 오픈 소스 생태계. vuex-class

  3. vue-test-utils
  4. 새로운 디자인의 vue-clivue-router

잠깐 기다려야하는 경우 잠시 동안 일시적으로 관찰 할 수 있습니다. 또는 TypeScript-Vue-StarterA Webpack Template Fork With Typescript Support과 같은 프로젝트를 참조 할 수 있습니다.