Compatibility issues arise with static properties in three.d.ts when using the most recent version of TypeScript

When compiling three.d.ts (which can be found at this link) using the TypeScript develop branch, an error occurs with the following message:

Types of static property 'Utils' of class 'THREE.Shape' and class 'THREE.Path'
are incompatible

The issue arises because

  • Shape defines a static Utils class
  • Shape indirectly inherits from Curve
  • Curve also defines a static Utils class with a different signature compared to Shape.Utils

This violates the language specifications. In essence, the problematic code in three.d.ts looks something like:

declare class A {
   static Utils: {
      f (): any;
   }
}

declare class B extends A {
   static Utils: {
      // incompatible with A.Utils, without f(): any
      g (): any;
   }
}

Ignoring the debate about why the type of a static member needs to be compatible with that of an inherited static member with the same name - a rule not observed in other object-oriented languages but seemingly enforced in TypeScript - the focus is on resolving the compilation issue for three.d.ts.

One current workaround involves manually replicating the signature of Curve.Utils into Shape.Utils, ensuring structural extension between them. However, what is the correct method to accurately represent the signature of the original three.js file (found here) within a .d.ts file? Is this a case of improper inheritance implementation?

staticthree.jstypescript

Answer №1

In accordance with the specifications, Typescript does not support member hiding through inheritance, unlike C# which automatically allows it.

The language specifications section 8.2.3 describes this in detail.

A derived class inherits all members from its base class that are not overridden. Inheritance means that a derived class includes all non-overridden members of the base class. Private and public members are inherited, but only public members can be overridden. An overriding member in a derived class must have the same name and type (instance or static) as the member in the base class. It is required that the type of the overriding member must be a subtype of the type of the overridden member, otherwise a compile-time error will occur.

Additionally,

Static members of a base class can be overridden by static members of any kind in the derived class as long as their types are compatible.

It is possible that recent compiler updates have introduced some form of type checking that was previously missing...

Here is a suggested solution based on utilizing inheritance:

declare class UtilsA{
    f():any;
}
declare class UtilsB extends UtilsA{
    g():any;
}

declare class A {
   static Utils:UtilsA;
}

