Почему метод stati c, основанный на классе ts * * * *, который объявлен в. vue, может работать только в блоке сценария. vue? - PullRequest
Новая
       18

Почему метод stati c, основанный на классе ts * * * *, который объявлен в. vue, может работать только в блоке сценария. vue?

1 голос
/ 19 марта 2020

Почему метод stati c компонента ts * на основе класса ts, объявленный в. vue, может работать только в блоке сценария. vue?

шаги для воспроизведения

  1. используйте vue -cli3 для запуска проекта машинописи и добавьте shims- vue .d.ts 

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
добавить Comp. vue файл в вашем проекте, как показано ниже 
// Comp.vue 
<template>
  <div></div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component
export default class Comp extends Vue {
  mounted() {

  }
  created(){

  }
  static notWorkFunc(){
    //anything
  }
}

export function anotherNotWorkFunc(){
  //anything
}
</script>
добавить test.ts и test. vue в вашем проекте с указанным c кодом, как показано ниже

test. vue

<script lang="ts">
import ComP,{anotherNotWorkFun} from "./Comp.vue";
ComP.notWorkFunc()
anotherNotWorkFun()
</script>

enter image description here

test.ts 


import ComP,{anotherNotWorkFun} from "./Comp.vue";
ComP.notWorkFunc()
anotherNotWorkFun()

enter image description here

Как видите,

в .ts не работает

в . vue работа

Я не знаю причину ...

Репо https://github.com/WilkinWendy/vue-ts-problem.

Демокод находится в ./src / demo

FYI

1 Ответ

0 голосов
/ 19 марта 2020

Я думаю, что компоненты классов машинописи в .vue файлах на самом деле компилируются в объект Vue options, и именно так они экспортируются. То, что мы делаем в нашем проекте, находится в файле .vue, у нас просто есть шаблон, а внизу у нас есть внешняя ссылка на файл с выделенным кодом. Пример: 

<!-- Comp.vue -->
<template>
  <div></div>
</template>
<script lang="ts" src="./Comp.ts"></script>
<style lang="scss" src="./Comp.scss"></style>

Затем мы делаем следующее: 

// Comp.ts
import { Component } from "vue-property-decorator";

export const SOME_CONST = "SomeValue";

@Component
export class Comp extends Vue{
  public static method(): boolean {
    return true;
  }
}

export default Comp;

это работает для нас, и на самом деле производительность VSCode / Vetur / TypeScript намного лучше в этом смысле. Кроме того, когда пользователи UX работают с CSS / HTML, им не нужно трогать файл .ts.

...