TypeScript 파일에서 Vue 구성 요소 가져오기

TypeScript 파일에서 Vue 구성 요소 가져오기

Vue.js를 TypeScript와 함께 사용하려고 시도하다가 이 보고서를 발견했습니다.

TypeScript에서 Vue Single Component File을 가져오는 동안 오류가 발생한다는 문제가 발생했습니다.Visual Studio Code를 사용하고 있습니다.아래 오류를 참조하십시오.

maint.ts:

// The Vue build version to load with the 'import' command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import * as Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
})

VS 코드 오류:

1 ERROR 
• main.ts
[ts] Cannot find module './App'. (4 17) 

출처: 알렉스 조버:

편집자가 main.js 파일의 '//App'에서 App 가져오기 행을 보고 App 모듈을 찾을 수 없다고 소리치는 경우 다음 내용을 포함하여 vue-sim.d.ts 파일을 프로젝트에 추가할 수 있습니다.

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

그리고 다음과 같이 적습니다.

import App from './App.vue'

대신에

import App from './App'

체크아웃합니다. 기본적으로 추가해야 합니다.appendTsSuffixTo: [/\.vue$/]로.ts-loader의 옵션 및esModule: true로.vue-loader의 옵션.

// webpack.config.js

{ modules: { rules: [
  {
    test: /\.ts$/,
    exclude: /node_modules|vue\/src/,
    loader: "ts-loader",
    options: { appendTsSuffixTo: [/\.vue$/] }
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      esModule: true
    }
  }
]}}

제가 다른 것을 놓쳤을 수도 있습니다.

심지어 이 문제가 있었습니다.vue.d.ts같은 파일에 여러 개의 선언이 있었기 때문입니다.이렇게 나눠야 했습니다.

vue 3에서 이것은vue.d.tstsconfig.json에 포함된 경로의 어딘가에 있어야 합니다.

// vue.d.ts
declare module '*.vue' {
    import { DefineComponent } from 'vue'
    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
    const component: DefineComponent<{}, {}, any>
    export default component
}

또한 저는 제 vue 인스턴스에 글로벌 속성을 설정하고 인텔리센스를 통해 모든 구성 요소에서 사용할 수 있도록 하고 싶었습니다.내 vue.d.ts 파일에 다음 코드를 추가한 후, 내가 .vue 파일을 typescript로 가져왔을 때 편집자가 불평했습니다.따라서 별도의 파일을 추가해야 했습니다. 그렇지 않으면 작동하지 않습니다.

// vue-runtime.d.ts
import '@vue/runtime-core'

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        customFunction: (val: number) => string;
    }
}

그리고나서customFunction모든 구성 요소에 등록됩니다!

vue-cli를 사용할 때는 다음과 같이 vue-loader-conf.js를 조정합니다.

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({

    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction, esModule: true
  }), esModule: true
}

참고로, 당신은 당신의 구성 요소들에 대한 .d.ts 파일을 생성한다고 선언할 수 있습니다. generate intsconfig.json, 그것들을 소스 dir에 복사하세요. 당신이 가진 것을 보세요!

언급URL : https://stackoverflow.com/questions/42002394/importing-vue-components-in-typescript-file