declare class B extends A {
   static Utils:UtilsB;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Long Waiting Time for the Ionic 2 Splash Screen

I've had struggles with the splash screen while developing several apps using ionic 2. The splash screen seems to take ages to disappear, and I understand that it's influenced by the number of plugins used and their response time. Is there a way ...

androidiosangulartypescriptionic2

What is the best way to utilize a React type as props for a custom component?

To make my component work properly, I am required to pass the inputmode as props from an external source. The acceptable values for <input inputMode=<valid values>> are outlined in the React types (node_modules@types\react\index.d.ts) ...

reactjstypescripttypes

How to invoke a method in a nested Angular 2 component

Previous solutions to my issue are outdated. I have a header component import { Component, OnInit } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; import { Observable } from 'rxjs/Observable'; ...

angulartypescriptangular2-components

Tips on validating interconnected strings with the help of yup within a react native environment

In my scenario, I am dealing with two date strings called start_date and end_date. Initially, both of these start off as empty strings: export interface FilterSchema { start_date?: any; end_date?: any; } const initialValues: FilterSchema = { s ...

javascriptreactjstypescriptreact-nativeyup

What is the best way to limit a property and template literal variable to identical values?

Instead of giving a title, I find it easier to demonstrate what I need: type Foo = "bar" | "baz"; interface Consistency { foo: Foo; fooTemplate: `${Foo} in a template`; } // This should compile (and it does) const valid1: Cons ...

typescripttypescript-typings

Error: Unable to locate the custom module - TS2307

We have recently taken over a Next + TypeScript website from another developer and are attempting to create a new component that is heavily based on an existing one. I have duplicated the entire component and its subfolders at the same level as the origina ...

reactjstypescriptnext.js

Choosing an item using the mouse - Three.js

I have a question that I need help with. I'm trying to change the color of an object when it's selected with the mouse, but the code I wrote doesn't seem to be working correctly. Here's what I have so far: <script> v ...

javascriptthree.jsmouseclick-event

Tips for effectively typing a collection of React wrappers in TypeScript

I encountered a situation in my team's application where we need the ability to dynamically compose component wrappers (HOCs) without prior knowledge of all the wrapper interfaces. This is mostly needed for swapping out context providers when renderin ...

reactjstypescripttuplestype-inferencereact-typescript

Using TypeScript, the fetch function cannot be assigned

Why am I encountering this TS warning? Type 'unknown' is not assignable to type 'PokemonList'.ts(2322) This issue is on line: "return e" Here is the code snippet: export interface PokemonList { count: number; next: stri ...

javascripttypescriptreact-native

Creating a TypeScript frozen set: A step-by-step guide

Imagine having a group of values that you want to protect from being edited, as shown below: // These values should not be editable. const listenedKeys = new Set(['w', 'a', 's', 'd']) // This value can be accessed w ...

typescript

Connecting an Angular 4 Module to an Angular 4 application seems to be causing some issues. The error message "Unexpected value 'TestModule' imported by the module 'AppModule'. Please add a @NgModule annotation" is

Update at the bottom: I am currently facing a massive challenge in converting my extensive Angular 1.6 app to Angular 4.0. The process has turned into quite a formidable task, and I seem to be stuck at a specific point. We have a shared set of utilities th ...

angulartypescriptnpmwebpack

The proper way to cancel useEffect's Async in TypeScript

I'm facing an issue with this straightforward example: useEffect(() => { axios.get(...).then(...).catch(...) }, [props.foo]) warning: can't perform a react state update on an unmounted component After some investigation, I found this ...

javascriptreactjstypescriptuse-effect

Please place the accurate image inside the designated box based on the corresponding ID number

I am currently working on a function that retrieves image data from a database and displays it in HTML using *ngFor directive. In order to display the correct image, I need to fetch the ID associated with the image data and use it to retrieve the correspo ...

angulartypescript

Issue with ngx-bootstrap custom typeahead feature malfunctioning

I'm facing an issue while trying to develop a customized typeahead feature that is supposed to search my API every time the user inputs something, but it's not functioning as expected. The autocomplete() function isn't even getting accessed. ...

twitter-bootstrapangulartypescriptngx-bootstrap

Creating Object of Objects in TypeScript: A Comprehensive Guide

Assuming I have a structure similar to this: interface Student { firstName: string; lastName: string; year: number; id: number; } If I intend to handle an array of these structures, I can simply specify the type as Student[]. Instead of utilizin ...

javascripttypescript

What is the recommended TypeScript type for the NextJS _app.tsx Component and pageProps?

Take a look at the default _app.tsx code snippet from NextJS: function MyApp({ Component, pageProps }) { return ( <Component {...pageProps} /> ) } The issue arises when transitioning to TypeScript, as ES6Lint generates a warning indicating t ...

javascriptreactjstypescriptnext.js

How can I retrieve a global variable in Angular that was initialized within an IIFE?

I'm a beginner in Angular, so I ask for your patience. Currently, I am in the process of migrating an app from Asp.net MVC5 to Angular. One of the key functionalities of this application involves connecting to a third-party system by downloading a Jav ...

javascriptangulartypescript

Explicit declaration of default parameters

Check out the helpful solution In regard to the following code snippet, type C = { a: string, b: number } function f({ a, b } = {a:"", b:0}): void { // ... } Can you explain the syntax for explicitly typing the default parameter? ...

typescriptecmascript-6

What is the reason behind taps in TypeScript only registering the first tap event?

One issue I am encountering is that only the first tap works when clicked, and subsequent taps result in an error message: Uncaught TypeError: Cannot read properties of undefined (reading 'classList') Here is the code I am using: https://codepen ...

javascripttypescriptpug

The conflicting definitions of identifiers in one file are at odds with those found in a

Currently, I am in the process of updating an aged component from Typescript version 6 to version 8. After making changes to the Jasmine dependencies listed in the package.json, a new error has been encountered: "There are conflicting definitions for th ...

angulartypescriptjasmine