Differentiating TypeScript classes is important in situations where they would normally be treated as equivalent

Question

Differentiating TypeScript classes is important in situations where they would normally be treated as equivalent

Looking to add a lightweight layer on top of Float32Array to create vec2 and vec3's. Check out the example below:

class vec3 extends Float32Array {
//    w : number;
    constructor() {
        super(3);
//        this.w = 1;
    }
    static add3(x: vec3) : vec3 {
        x[2] += 1;
        return x;
    }
};

class vec2 extends Float32Array {
    constructor() {
        super(2);
    }
    static add2(x: vec2) : vec2 {
        x[1] += 1;
        return x;
    }
};

var test1: vec3 = new vec3();
vec3.add3(test1);
console.log(test1);

var test2: vec2 = new vec2();
vec3.add3(test2);                       // Expect an error here
console.log(test2);

(Run code in TS playground here)

Typescript currently sees these classes as equivalent, hence allowing the vec3.add3(test2);

If I uncomment the line defining the w member variable, it correctly identifies them as distinct classes.

Any suggestions on how to distinguish between these two classes?

typescript

Answer 1

Answer №1

When it comes to Typescript, the default behavior involves structural typing. This means that if a class B is defined with public fields a and b, along with a method named bar, then any object containing fields a and b as well as a method called bar (with corresponding types) will be recognized as an instance of class B.

There is a notable exception in this framework. If a class contains a private field such as c, only instances of that specific class will be considered valid. Any other object with a field named

c</code would not match.</p>
<pre><code>class Point3D extends Float32Array {
  private __id: unknown = {};
  ...
}

class Point2D extends Float32Array {
  private __id: unknown = {};
  ...
}

Even though the structures of these two classes are identical and both have a field named __id, they are incompatible due to the private nature of the fields.

Answer 2

When it comes to Typescript, the default behavior involves structural typing. This means that if a class B is defined with public fields a and b, along with a method named bar, then any object containing fields a and b as well as a method called bar (with corresponding types) will be recognized as an instance of class B.

There is a notable exception in this framework. If a class contains a private field such as c, only instances of that specific class will be considered valid. Any other object with a field named

c</code would not match.</p>
<pre><code>class Point3D extends Float32Array {
  private __id: unknown = {};
  ...
}

class Point2D extends Float32Array {
  private __id: unknown = {};
  ...
}

Even though the structures of these two classes are identical and both have a field named __id, they are incompatible due to the private nature of the fields.

Answer 3

Answer №2

It seems achievable by deliberately inserting an error in the code that alters the class signature without impacting the structure size:

class vec3 extends Float32Array {
// @ts-ignore: unused member to keep the type unique
    __vec3_type : number;
    constructor() {
        super(3);
    }
    static add3(x: vec3) : vec3 {
        x[2] += 1;
        return x;
    }
};

class vec2 extends Float32Array {
// @ts-ignore: unused member to keep the type unique
    __vec2_type : number;
    constructor() {
        super(2);
    }
    static add2(x: vec2) : vec2 {
        x[1] += 1;
        return x;
    }
};

var test1: vec3 = new vec3();
vec2.add2(test1);
console.log(test1);

var test2: vec2 = new vec2();
vec3.add3(test2);                       // This should be an error
console.log(test2);

This method achieves the desired outcome without altering the object's size.

It appears to stem from TypeScript's preference for structural typing over nominal typing: https://www.typescriptlang.org/docs/handbook/type-compatibility.html

Answer 4

It seems achievable by deliberately inserting an error in the code that alters the class signature without impacting the structure size:

class vec3 extends Float32Array {
// @ts-ignore: unused member to keep the type unique
    __vec3_type : number;
    constructor() {
        super(3);
    }
    static add3(x: vec3) : vec3 {
        x[2] += 1;
        return x;
    }
};

class vec2 extends Float32Array {
// @ts-ignore: unused member to keep the type unique
    __vec2_type : number;
    constructor() {
        super(2);
    }
    static add2(x: vec2) : vec2 {
        x[1] += 1;
        return x;
    }
};

var test1: vec3 = new vec3();
vec2.add2(test1);
console.log(test1);

