TypeScript beginner: how to compile TypeScript program that uses Babylon?

Questions
1

Hi,

I’m trying to convert an existing JavaScript program that I wrote into TypeScript. The program uses Babylon, and I’m at the stage where I’d appreciate stronger typing etc in the development process.

Babylon is developed in TypeScript, so this should be pretty easy, right?

So, I install node, and then TypeScript and Babylon:

sudo npm install -g typescript
sudo npm install --save babylonjs

I then create the following simple JavaScript program, which works fine in a browser. TypeScript is a superset of JavaScript, so this should also be valid TypeScript, right?

"use strict";

import * as BABYLON from 'babylonjs';

function BV3(v) {
	return new BABYLON.Vector3(v[0], v[1], v[2]);
}

function createScene(canvas) {
	let engine = new BABYLON.Engine(canvas, true);
	let scene = new BABYLON.Scene(engine);
	let camera = new BABYLON.ArcRotateCamera('camera', 0,0,0, BV3([0,0,0]), scene);
	camera.attachControl(canvas, false);
	return [engine, scene, camera];
}

function populateScene(canvas) {
	let [engine, scene, camera] = createScene(canvas);
	
	// Camera
	camera.position = BV3([0,0,5]);
	camera.lowerRadiusLimit = 2.0;

	// Light
	let light = new BABYLON.PointLight('light1', new BABYLON.Vector3(0,1,0), scene);
	light.intensity = 50.0;
	light.fallofftype = BABYLON.Light.FALLOFF_GLTF;

	// Populate scene
	let sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {segments:16, diameter:2}, scene);

	return [engine, scene, camera, light, sphere];
}

let canvas = document.getElementById('renderCanvas');
let [engine, scene, camera, light, sphere] = populateScene(canvas);

Okay, great! Let’s run it through the TypeScript compiler:

tsc -- init
tsc test.ts

Oh dear …

node_modules/babylonjs/babylon.module.d.ts:10953:9 - error TS2610: 'isCube' is defined as an accessor in class 'Texture', but is overridden here in     'ProceduralTexture' as an instance property.

10953         isCube: boolean;
              ~~~~~~

node_modules/babylonjs/babylon.module.d.ts:15453:13 - error TS2611: 'renderingGroupId' is defined as a property in class 'AbstractMesh', but is overridden here in     'InstancedMesh' as an accessor.

15453         get renderingGroupId(): number;
                  ~~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:21046:9 - error TS2610: 'isCube' is defined as an accessor in class 'Texture', but is overridden here in     'RenderTargetTexture' as an instance property.

21046         isCube: boolean;
              ~~~~~~

node_modules/babylonjs/babylon.module.d.ts:21093:9 - error TS2610: 'coordinatesMode' is defined as an accessor in class 'Texture', but is overridden here in     'RenderTargetTexture' as an instance property.

21093         coordinatesMode: number;
              ~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:36219:13 - error TS2611: 'environmentTexture' is defined as a property in class 'AbstractScene', but is overridden here     in 'Scene' as an accessor.

36219         get environmentTexture(): Nullable<BaseTexture>;
                  ~~~~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:39756:13 - error TS2611: 'upVector' is defined as a property in class 'TargetCamera', but is overridden here in     'ArcRotateCamera' as an accessor.

39756         set upVector(vec: Vector3);
                  ~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:47613:13 - error TS2611: 'updateGizmoRotationToMatchAttachedMesh' is defined as a property in class 'Gizmo', but is     overridden here in 'PositionGizmo' as an accessor.

47613         set updateGizmoRotationToMatchAttachedMesh(value: boolean);
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:47623:13 - error TS2611: 'scaleRatio' is defined as a property in class 'Gizmo', but is overridden here in     'PositionGizmo' as an accessor.

47623         set scaleRatio(value: number);
                  ~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:48902:13 - error TS2611: 'wrapU' is defined as a property in class 'RenderTargetTexture', but is overridden here in     'MultiRenderTarget' as an accessor.

48902         set wrapU(wrap: number);
                  ~~~~~

node_modules/babylonjs/babylon.module.d.ts:48907:13 - error TS2611: 'wrapV' is defined as a property in class 'RenderTargetTexture', but is overridden here in     'MultiRenderTarget' as an accessor.

48907         set wrapV(wrap: number);
                  ~~~~~

node_modules/babylonjs/babylon.module.d.ts:50300:13 - error TS2611: 'updateGizmoRotationToMatchAttachedMesh' is defined as a property in class 'Gizmo', but is     overridden here in 'ScaleGizmo' as an accessor.

50300         set updateGizmoRotationToMatchAttachedMesh(value: boolean);
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:50310:13 - error TS2611: 'scaleRatio' is defined as a property in class 'Gizmo', but is overridden here in 'ScaleGizmo'     as an accessor.

50310         set scaleRatio(value: number);
                  ~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:50616:13 - error TS2611: 'updateGizmoRotationToMatchAttachedMesh' is defined as a property in class 'Gizmo', but is     overridden here in 'RotationGizmo' as an accessor.

