Unable to use TypeScript typings

I can’t find a typings file when I install Babylon using NPM 4.0.3 and I can’t type cast. All my variables have to be defined as any:

const line: any = Mesh.CreateLines('spellPointer', [
  new Vector3(0, 0, 1),
  new Vector3(30, 0, 1),
], scene);

what npm package did you install? have you tried the es6 version?

@RaananW my current babylon version is "babylonjs": "^4.0.3" and there’s no typings from what I can see.

I use TypeScript so I don’t understand how ES6 will help?

There’s a babylon.module.d.ts in the 4.0.3 npm package…

Did you explicitly import babylon in your code or do you want to use only the types and keep BJS as an external dependency ?

You don’t have to use the ES6 version, everything works fine with the ES2015 version 4.0.3 on npm.

  1. If you made an import * as BABYLON from "babylonjs" you are probably using webpack or rollup to build…If so what error did you get ?

  2. If you don’t want to import BABYLON explicitly but rather use it as an “ambient module”, you should set this in your tsconfig.json

    "compilerOptions": {
        "types" : [ "babylonjs"]

Hope this help !

1 Like

ES6 will help with tree shaking, code maintenance, and modern code. If you are happy with the way things are right now, you can, of course, continue using the es5 bundle.
I recommended that, because the ES6 package comes with native TypeScript support with no need for typing files, and also comes with source maps for a better debug process

1 Like

There is another NPM “@babylonjs/core” that fully supports typings:

Otherwise you can cast the result of the factory methods on MeshBuilder using ‘as’ keyword.

1 Like

That’s the ES6 package :grin:
Use it as much as you can. That would be my recommendation

@brianzinn awesome thanks I will check it out.

@RaananW I’m a little confused. To my understanding ES6 is for when you’re writing vanilla JS not TS? I mean if there’s a package that is for ES6 that has better TS support then cool but I was not making sense of you saying ES6?

@sharp I had already added the types but it never worked.

Definitely no babylon.module.d.ts in my install.

I don’t get any error I just can’t assign types to anything as they are “unknown”.

That’s actually a good question. And it is hard to answer in a few lines, but -

ES6 modules help typescript with structuring your code as well. It is not a huge bundled file with a lot of JS code, but many smaller files that are loaded only when you need them. This helps with reducing package size. And helps with delivery, and with compilation - the compiler doesn’t need to deal with huge 3MB files.
Alongside every single file in the es6 modules, there is a d.ts file specifically for this file. Native typing without the need for an extra package.

And when you use import in typescript, you are already using ES6. so why use es6, with an es5 bundle, when you can use es6 almost nativly?

And I know that the term ES6 is rather confusing. the idea is that we didn’t need a bundler (like webpack) to create this package. It is not necessarily a js module, but still using ES6 features that were not available before.

So, my recommendation stands - whenever you can, use the es6 modules, import the needed files only, and you will see that it will eventually be easier to develop. And more structured.

@Wancieho

I’m agree with @RaananW, whenever you can ES6 is better ! btw it would be interesting to make a pro and cons about ES5 vs ES6…So you should follow his advices, just to conclude with your initial problem with ES5 / typings

  1. You really should have a babylon.module.d.ts in your node_modules/babylonjs folder, without this file you will never have the types. Re-install, double check, etc. the file is in the npm package for sure.
  2. Also be carefull where you put the tsconfig.json file, it’s very important. In doubt put the file at the root of your project, in the same folder as your package.json and node_modules.
  3. If it still does not work, it comes from your IDE or your IDE settings

Once it’s done, switch to ES6 :face_with_monocle:

1 Like