I cannot compile from TypeScript my old and new examples after updating NPM and TypeScript

Hello, new forum!

When I update NPM and TypeScript, I cannot compile my old and new examples.

Errors with BabylonJS 3.3.0

C:/Users/8Observer8/AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts:4147:14 - error TS2687: All declarations of ‘fullscreen’ must have identical modifiers.

4147 readonly fullscreen: boolean;
~~~~~~~~~~

node_modules/babylonjs/babylon.d.ts:252:5 - error TS2687: All declarations of ‘fullscreen’ must have identical modifiers.

252 fullscreen: boolean;
~~~~~~~~~~

node_modules/babylonjs/babylon.d.ts:303:14 - error TS2717: Subsequent property declarations must have the same type. Property ‘orientation’ must be of type ‘ScreenOrientation’, but here has type ‘string’.

303 readonly orientation: string;
~~~~~~~~~~~

Found 3 errors.

Yep this is a known issue with typescript. When they shipped 3.1, they broke backward compatibility.

We provided a work around in 4.0 so I will suggest just to use it as a good fix:)

1 Like

Is there is way to fix this without using the v4 which is still in alpha or reverting to TS version <3.1?

I will start using BJS when it will support TypeScript. Three.js supports TS better now. Please, let me know when BJS will be support TS.

Typescript has always been supported by Babylon. Our latest version has even been migrated to modules to support modern development workflows. The biggest advantage of Babylon is the typings is directly created from the typescript sources alongside each build keeping them always in sync.

@8Observer8 what makes you think it is not supported ? if so I probably need to update some documentations.

1 Like

We do support typescript as we are using typescript to create Babylon.js :slight_smile:

The problem is that TS does not give a shit about backward compatibility.

BTW you can definitely move to bjs 4.0 (which is built with TS 3.3.3) as it is more stable already than bjs 3.3

1 Like

I mean that BabylonJS 3.3.0 does not support TS 3.3.3333.

Okay guys, I will explain you a problem step by step. For example, I am a programmer who uses TS. I want to use BJS with TS. What I will make first? I will make these steps:

  1. I will install BJS. I will google for example: babylon.js types npm And I will see that @type/babylonjs is deprecated.

  2. I will try to find the answer on the official website in the documentation: https://doc.babylonjs.com/ If I will be lucky I will see the gray “TypeScript” button. I see that you added this line and it is good:

If you prefer using npm/webpack see https://doc.babylonjs.com/features/npm_support

  1. I will type this command: npm install --save babylonjs

  2. I will read that I need to add “babylonjs” in the “types” section of the “tsconfig.json” file:

tsconfig.json