50616         set updateGizmoRotationToMatchAttachedMesh(value: boolean);
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:50626:13 - error TS2611: 'scaleRatio' is defined as a property in class 'Gizmo', but is overridden here in     'RotationGizmo' as an accessor.

50626         set scaleRatio(value: number);
                  ~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:57074:9 - error TS2610: 'coordinatesMode' is defined as an accessor in class 'BaseTexture', but is overridden here in     'HDRCubeTexture' as an instance property.

57074         coordinatesMode: number;
              ~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:58384:9 - error TS2610: 'coordinatesMode' is defined as an accessor in class 'BaseTexture', but is overridden here in     'EquiRectangularCubeTexture' as an instance property.

58384         coordinatesMode: number;
              ~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:84011:9 - error TS2610: 'isCube' is defined as an accessor in class 'Texture', but is overridden here in     'ProceduralTexture' as an instance property.

84011         isCube: boolean;
              ~~~~~~

node_modules/babylonjs/babylon.module.d.ts:88355:13 - error TS2611: 'renderingGroupId' is defined as a property in class 'AbstractMesh', but is overridden here in     'InstancedMesh' as an accessor.

88355         get renderingGroupId(): number;
                  ~~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:93695:9 - error TS2610: 'isCube' is defined as an accessor in class 'Texture', but is overridden here in     'RenderTargetTexture' as an instance property.

93695         isCube: boolean;
              ~~~~~~

node_modules/babylonjs/babylon.module.d.ts:93742:9 - error TS2610: 'coordinatesMode' is defined as an accessor in class 'Texture', but is overridden here in     'RenderTargetTexture' as an instance property.

93742         coordinatesMode: number;
              ~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:108413:13 - error TS2611: 'environmentTexture' is defined as a property in class 'AbstractScene', but is overridden     here in 'Scene' as an accessor.

108413         get environmentTexture(): Nullable<BaseTexture>;
                   ~~~~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:111828:13 - error TS2611: 'upVector' is defined as a property in class 'TargetCamera', but is overridden here in     'ArcRotateCamera' as an accessor.

111828         set upVector(vec: Vector3);
                   ~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:119183:13 - error TS2611: 'updateGizmoRotationToMatchAttachedMesh' is defined as a property in class 'Gizmo', but is     overridden here in 'PositionGizmo' as an accessor.

119183         set updateGizmoRotationToMatchAttachedMesh(value: boolean);
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:119193:13 - error TS2611: 'scaleRatio' is defined as a property in class 'Gizmo', but is overridden here in     'PositionGizmo' as an accessor.

119193         set scaleRatio(value: number);
                   ~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:120389:13 - error TS2611: 'wrapU' is defined as a property in class 'RenderTargetTexture', but is overridden here in     'MultiRenderTarget' as an accessor.

120389         set wrapU(wrap: number);
                   ~~~~~

node_modules/babylonjs/babylon.module.d.ts:120394:13 - error TS2611: 'wrapV' is defined as a property in class 'RenderTargetTexture', but is overridden here in     'MultiRenderTarget' as an accessor.

120394         set wrapV(wrap: number);
                   ~~~~~

node_modules/babylonjs/babylon.module.d.ts:121634:13 - error TS2611: 'updateGizmoRotationToMatchAttachedMesh' is defined as a property in class 'Gizmo', but is     overridden here in 'ScaleGizmo' as an accessor.

121634         set updateGizmoRotationToMatchAttachedMesh(value: boolean);
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:121644:13 - error TS2611: 'scaleRatio' is defined as a property in class 'Gizmo', but is overridden here in     'ScaleGizmo' as an accessor.

121644         set scaleRatio(value: number);
                   ~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:121914:13 - error TS2611: 'updateGizmoRotationToMatchAttachedMesh' is defined as a property in class 'Gizmo', but is     overridden here in 'RotationGizmo' as an accessor.

121914         set updateGizmoRotationToMatchAttachedMesh(value: boolean);
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:121924:13 - error TS2611: 'scaleRatio' is defined as a property in class 'Gizmo', but is overridden here in     'RotationGizmo' as an accessor.

121924         set scaleRatio(value: number);
                   ~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:127914:9 - error TS2610: 'coordinatesMode' is defined as an accessor in class 'BaseTexture', but is overridden here in     'HDRCubeTexture' as an instance property.

127914         coordinatesMode: number;
               ~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:129142:9 - error TS2610: 'coordinatesMode' is defined as an accessor in class 'BaseTexture', but is overridden here in     'EquiRectangularCubeTexture' as an instance property.

129142         coordinatesMode: number;
               ~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:143281:19 - error TS2583: Cannot find name 'Set'. Do you need to change your target library? Try changing the `lib`     compiler option to es2015 or later.

143281 type XRPlaneSet = Set<XRPlane>;
                         ~~~

