useMagicKeys with the TS option "noUncheckedIndexedAccess" makes it impossible to use

[Ericlm]

Describe the bug

When using useMagicKeys, the issue arises as soon as we activate the noUncheckedIndexedAccess inside of tsconfig.

This option allows Typescript to make all index-based accesses undefinable : https://www.typescriptlang.org/tsconfig#noUncheckedIndexedAccess

The issue is that the return type of each of the magic key ref becomes ComputedRef<boolean> | undefined, and then make it impossible to use in any watch, watchEffect, or whenever for example.

Reproduction

https://github.com/Ericlm/vueuse-magic-issue

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1
    Memory: 190.52 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.8.0 - ~/.asdf/installs/nodejs/20.8.0/bin/node
    npm: 10.1.0 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 17.4.1
    Safari Technology Preview: 17.4
  npmPackages:
    @vueuse/core: ^10.9.0 => 10.9.0 
    vue: ^3.4.21 => 3.4.21

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[Ericlm]

As the result of useMagicKeys() is a Record, that's why it can be undefined. However, it's possible to use something like :

const keys = useMagicKeys()

const debugKeys = computed<boolean>(() => {
  if (typeof keys['A+N+V'] === 'undefined') return false
  return keys['A+N+V'].value
})

With this trick, we ensure a safe access to the record, so it's not a problem from the VueUse side 😃