Visual Studio에서 작동하는 TypeScript용 Vue.js 2.0 타이핑을 가져오려면 어떻게 해야 합니까?

Visual Studio에서 작동하는 TypeScript용 Vue.js 2.0 타이핑을 가져오려면 어떻게 해야 합니까?

Visual Studio에서 TypeScript를 사용하여 Vue.js 2.0 타이핑을 가져오려고 합니다.이전에도 이 오타를 사용한 적이 있습니다.입력은 되어 있습니다만, Vue.js 1.0 용이므로 일치하지 않습니다.하지만, 그들은 잘 작동했고, 내가 그 일을 하게 해주었다.Vue유형.

이후 Vue.js 릴리즈에 부속된 타이핑 파일을 사용하는 것으로 전환했습니다(여기).나는 그것들을 내 프로젝트에 포함시켰습니다.~/Scripts/typings/vue폴더입니다만, 제 프로젝트가 그것들을 이해하지 못합니다.

이 타이핑 파일은 Import/export를 통해 사용할 수 있는 것으로 알고 있습니다.이렇게 작업하는 다른 타이핑 파일이 없기 때문에 타이핑이 글로벌하게 사용되도록 올바르게 구현해야 할지 모르겠습니다.

제가 시도한 것의 예를 보여주는 샘플 솔루션이 있습니다.여기서 github repo에서 다운로드하세요.

여기 제 구조가 있습니다.Scripts폴더:

_references.d.ts 내용

/// <reference path="typings/vue/index.d.ts" /> 

vue_test.ts 내용

namespace Test
{
    export class MyClass
    {
        public initialize()
        {
            var component = this.getComponent();
        }

        private getComponent(): Vue.Component
        {
            return Vue.component("test", {
                template: "<div></div>",
                props: ["test"],
                methods: {
                    onClick: () =>
                    {
                    }
                }
            });
        }
    }
}

제가 기대하는 것은 제가 이 컴퓨터에 접속할 수 있다는 것입니다.Vue.Component네임스페이스 및 에서 선언된 기타 네임스페이스typings/vue/index.d.ts하지만, 이것은 사실이 아닌 것 같습니다.

내보낸 클래스를 로 Import하려고 했습니다.global, 다음과 같이 합니다.

import * as _Vue from "./index";

declare global
{
    export class Vue extends _Vue
    {

    }
}

단, 이 경우 루트에만 액세스 할 수 있습니다.Vueclass, 그래서 나는 specify와 같은 것을 할 수 없다.Vue.Component유형 또는 기타 네임스페이스로서Vue.

기타 정보:
Visual Studio 2015
Vue.js 버전 2.2.1
TypeScript 버전 2.1

@unional로부터의 제안 후 업데이트 새로운 폴더 구조를 다음에 나타냅니다.

더 이상 _references.d.ts를 사용하지 않고 대신 tsconfig.json을 사용합니다.tsconfig.json 파일에는 다음이 포함됩니다.

{
    "compilerOptions": {
        "sourceMap": true
    },
    "include": [
        "../../**/*.ts"
    ]
}

위는 프로젝트의 모든 .ts 파일을 가져옵니다.그~/Scripts/typings/custom-typings/vue.d.ts파일에는 다음이 포함됩니다.

export * from "vue"
export as namespace Vue

Visual Studio가 말해주는 건Cannot find module 'vue'tsconfig.json 파일은 기능하지만 입력은 아직 기능하지 않습니다(확인하기 위해 jQuery 타이핑을 추가했습니다).

다음은 새로운 문제를 보여주는 업데이트된 솔루션에 대한 링크입니다.[ link ]

NPM과 함께

NPM 및 TypeScript 명령줄 인터페이스를 사용하려면 앱의 루트 디렉터리에 있는 명령줄로 드롭다운하십시오.

• 패키지가 아직 없는 경우.json 파일, 먼저 실행npm init.
• 다음 js를 하려면 vue.js를 합니다.npm install --save vue.
• 을 설치하려면 을 실행합니다.를 실행합니다.npm install --save-dev @types/vue.
• tsconfig.json 파일을 합니다.tsc --init.
• '', '아까', '아까', '아까'를 하면 만들 수 .tsc.

NPM 없음

NPM을 사용하지 않는 것은 전례가 없는 일이며 많은 수작업이 필요합니다.다음은 수동접근법 중 하나입니다.

GitHub repo에서 VueJ 2.1.1을 다운로드합니다.아카이브를 추출한 후

1. 을 넣습니다.distScripts/vuejs 「」,
2. 을 넣습니다.typingstypings/vuejs 「」,
3. 이 내용을 포함하는 프로젝트 루트에 tsconfig.json 파일을 추가합니다.

tsconfig.json

{
  "compilerOptions": {
    // ....... other properties omitted      
    "typeRoots": [
      "./typings/"
    ],
    "target": "es5",
    "lib": ["es2015", "dom", "es2015.promise" ]
  }
}

그런 다음 Vue를 사용할 파일 맨 위에 상대 Import 문을 추가합니다.

import * as Vue from "../typings/vuejs";

interface MyComponent extends Vue {
  message: string
  onClick (): void
}

export default {
    template: '<button @click="onClick">Click!</button>',
    data: function () {
        return {
            message: 'Hello!'
        }
    },
    methods: {
        onClick: function () {
            window.alert(this.message)
        }
    }
}

예

다음은 Web Application 1 예제의 업데이트된 버전입니다.

https://github.com/bigfont/StackOverflow/tree/master/TypeScriptVueJsTypes

다음 항목도 참조하십시오.

https://vuejs.org/v2/guide/typescript.html

https://github.com/vuejs/vue

@unional의 코멘트에서 정보를 사용할 수 있었습니다만, 조금 변경했습니다.

custom-vue.d.ts 파일에 다음과 같이 추가했습니다.

import * as _Vue from 'vue';
export as namespace Vue;
export = _Vue; 

'나다', '아, 외형', '만들기'를 .package.json다음 파일을 첨부합니다.

{
    "dependencies": {
        "vue": "^2.2.1"
    }
}

마지막으로 '아까', '아까', '아까', '아까'를 넣어야 요.node_modules와 의 폴더tsconfig.json츠키다

+-- node_modules
|   +-- vue
|   |   +-- package.json
|   |   +-- types
|   |   |   +-- index.d.ts
|   |   |   +-- options.d.ts
|   |   |   +-- plugin.d.ts
|   |   |   +-- vnode.d.ts
|   |   |   +-- vue.d.ts

package.json순순: :

{
  "typings": "types/index.d.ts"
}

그리고 이제 모든 것이 잘 되고 있다.

★★★★★
대신에, 나는 모든 수 것을 되었다.node_modules thing thing by by by by를 설정함으로써 한다.tsconfig.json<고객명>님의 moduleResolution로로 합니다.Classic 나는 내 것을 .custom-vue.d.ts수입하다

import * as _Vue from "../vue/index";

에러는 컴파일 시이므로 큰 문제는 없습니다.이 플러그인을 사용하여 보다 빠른 개발을 할 수 있습니다.

또한 코드는 다음과 같아야 합니다.

import Vue from 'vue'
import Component from 'vue-class-component'
// The @Component decorator indicates the class is a Vue component
@Component({

  template: ''
})
export default class MyComponent extends Vue {



}

기타 등등.cshtml 파일 내에서 vuejs를 계속 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/42655160/how-can-i-get-vue-js-2-0-typings-for-typescript-working-with-visual-studio