var test2: vec2 = new vec2();
vec3.add3(test2);                       // This should be an error
console.log(test2);

This method achieves the desired outcome without altering the object's size.

It appears to stem from TypeScript's preference for structural typing over nominal typing: https://www.typescriptlang.org/docs/handbook/type-compatibility.html

Answer 5

Answer №3

To create a generic class without any branding or double underscores, you can define a class that includes the number of dimensions as a property:

class Float32ArrayN<T extends number> extends Float32Array {
    constructor(public dimensions: T) {
        super(dimensions);
    }
}
const a = new Float32ArrayN(4)
a.dimensions // type: 4

const b: Float32ArrayN<3> = new Float32ArrayN(4) // error

Each class is now structurally unique because the dimensions property uses different literal number types. This allows you to extend and create subclasses like this:

class vec3 extends Float32ArrayN<3> {
    constructor() {
        super(3);
    }
    static add3(x: vec3) : vec3 {
        x[2] += 1;
        return x;
    }
};

class vec2 extends Float32ArrayN<2> {
    constructor() {
        super(2);
    }
    static add2(x: vec2) : vec2 {
        x[1] += 1;
        return x;
    }
};

This setup will throw errors if used incorrectly:

var test1: vec3 = new vec3();
vec3.add3(test1);
console.log(test1);

var test2: vec2 = new vec2();
vec3.add3(test2);             // error
console.log(test2);

var test3: vec3 = new vec2()  // error

Playground

Answer 6

To create a generic class without any branding or double underscores, you can define a class that includes the number of dimensions as a property:

class Float32ArrayN<T extends number> extends Float32Array {
    constructor(public dimensions: T) {
        super(dimensions);
    }
}
const a = new Float32ArrayN(4)
a.dimensions // type: 4

const b: Float32ArrayN<3> = new Float32ArrayN(4) // error

Each class is now structurally unique because the dimensions property uses different literal number types. This allows you to extend and create subclasses like this:

class vec3 extends Float32ArrayN<3> {
    constructor() {
        super(3);
    }
    static add3(x: vec3) : vec3 {
        x[2] += 1;
        return x;
    }
};

class vec2 extends Float32ArrayN<2> {
    constructor() {
        super(2);
    }
    static add2(x: vec2) : vec2 {
        x[1] += 1;
        return x;
    }
};

This setup will throw errors if used incorrectly:

var test1: vec3 = new vec3();
vec3.add3(test1);
console.log(test1);

var test2: vec2 = new vec2();
vec3.add3(test2);             // error
console.log(test2);

var test3: vec3 = new vec2()  // error

Playground

Differentiating TypeScript classes is important in situations where they would normally be treated as equivalent

Answer №1

Answer №2

Answer №3

Similar questions

Hide Angular Material menu when interacting with custom backdrop

Switching the checkbox state by clicking a button in a React component

Describing the Significance of a Component Value within the Document Object

What is the process of creating the /dist folder in an unreleased version of an npm package?

Is it considered best practice to include try/catch blocks within the subscribe function in RxJs?

Steps to Enable a Tooltip for FontAwesomeIcon in icon prop when the Tab is Disabled in Material UI and React

Is it possible to use Eclipse for debugging AngularJS and TypeScript code?

Ionic 3: Struggling to Access Promise Value Outside Function

Unable to successfully import { next } from the 'express' module using Typescript

Issue with Angular 12.1: Unable to retrieve value using "$event.target.value"

Ways to transfer selected options from a dropdown menu to a higher-level component

Ways to conceal the side menu upon logging out in Ionic 2

Converting a tagged union to a union type in Typescript can help streamline your code and

Creating a non-editable form or text field upon clicking the Submit button

React with TypeScript presents an unusual "Unexpected token parsing error"

Passing a generic type as a parameter in a generic class in TypeScript

The attribute 'loaded' is not found in the 'HttpSentEvent' data type

The parameter type '(req: Request, res: Response, next: NextFunction) => void' does not match the type of 'Application<Record<string, any>>'

After encountering an error, the puppeteer promptly shuts down the page

Is the naming convention for parameterized types (T, U, V, W) in Generics adhered to by Typescript?