vue typescript ref引用报可能为null

Question

 <template>
    <input ref="inputRef" type="file" class="upload-input" @change="changeFile" />
</template>

<script lang="ts">
    import { defineComponent, ref } from "vue";
    export default defineComponent({
        setup() {
            const inputRef = ref<null | HTMLInputElement>(null);
            const uploadFile = () => {
                inputRef.value?.click();
            };
            const changeFile = () => {
                const file = inputRef.value.files[0];
            };
            return {
                inputRef,
                changeFile
            };
        }
    });
</script>

const file = inputRef.value.files[0];这个地方总是报对象可能为null，加了!或者强转类型都不行，只有使用any，但是使用any类型检查就没了，这个哪位大佬能帮忙看下

Answer 1

const inputRef = ref<null | HTMLInputElement>(null); 这一句过后 inputRef.value 就是 null 啊，所以提示信息并没有问题。

既然 inputRef.value 可能是 null，那么 inputRef.value.files 就有可能取不到，这里要考虑 null 的情况。而且就算 inputRef.value 不是 null 的时候，inputRef.value.files 也有可能是空或者空数组 ——

const file = inputRef.value?.files?.[0]

如果 .files 可以保证不是 undefined 或者 null，[0] 前不需要 ?.，但是 files[0] 仍然有可能是 undefined。

这样就可以了，不过 file 有可能是 undefined 哦