59321


プロジェクト・ディレクトリの外から[vue-property-decorator](https://github.com/kaorun343/vue-
property-decorator)で実装されたVueコンポーネントをインポートしてみて、TypeScriptコンパイルの時に下記のエラーが出ました：

[code]

    TS2345: Argument of type '{ template: string; components: { SimpleCheckbox: typeof SimpleCheckbox; }; }' 
    is not assignable to parameter of type 'VueClass<Vue>'.
    Object literal may only specify known properties, and 'template' does not exist in type 
    'VueClass<Vue>'.
    
[/code]

WebStromは此のエラーに就いて警告を出しません、エラーが出ているのはWebpackを実行する時だけです（TypeScriptのローダーは[ts-
loader](https://github.com/TypeStrong/ts-loader)です）。

エラーが起きている所は：

[code]

    import { Vue, Component, Prop } from 'vue-property-decorator';
    import template from './SkipProjectInitializationStepPanel.pug';
    import SimpleCheckbox from './../../../../ui-kit-libary-in-development/UiComponents/Checkboxes/MaterialDesign/SimpleCheckbox.vue';
    
    // ここです！
    @Component({ template, components: { SimpleCheckbox } }) 
    export default class SkipProjectInitializationStepPanel extends Vue {
      @Prop({ type: String, required: true }) private readonly text!: string;
    }
    
[/code]

`ui-kit-libary-in-
development`という名前からわかる通り、これは開発中のライブラリで未だ`npm`依存性ではないので、`node_modules`の中にはありません。

これはTypeScriptだけのエラーで、`ts-
loader`により起きるものの、Webpackでコンパイル・ビルドされたアプリのJavaScriptは正常に動いています（ブラウザーのコンソールにエラーは一切ありません）。

下記の対策を取れば、エラーが無くなります：

  * `SimpleCheckbox.vue`を`SkipProjectInitializationStepPanel.ts`と同じディレクトリに移動し`import SimpleCheckbox from './SimpleCheckbox.vue';`の様にインポートします。
  * `@Component({ template, components: { SimpleCheckbox } })`から`SimpleCheckbox` を取り除き、`@Component({ template, components: {} })`だけ残します。 (勿論、 `SimpleCheckbox`はレンダリングされなくなりますが、実験の為に確認するべきの事でした)
  * `ui-kit-libary-in-development`を主要プロジェクトの`node_modules`に移動した上で、`ui-kit-libary-in-development`からこれの`node_modules`を取り除きます（取り除かなければ、エラーが変わらなく、無くなりません。従って、`npm link`は問題解決に成りません）

残念ながら、このエラーの再現は出来ませんでした。どういう訳か、下記のコードではエラーが再現しません:

**MainProject/src/Application.vue**

[code]

    <template lang="pug">
      PageOne
    </template>
    
    <script lang="ts">
      import { Vue, Component } from 'vue-property-decorator';
      import PageOne from './PageComponents/PageOne'
    
      @Component({ components: { PageOne }})
      export default class Application extends Vue {
        private created(): void {
          console.log('Done.');
        }
      }
    </script>
    
[/code]

**MainProject/src/PageComponents/PageOne.ts**

[code]

    import { Vue, Component, Prop } from 'vue-property-decorator';
    import template from './PageOne.pug';
    import Button from './../../../UiKitLibraryStillInDevelopment/UiComponents/Buttons/Button.vue';
    
    
    @Component({ template, components: { Button } })
    export default class SkipProjectInitializationStepPanel extends Vue {}
    
[/code]

**MainProject/src/PageComponents/PageOne.pug**

[code]

    .RootElement
      Button(:text="'Click me'")
    
[/code]

**ui-kit-libary-in-development/UiComponents/Buttons/Button.vue**

[code]

    <template lang="pug">
      button {{ text }}
    </template>
    
    
    <script lang="ts">
      import { Vue, Component, Prop } from 'vue-property-decorator';
    
      @Component
      export default class SimpleCheckbox extends Vue {
        @Prop({ type: String, required: true }) private readonly text!: string;
    
        private created(): void {
          console.log('OK!');
          console.log(this.$props);
        }
      }
    </script>
    
[/code]

エラーの解決の助言の中に見つけたのは[GitHubのissue](https://github.com/vuejs/vue-class-
component/issues/123)からのこのコメントだけです:

> 私が知っている限り、正常な動きの為に外部のコンポネントに`.d.ts`が必要。  
>  Side components should add .d.ts for it to work AFAIK.
>
> [Nick Messing](https://github.com/nickmessing)

でも、このコメントによって、私の中に新たな質問が生まれました:

  * `.d.ts`を作らなければならないのは、どこですか？主要なプロジェクトですか、依存性ですか？ 主要なプロジェクトだとしたら、何故`vuetify`の様なライブラリからコンポーネントが無事にインポートされますか? あちらで`.d.ts`がありますから!
  * どうやって`vue-property-decorator`を使う場合の`.d.ts`を書けば良いですか?一例・チュートリアル等ありますか？


CC BY-SA 4.0
2019-08-30T03:22:33.210
57714
2019-09-27T06:23:36.803
2019-09-27T06:22:03.763
16876
16876
question
node.js vue.js typescript
プロジェクトの外からTypeScriptで実装されたVueコンポーネントをインポートする時にエラーTS2345 を予防する


原因は`ts-loader`にある。タイプティックを[fork-ts-checker-webpack-
plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-
plugin)に任せれば、問題解決。


CC BY-SA 4.0
2019-09-27T06:23:36.803
59321
2019-09-27T06:23:36.803
16876
57714
answer