WebXR typescript support

Question

I want to experiment with webxr and have setup a typescript project. According to WebXR

I should do the following:

const supported = await navigator.xr.isSessionSupported('immersive-vr');

With my typescript setup navigator.xr is displayed as error.

I wonder how to setup typescript for webxr. My tsconfig looks like this:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "esNext",
        "target": "es6",
        "allowJs": true,
        "moduleResolution": "node"
    },
    "exclude": [
        "./node_modules"
    ],
}

Answer 1

You need to add definitions for WebXR, such as these ones. Something like running: npm install --save-dev @types/webxr and then importing the types:

import type { Navigator } from 'webxr';

Related:

• Using WebXR Types
• The definition source

Answer 2

Install typings for webxr with npm i -D @types/webxr in your command line.

Then import XRSystem in your ts file with import type { XRSystem } from 'webxr'; (Take care about the type word in the import).

Then call xr with:

const xr = (navigator as any)?.xr as XRSystem;
xr.requestSession('immersive-vr', {optionalFeatures: ['hand-tracking']})