{
    "compilerOptions": {
        "outDir": "dist",
        "sourceMap": false,
        "target": "es5",
        "types": [
            "babylonjs"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}
  1. I have a few “.ts” files and I will expect that if I will type the “tsc” then I will get the success compilation. But I see these errors:

C:/Users/8Observer8/AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts:4147:14 - error TS2687: All declarations of ‘fullscreen’ must have identical modifiers.

4147 readonly fullscreen: boolean;
~~~~~~~~~~

node_modules/babylonjs/babylon.d.ts:252:5 - error TS2687: All declarations of ‘fullscreen’ must have identical modifiers.

252 fullscreen: boolean;
~~~~~~~~~~

node_modules/babylonjs/babylon.d.ts:303:14 - error TS2717: Subsequent property declarations must have the same type. Property ‘orientation’ must be of type ‘ScreenOrientation’, but here has type ‘string’.

303 readonly orientation: string;

I will wait when I will be able to install Babylon.js 4.0 using this command:

npm install babylonjs --save

Or it is better using this command:

npm i -D @types/babylon.js

Because it is a general way to get type definitions. I want to use CDN and I want to install types for BJS only. I can spend 2 MBytes for “.d.ts” but not 17 Bytes for another files from the “node_modules/babylonjs” folder. I should delete all files (except “babylon.d.ts”) from the “node_modules/babylonjs” folder because I will not use them.

Personally, I don’t think it is a big deal to just install the latest Preview. It helps with development, as you can spot issues and I have yet to see any. Upgrading is easy with npm.

I was originally using ThreeJS but was getting some really weird issues as well as frustrated with the hacks that had to be done to get some of the examples working. BabylonJS feels more complete to me and even more feature rich. I don’t think ThreeJS had much GUI stuff, as I had to create my own when using it, where as in BJS, most of the set up was already there.

I believe ThreeJS has the same issues as well, as the main branch wasn’t TS friendly until the demand became more apparent. I had to install other packages to get the typings working.

Just throwing in some more thoughts from someone who has used both.

1 Like

For a lot of typescript based packages, typings are including in the package also please note you do not need to reference the type manually if you are relying on imports in your code. This is only a required step if you are using namespaces/global in your code.

We do not want to manage a separate @types as it is not necessary (already in the core packages) and they can fall out of sync easily.

About the 3.3.0 version, yes it does not support the latest typescript but it is due to a back compat issue on their side and knowing 4.0 will be out in a month I do not think it is necessary to recreate a 3.3.1.

1 Like

I made the solution that is optimal for me. I will describe it here. Maybe it will useful for somebody and I will not forget it. It is very important to know how to create a project with a few TS files. I do not like use: Webpack, Gulp, Grunt and so on. Because they require a lot of disk space on my laptop for my little examples. I create a lot of examples when I study something. For example, Gulp requires 80 MB. If I have 100 examples in TS then I will lost 800 MB. I use Browserify for creating a bundle that I can use in the browser. And I use UglifyJS to minify this bundle. You can install them only once using this commands:

npm install browserify -g
npm install uglify-js -g

Generate the “package.json” file using this command:

npm init -y

For example, you have two files with names “Program.ts” and “Game.ts”. Open the “package.json” file and add these lines in the “scripts” section:

"scripts": {
    "browserify": "browserify dist/Program.js -o dist/bundle.js",
    "uglifyjs": "uglifyjs dist/bundle.js -o dist/bundle.min.js",
    "build": "tsc && npm run browserify && npm run uglifyjs"
},

You can generate the “bundle.min.js” using this command:

npm run build

You can read here https://doc.babylonjs.com/ this information:

The example project below uses the most recent release of BabylonJS via the BabylonJS CDN, so you don’t need to download BabylonJS locally in order to use it.

However, you will need to download the BabylonJS TypeScript definition file from https://preview.babylonjs.com/babylon.d.ts in order to compile your project. Save this babylon.d.ts file into your project folder and create an empty index.html like so:

I want to keep all “.d.ts” files in the separate folder with the name “typings”. I can add this line of code to the “tsconfig.json” folder for this:

"types": [
    "./typings/babylon"
]

You need to add two “script” tags to the “index.html”:

<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="dist/bundle.min.js"></script>

I will show the “Program.ts” file. Another part of the example you will find here: https://doc.babylonjs.com/

Source Code: official-example-bjs-ts.zip (393.4 KB)

Program.ts

import { Game } from "./Game";

class Program
{
    public static Main()
    {
        // Create the game using the 'renderCanvas'.
        let game = new Game('renderCanvas');

        // Create the scene.
        game.createScene();

        // Start render loop.
        game.doRender();
    }
}

window.onload = () =>
{
    Program.Main();
}
2 Likes

Thanks a lot for your report!

1 Like

Yes i agree with u i had similar problems make it work
Started coding again on my solutions though mby this time i make it work =)

1 Like

I posted my step-by-step instruction from message above on GameDev: BabylonJS. Usage TS in Browser - My instructions and examples - GameDev.net

I solved my problem. The solution is here: Debug, Release, Playground using BabylonJS and TypeScript

1 Like