Блог

Я объявляю переменную с типом any в начале моего <script> , а позже ссылаюсь на нее в одном из своих методов в этом же <script> . Моя среда разработки вообще не жалуется, но, к моему удивлению, я вижу ошибку во время выполнения в своей консоли: ReferenceError: flik is not defined .

Может быть, это как-то связано с условием гонки вокруг создания экземпляра переменной в течение жизненного цикла Vue? Это сбивает с толку, потому что у меня нет этой проблемы с использованием аналогичного шаблона в других местах. Что не так с моим кодом ниже?

 <script lang="ts">
import Flickity from "./widgets/Flickity.vue";

declare var flik: any

export default defineComponent({
  components: {
    Flickity
  },
  methods: {
    addElement() {
      flik = this.$refs.flickity    //ERROR HERE: flik is undefined
      flik.append(this.makeFlickityCell())
    },
    makeCell() {
      const cell = document.createElement('div');
      cell.className = 'carousel-cell'
      cell.textContent = "Hi"
      return cell
    }
  },
  mounted() {
    this.addElement()
  }
});
</script>
 

Я не вижу необходимости в declare здесь, которое фактически сообщает компилятору TypeScript, который flik уже объявлен в другом месте (например, это глобальный).

Просто используйте утверждение типа как any :

 (this.$refs.flickity as any).append(this.makeFlickityCell())