Vue 3 Composition API - Object 可能是“null”

Question

我正在使用Vue 3 Composition api和Typescript來使用HammerJS package實現捏合縮放。

我正在嘗試按照 CodePen JavaScript中編寫的一個工作示例： https://codepen.io/bakho/details/GBzvbB在 Vue 中實施。

然而，當我試圖讓它在我的 Vue 應用程序中工作時遇到了一些問題，我不確定如何解決它。

以下是以下錯誤：

// Object is possibly 'null'.
imageContainer.value.offsetWidth;

// Object is possibly 'null'.
imageContainer.value.appendChild(displayImage);

// Object is possibly 'null'.
imageContainer.value.addEventListener...

這是完整的源代碼：

<template>
  <h1>Image Zoom</h1>
  <div class="imageContainer" ref="imageContainer"></div>
</template>

<script lang="ts">
import Hammer from "hammerjs";
import { defineComponent } from "vue";
import { ref } from 'vue';

export default defineComponent({
  setup() {
    const imageUrl = "https://source.unsplash.com/random";
    const imageContainer = ref(null)

    let minScale = 1; let maxScale = 4; let imageWidth : any; let imageHeight : any; let containerWidth : any;
    let containerHeight : any; let displayImageX = 0; let displayImageY = 0; let displayImageScale = 1;
    let displayDefaultWidth : any; let displayDefaultHeight 
    let rangeX = 0; let rangeMaxX = 0; let rangeMinX = 0;
    let rangeY = 0; let rangeMaxY = 0; let rangeMinY = 0;

    // let displayImageRangeY = 0;

    let displayImageCurrentX = 0;
    let displayImageCurrentY = 0;
    let displayImageCurrentScale = 1;

    function resizeContainer() {
      containerWidth = imageContainer.value.offsetWidth;
      containerHeight = imageContainer.value.offsetHeight;
      if (displayDefaultWidth !== undefined && displayDefaultHeight !== undefined) {
        displayDefaultWidth = displayImage.offsetWidth;
        displayDefaultHeight = displayImage.offsetHeight;
        updateRange();
        displayImageCurrentX = clamp(displayImageX, rangeMinX, rangeMaxX);
        displayImageCurrentY = clamp(displayImageY, rangeMinY, rangeMaxY);
        updateDisplayImage(
          displayImageCurrentX,
          displayImageCurrentY,
          displayImageCurrentScale
        );
      }
    }
    resizeContainer();

    function clamp(value, min, max) {
      return Math.min(Math.max(min, value), max);
    }

    function clampScale(newScale) {
      return clamp(newScale, minScale, maxScale);
    }

    const displayImage = new Image();
        displayImage.src = imageUrl;
        displayImage.onload = function(){
        imageWidth = displayImage.width;
        imageHeight = displayImage.height;
        imageContainer.value.appendChild(displayImage);
        displayImage.addEventListener('mousedown', e => e.preventDefault(), false);
        displayDefaultWidth = displayImage.offsetWidth;
        displayDefaultHeight = displayImage.offsetHeight;
        rangeX = Math.max(0, displayDefaultWidth - containerWidth);
        rangeY = Math.max(0, displayDefaultHeight - containerHeight);
    }

    imageContainer.value.addEventListener('wheel', e => {
        displayImageScale = displayImageCurrentScale = clampScale(displayImageScale + (e.wheelDelta / 800));
        updateRange();
        displayImageCurrentX = clamp(displayImageCurrentX, rangeMinX, rangeMaxX)
        displayImageCurrentY = clamp(displayImageCurrentY, rangeMinY, rangeMaxY)
        updateDisplayImage(displayImageCurrentX, displayImageCurrentY, displayImageScale);  
    }, false);

    function updateDisplayImage(x, y, scale) {
        const transform = 'translateX(' + x + 'px) translateY(' + y + 'px) translateZ(0px) scale(' + scale + ',' + scale + ')';
        displayImage.style.transform = transform;
        displayImage.style.webkitTransform = transform;
        displayImage.style.transform = transform;
    }

    function updateRange() {
        rangeX = Math.max(0, Math.round(displayDefaultWidth * displayImageCurrentScale) - containerWidth);
        rangeY = Math.max(0, Math.round(displayDefaultHeight * displayImageCurrentScale) - containerHeight);
        
        rangeMaxX = Math.round(rangeX / 2);
        rangeMinX = 0 - rangeMaxX;

        rangeMaxY = Math.round(rangeY / 2);
        rangeMinY = 0 - rangeMaxY;
    }

    const hammertime = new Hammer(imageContainer);
    hammertime.get('pinch').set({ enable: true });
    hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });

    hammertime.on('pan', ev => {  
        displayImageCurrentX = clamp(displayImageX + ev.deltaX, rangeMinX, rangeMaxX);
        displayImageCurrentY = clamp(displayImageY + ev.deltaY, rangeMinY, rangeMaxY);
        updateDisplayImage(displayImageCurrentX, displayImageCurrentY, displayImageScale);
    });

    hammertime.on('pinch pinchmove', ev => {
        displayImageCurrentScale = clampScale(ev.scale * displayImageScale);
        updateRange();
        displayImageCurrentX = clamp(displayImageX + ev.deltaX, rangeMinX, rangeMaxX);
        displayImageCurrentY = clamp(displayImageY + ev.deltaY, rangeMinY, rangeMaxY);
        updateDisplayImage(displayImageCurrentX, displayImageCurrentY, displayImageCurrentScale);
    });

    hammertime.on('panend pancancel pinchend pinchcancel', () => {
        displayImageScale = displayImageCurrentScale;
        displayImageX = displayImageCurrentX;
        displayImageY = displayImageCurrentY;
    }); 

    return {};
  },
});
</script>

<style>
.imageContainer {
  width: 96%;
  height: 96%;
  max-width: 800px;
  max-height: 600px;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: #2b2b2c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.imageContainer > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  cursor: move;
  touch-action: none;
}
</style>

誰能告訴我出了什么問題，為什么會導致這個Object is possibly 'null'

Answer 1

所以這是該錯誤的原因：

• const imageContainer = ref(null) -> 您將值設置為null和 TypeScript 警告您訪問該 object 的屬性可能會引發錯誤，因為初始值為null並且因為您正在嘗試在模板中使用ref元素可以存在，也可以不存在。

• const imageContainer = document.querySelector('.imageContainer') -> 您正在查詢存在或不存在的 HTML 元素，這意味着您還可以獲得null作為值，而 TypeScript 再次警告您可以訪問該元素的屬性object 可以拋出錯誤

解決方案：

• 您必須實際從setup function 返回imageContainer變量，以便 Vue 將其與模板中的ref綁定，並且可以在onMounted function 內部訪問該變量，因為它是一個ref ，這意味着它尚未安裝到 DOM 中。 在 Vue.js 組件生命周期中created和mounted掛鈎之前調用setup ，您無權訪問那里的任何 DOM 內容。

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const imageContainer = ref(null)

    onMounted(() => {
      // here you access imageContainer variable
    })

    return {
      imageContainer 
    }
  }
}

Answer 2

這是一個 Typescript 錯誤。 問題是您沒有處理變量為 null 的可能性。您需要做的就是正確定義類型並處理 null 的情況。 閱讀 Vue 文檔中的Typing ref以了解我的意思。

以下是您的案例的一些示例：

// Define the ref as an HTMLElement or null
const imageContainer = ref<HTMLElement | null>(null);

...

// Set the width/height based on the imageContainer, or use 0 if it is null.
containerWidth = imageContainer.value?.offsetWidth ?? 0;
containerHeight = imageContainer.value?.offsetHeight ?? 0;

...

// Only call appendChild/addEventListener if the ref is not null.
imageContainer.value?.appendChild(displayImage);

如果在出現錯誤的地方應用此方法，則應該可以解決問題。