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"
    ],
}

score 7 · Accepted Answer · answered Jan 18 '21 at 09:21

7

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';

Dominic Cooney

6,317
1
26
38

1

Awesome, I just needed to install the package, the types were added to the global scope. – chantey Jul 12 '22 at 22:58

score 3 · Answer 2 · answered Jul 17 '21 at 19:55

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']})

WebXR typescript support

2 Answers2