@programingBeginnerposted at 2022-03-13

引き算ができない

Q&A

解決したいこと

vue3,Typescriptを使用しています。
getBoundingClientRect()で取得した要素の位置を使って引き算をしたいのですができません。
解決方法を教えていただきたいです。よろしくお願いします。

発生している問題・エラー

オブジェクトは 'undefined' である可能性があります。

Object is possibly 'undefined'.

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

<div ref="slideRef" class="slide"></div>

const slideRef = ref<HTMLDivElement>(); //slideという要素を取得
const slidePosition = ref(slideRef.value?.getBoundingClientRect()); //slideの位置情報を取得

if(slidePosition.value?.right - slidePosition.value?.left === 50){
          console.log("a")
}
//slidePosition.value?.rightと、slidePosition.value?.leftに波線が出てそれぞれに上記2つのエラーが出ます。

自分で試したこと

slidePosition?.value?.rightにしてみましたが解決しませんでした。
調べてみてif文を使えばいいのかなと思ったのですが、使い方がわかりませんでした。

1Answer

@kazukinagata posted at 2022-03-13

slidePosition.value?.rightがundefinedだと演算できないので、以下のようにnumber型にする必要があります。leftも同様です。

const right = slidePosition.value?.right || 0

2Like

Comments

@programingBeginner
Questioner
回答ありがとうございます！
なるほど、演算させるためにnumber型にするのですね。
また、その方法として||演算子を使うのですね。私は今までオペランドが真偽値の場合の使い方しか知りませんでした。
上記の回答方法を試した結果、うまくいきました。
まだtsについての理解が浅く、オプショナルチェーンのことについても理解できていないので、もう少し勉強したいと思います。ありがとうございました！

Are you sure you want to delete the question?