node_modules/babylonjs/babylon.module.d.ts:143282:20 - error TS2583: Cannot find name 'Set'. Do you need to change your target library? Try changing the `lib`     compiler option to es2015 or later.

143282 type XRAnchorSet = Set<XRAnchor>;
                          ~~~

test.ts:21:9 - error TS2339: Property 'position' does not exist on type 'Engine | Scene | ArcRotateCamera'.
  Property 'position' does not exist on type 'Engine'.

21  camera.position = BV3([0,0,5]);
           ~~~~~~~~

test.ts:22:9 - error TS2339: Property 'lowerRadiusLimit' does not exist on type 'Engine | Scene | ArcRotateCamera'.
  Property 'lowerRadiusLimit' does not exist on type 'Engine'.

22  camera.lowerRadiusLimit = 2.0;
           ~~~~~~~~~~~~~~~~

test.ts:25:75 - error TS2345: Argument of type 'Engine | Scene | ArcRotateCamera' is not assignable to parameter of type 'Scene'.
  Type 'Engine' is missing the following properties from type 'Scene': _inputManager, cameraToUseForPointers, _isScene, _blockEntityCollection, and 531 more.

25  let light = new BABYLON.PointLight('light1', new BABYLON.Vector3(0,1,0), scene);
                                                                             ~~~~~

test.ts:27:8 - error TS2551: Property 'fallofftype' does not exist on type 'PointLight'. Did you mean 'falloffType'?

27  light.fallofftype = BABYLON.Light.FALLOFF_GLTF;
          ~~~~~~~~~~~

  node_modules/babylonjs/babylon.module.d.ts:17219:9
    17219         falloffType: number;
                  ~~~~~~~~~~~
    'falloffType' is declared here.

test.ts:30:85 - error TS2345: Argument of type 'Engine | Scene | ArcRotateCamera' is not assignable to parameter of type 'Scene'.
  Type 'Engine' is not assignable to type 'Scene'.

30  let sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {segments:16, diameter:2}, scene);
                                                                                       ~~~~~


Found 39 errors.

Hmmm. 39 errors, and most of them coming from “inside” Babylon rather than my own little test script.

Running npm list claims that I have babylonjs@4.1.0, and tsc --v says Version 4.0.2. I have the following in my tsconfig.json file:

"types": [
    "babylonjs",
],

Does anyone have any ideas where I’m going wrong here? I’m amazed this doesn’t work right off the bat, what with the Microsoft connection to both technologies and the fact that Babylon is developed in TypeScript.

Cheers!

2

You should install the 4.2 preview which is aligned with latest Typescript :slight_smile:

3

It doesn’t seem to help. :frowning:

To check in isolation of the rest of my system, I created the following Dockerfile:

FROM alpine:latest

RUN apk update

RUN apk add --update nodejs npm

RUN npm install -g typescript
RUN npm install --save babylonjs

And then checked the installed Babylon version:

$ docker run -it babtest /bin/sh
/ # npm list
/
`-- babylonjs@4.1.0

… which I think is the latest version?

I then tried to use this simple TypeScript file:

import * as babylon from "babylonjs";
console.log(babylon);

… and got basically the same errors again:

../node_modules/babylonjs/babylon.module.d.ts:10953:9 - error TS2610: 'isCube' is defined as an accessor in class 'Texture', but is overridden here in 'ProceduralTexture' as an instance property.

10953         isCube: boolean;
              ~~~~~~
... etc ...

I’m clearly being dumb here, but I’m not sure what to do to fix this!

4

Ahh, 4.2 - I see!

I’d written the above post before your edit. I’ll try that version!

5

This definitely looks like a version mismatch
we are developing with ts4 and bjs 4.2

6

Okay, we’re getting somewhere! :slight_smile:

npm install --save babylonjs@4.2.0-beta.3

And then:

node_modules/babylonjs/babylon.module.d.ts:156713:19 - error TS2583: Cannot find name 'Set'. Do you need to change your target library? Try changing the `lib`     compiler option to es2015 or later.

156713 type XRPlaneSet = Set<XRPlane>;
                         ~~~

node_modules/babylonjs/babylon.module.d.ts:156714:20 - error TS2583: Cannot find name 'Set'. Do you need to change your target library? Try changing the `lib`     compiler option to es2015 or later.

156714 type XRAnchorSet = Set<XRAnchor>;
                          ~~~


Found 2 errors.

I changed the “lib” entry in my tsconfig.json file to read "lib": ["es2015"], but the same two errors occur.

Thanks for the help!

7

Ok I guess @RaananW should now

8

Okay, this was PEBCAK!

I was trying to use tsc while passing in the path to the TypeScript file (e.g., tsc test.ts) which apparently results in tsc ignoring the modified tsconfig.json file in the current directory, and instead reverting to the compiler defaults?!?

Who on earth designed this thing? :rofl:

Thanks for the help, Deltakosh - I appreciate you taking the time to guide me through this!

1 Like
9

haha…No worries :smiley: