Ustawienia ścieżek dla TypeScript w tsconfig.json

Question

Już od kilku godzin nie mogę ogarnąć ustawień dla TypeScript'u. Chcę ustawić bezwzględne ścieżki w pliku tsconfig.json.  Tak wygląda plik : 

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": false,
    "baseUrl": "resources",
    "paths" : {
      "@js/*" : ["js/*"],
      "@jscomponents/*" : ["js/components/*"],
      "@jsmodules/*" : ["js/modules/*"],
      "sass/*" : ["sass/*"],
      "sasscomponent/*" : ["sass/components/*"]
    }
  },
  "include": ["resources/js/**/*"],
  
}

Jaki jest magiczny sposób aby ustawić tak aby zamieniał mi np. @jscomponents na /resources/js/components  niezależnie od tego ile folderów będzie za @jscomponents ?

Answer 1

Wychodzi na to, że ścieżki są poprawnie rozpoznawane ale webpack nie jest w stanie zaimportować w pliku ts pliku z rozszerzeniem vue. Ktoś wie jak to zrobić?

Comments

Są jakieś błędy kompilacji? W jaki sposób importujesz pliki Vue do TS?

---

Import - nie widzi wszystkiego oprócz 1 pliku z góry - bo ma rozszerzenie js. Wyświetla błąd : 

Cannot find module '@jscomponents-form-controls/textarea_combo.vue' or its corresponding type declarations.

import VueConstructor from '@jsmodules/basic.js';
import TextareaCombo from '@jscomponents-form-controls/textarea_combo.vue';
import IconStop from '@jscomponents-decoration/icon_stop.vue';
import IconConfirm from '@jscomponents-decoration/icon_confirm.vue';

const Vue = VueConstructor.build();

Vue.component('textarea-combo', TextareaCombo);
Vue.component('icon-stop', IconStop);
Vue.component('icon-confirm', IconConfirm);

Ustawienia webpacka 

.options({processCssUrls: false})
    .webpackConfig({
        resolve: {
            alias: {
                '@js' : path.resolve('resources/js'),
                '@jscomponents' : path.resolve('resources/js/components'),
                '@jsmodules' : path.resolve('resources/js/modules'),
                '@jscomponents-decoration' : path.resolve('resources/js/components/decoration'),
                '@jscomponents-form-controls' : path.resolve('resources/js/components/form_controls'),
                'sass' : path.resolve('resources/sass'),
                'sasscomponent' : path.resolve('resources/sass/components')
            },
            extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
        },
        module: {
            rules: [
              {
                test: /\.ts$/,
                exclude: /node_modules|vue\/src/,
                loader: "ts-loader",
                options: { appendTsSuffixTo: [/\.vue$/] }
              }
            ]
          }
    })
    .sourceMaps();

Ustawienia w pliku tsconfig.js

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true,
    "baseUrl": "./",
    "paths" : {
      "@js/*" : ["js/*"],
      "@jscomponents/*" : ["resources/js/components/*"],
      "@jscomponents-decoration/*" : ["resources/js/components/decoration/*"],
      "@jscomponents-form-controls/*" : ["resources/js/components/form_controls/*"],
      "@jsmodules/*" : ["resources/js/modules/*"]
    }
  },
  "include": ["resources/js/**/*"],

}

 

---

Coś stąd?

https://github.com/vuejs/vue/issues/5298

https://github.com/vuejs/vue-cli/issues/1198

---

Rozwiązaniem jest jak się okazuje umieszczenie pliku o nazwie schims.vue.ts w folderze ze skryptami o następującej treści.

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

Chociaż dokładnie nie wiem o co chodzi jeszcze.