What is the method for extracting only TypeScript types from the threeJs package?

Question

What is the method for extracting only TypeScript types from the threeJs package?

I am in the process of developing a front-end application using Webpack with threeJs functionality integrated. Previously, I would refrain from bundling threeJs to keep the size small by utilizing the threeJs UMD from a CDN link in my index.html file. Despite this approach, I made use of the @types/three package for typing purposes.

Unfortunately, the @types/three package has since been deprecated. The current version of three now includes its own modularized types. However, I am facing difficulty in isolating and utilizing the three package solely for its types without inadvertently including the extensive threeJs codebase in my bundle.

Any helpful suggestions or solutions would be greatly appreciated.

typescript webpack three.js

Answer 1

Answer №1

Initially, it was marked as outdated, but now @types/three is back in action. The transition back to DefinitivelyTyped took place in January 2021.

To incorporate the types, simply execute the following command:

npm install -D @types/three

Answer 2

Initially, it was marked as outdated, but now @types/three is back in action. The transition back to DefinitivelyTyped took place in January 2021.

To incorporate the types, simply execute the following command:

npm install -D @types/three

Answer 3

Answer №2

Latest Update

Changes have been made since the initial post and the method described below is no longer required. Please refer to the new accepted solution for a simpler approach. The original answer is retained here for historical purposes.

Previous Solution

If you are using Webpack, my recommendation is:

Add three as a project dependency to continue development with access to included types,
Exclude it from being bundled with your application using Webpack's Externals feature.

The externals option helps in preventing certain packages from being bundled and fetches them at runtime instead.

By following the example demonstrated in the documentation, your configuration would resemble the following:

index.html

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r106/three.min.js">
</script>

webpack.config.js

module.exports = {
  //...
  externals: {
    three: 'three'
  }
};

This setup retains the dependencies on three, ensuring that code such as the one provided below continues to function correctly:

import { Scene } from 'three';

const scene = new Scene();

Answer 4

Latest Update

Changes have been made since the initial post and the method described below is no longer required. Please refer to the new accepted solution for a simpler approach. The original answer is retained here for historical purposes.

Previous Solution

If you are using Webpack, my recommendation is:

Add three as a project dependency to continue development with access to included types,
Exclude it from being bundled with your application using Webpack's Externals feature.

The externals option helps in preventing certain packages from being bundled and fetches them at runtime instead.

By following the example demonstrated in the documentation, your configuration would resemble the following:

index.html

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r106/three.min.js">
</script>

webpack.config.js

module.exports = {
  //...
  externals: {
    three: 'three'
  }
};

This setup retains the dependencies on three, ensuring that code such as the one provided below continues to function correctly:

import { Scene } from 'three';

const scene = new Scene();

What is the method for extracting only TypeScript types from the threeJs package?

Answer №1

Answer №2

Latest Update

Previous Solution

Similar questions

Zod offers the flexibility to customize validation for optional keys

Dealing with TypeScript errors TS2082 and TS2087 when trying to assign an Away3D canvas to a variable

Utilizing Three.js in combination with Laravel - Encounter the error: "Require is not

What causes *ngIf to display blank boxes and what is the solution to resolve this problem?

Refresh the context whenever the state object changes

Enhancing Test Components with Providers in "React Testing Library": A Step-by-Step Guide

Utilizing StyleFunctionProps within JavaScript for Chakra UI Enhancements

Error message in Angular2 for production build with webpack: "Unable to load app/app.component.html"

Encountering unexpected errors with Typescript while trying to implement a simple @click event in Nuxt 3 projects

What is the method for implementing a custom layout for the items within a Select component?

Error: The specified property is not found in type 'never' - occurring with the ngFor loop variable

Where should the API call be placed in the app.component to halt the system until the response is received and injected into the body, instead of using ngOnInit?

Efficiently managing desktop and mobile pages while implementing lazy loading in Angular

Search for records in MySQL using Typeorm with the condition "column like %var%" to retrieve results containing the specified

Resolving NestJS Custom Startup Dependencies

Is there a way to instruct Alexa/Jovo to incorporate just one render document in its response?

JS- Catching Errors Inside and Outside

Next.js allows for the wrapping of a server component within a client component, seamlessly

Instructions on declaring a Typescript variable that will only be assigned once in the future

Warning: Potential spacing issues when dynamically adjusting Material UI Grid using Typescript