VS Code를 사용하여 .vue 파일의 Typecript를 사용하는 방법

VS Code를 사용하여 .vue 파일의 Typecript를 사용하는 방법

나는 Visual Studio Code, Vue 2 (웹 팩 템플릿) 및 Typecript를 사용하고 있다.

이건 내 앱이야.vue 구성 요소:

<template>
    <div id="app">
        <navbar></navbar>
        [content here]
    </div>
</template>

<script lang="ts">
    import Navbar from './components/Navbar'

    export default {
        components: {
            Navbar
        }
    }
</script>

질문 1: 모든 것이 잘 되고 있지만, 나는 안에 무감각함을 가지고 싶다.<script lang="ts">.ts 파일에서 발생하는 대로 태그를 지정하면 어떻게 해야 하는가?

질문 2: 내 전공.ts에는import App from './App', 그러나 VS Code가 .ts 파일을 찾을 수 없기 때문에 "./App"은 빨간색으로 밑줄이 그어져 있다.편집자가 편집 시간(편집 시간)을 컴파일하기 전에 .vue를 인식하도록 하는 방법이 있는가?

업데이트(2018-03-25):나는 이것을 읽도록 타이프릭을 설정하기를 원하는 모든 사람들을 강력히 추천한다.

Q1의 경우 Typecript 코드를 별도의 코드에 넣으십시오.script.ts그것을 철하여 에 포함시키다.App.vue다음과 같다:

<script lang="ts">
   import s from './script'
   export default s
</script>

Q2의 경우, @Oswaldo에서 제안한 바와 같이, a를 정의할 수 있다.vue.d.ts다음 내용을 포함하는 파일:

declare module '*.vue' {
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value
}

이 파일을 에 넣으면${Project_ROOT}/typings폴더, 이 유형 파일을 포함시켜야 함tsconfig.json맘에 들다

"typeRoots": ["./typings"]

그러면 가져올 수 있다.*.vue을 제출하다.vue사후 처리:

import App from './App.vue'

만약 당신이 그것을 포함하지 않는다면..vuepostfix, 다음과 같은 단일 폴더에 모든 Vue 구성 요소를 넣을 수 있음src/components그리고 그것을 바꾸다.vue.d.ts다음과 같이 한다.

declare module 'src/components/*' {
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value
} 

그src정의됨webpack.base.conf.js절대 경로의 별칭으로.

resolve: {
  extensions: ['.js', '.vue', '.json', '.ts'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    'src': resolve('src')
  }
}

그런 다음 전체 경로를 사용하여 구성 요소를 가져오려면.vue사후 처리:

import App from 'src/components/App'

둘 다 우아한 해결책은 아니지만 빨간 밑줄은 사라졌다.

Q2의 경우, vue-class-component가 해결책인 sfc.d.ts와 함께 제공되므로 도움이 될 수 있기를 바란다.Q1에 대한 아이디어가 있다면 나에게 알려줘.

1분기 동안 나는 vetur라는 멋진 VS Code 확장을 찾아냈다.

Q2의 경우 .vue 파일로는 달성할 수 없으며, 템플릿이 포함된 .ts만 사용하면 된다.

참조URL: https://stackoverflow.com/questions/42058620/how-to-work-with-typescript-in-vue-files-using-vs-code