Limit the utilization of toString through a TypeScript interface or type

Here's the interface I'm aiming for:

export interface Point {
  readonly x: number;
  readonly y: number;
  readonly toString: never;
}

I initially expected it to function this way:

const p: Point = {x: 4, y: 5}; // This should work fine
p.toString(); // Should trigger a typescript error

However, I encountered an error on the first line as well:

TS2322: Type '{ x: number; y: number; }' is not assignable to type 'Point'.
Types of property 'toString' are incompatible.
Type '() => string' is not assignable to type 'never'.

Is there a way to restrict the usage of toString within an interface without resorting to using type assertions like

const p: Point = {x: 4, y: 5} as Point;
all over the place?

In my current scenario, I am in the process of converting what was originally

class Point {
    x: number;
    y: number;
    toString() {
        return `${x} ${y}`;
    }
}

to objects defined by interfaces with helper functions:

interface Point {
    x: number;
    y: number;
}
function pointToString({x, y}: Point) {
    return `${x} ${y}`;
}

and I want attempts to call point.toString() in legacy code to throw an error, something that does not currently happen due to JavaScript objects having a default toString() method.

Answer №1

After some experimentation, I managed to achieve success using the unknown type:

type UndefinedObject = Record<keyof Object, unknown>;

interface Position extends UndefinedObject {
  readonly x: number;
  readonly y: number;
}

const pos: Position = {x: 4, y: 5}; // It works without any issues
pos.toString(); // TypeScript error occurs: Object is of type 'unknown'.

I decided to name it UndefinedObject since it resembles the concept found in plain JavaScript like this:

const obj = Object.create(null); // TypeScript infers type `any`
obj.x = 4;
obj.y = 5;
obj.toString(); // Fails during runtime, yet passes type check???

Here's a linked issue on GitHub related to TypeScript, but as far as I know, no one has suggested this particular solution there.

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

Error: Issue determining the type of variable. Unable to eliminate type 'any'

I am trying to load some widgets from a template object (possibly JSON in the future). Here's an example: type RectangleTemplate = { name: 'Rectangle'; props: { width: number; height: number; } }; type ButtonTemplate = { nam ...

When employing the pipe function within *ngFor, the webpage's refresh may vary, causing occasional updates

Utilizing angular2-meteor, I have already implemented pure: false. However, the pipe seems to be running inconsistently. For more details on the issue, please refer to my comments within the code. Thank you. <div *ngFor="#user of (users|orderByStatus) ...

Mandatory classification eliminates understanding of function type

I'm currently trying to transform an optional argument from one type into a required one in my type definition. However, I am encountering some difficulties and can't seem to figure out what I'm doing wrong in the process. Would appreciate a ...

AngularJS 2: Updating variable in parent component using Router

My current app.component looks like the following: import { Component, Input } from '@angular/core'; import {AuthTokenService} from './auth-token.service'; @Component({ selector: 'app-root', templateUrl: './app ...

Unable to bring in a TypeScript library that was downloaded from a GitHub fork repository

Currently, I am working on developing a GitHub app using the probot library. However, I have encountered an obstacle as outlined in this particular issue. It seems that probot does not offer support for ESM modules, which are crucial for my app to function ...

Enhance your FullCalendar experience with React by displaying extra information on your calendar

I am new to using React and FullCalendar, and I have a page layout similar to the image linked below. https://i.sstatic.net/MooTR.png Additionally, I have a list of events structured as shown: id: "9", eventId: "1", ...

The type 'Observable<boolean>' cannot be assigned to type 'Observable<UserRegistration>'

function completeRegistration(email: string, password: string, firstName: string, lastName: string, location: string): Observable<UserDetails> { let body = JSON.stringify({ email, password, firstName, lastName,location }); let headers = new H ...

Team members

Just started diving into Angular and practicing coding with it while following video tutorials. However, I've stumbled upon something in my code that has left me puzzled. I'm curious about the significance of the line "employees: Employee[]" in ...

Tips for converting each item within an array into its own separate element

https://i.sstatic.net/Dxj1W.pngI currently have an array of objects that I am utilizing to generate a table in Angular. The table is functioning properly and successfully displays the data. However, I now have a requirement to enable editing for each indiv ...

Is it possible that jest is unable to catch the exception?

I have a simple function that looks like this: function foo({ platform }) { if (platform === 'all') { throw new Error('Platform value can only be android or ios'); } return `${platform}`; } After writing unit tests, the re ...

Utilizing generic type and union types effectively in TypeScript

When initializing my class, I often pass in either a value or an object containing information about the value. For instance: new Field<string>('test') new Field<string>({value: 'test', inactive: 'preview'}) Howev ...

Troubleshooting problem with refreshing URL on "ionic serve" mode

After transitioning my project from Ionic 2 to Ionic 3, I've encountered an issue with ionic serve and the rebuilding process. Initially, when I build the project, everything functions as expected. However, I've noticed that the URL in the brows ...

Is there a way to create a Typescript function that can automatically return either a scalar or array value without requiring the caller to manually cast the output

Challenge Looking for a solution to the following problem: save<T>(x: T | T[]) { if (x instanceof Array) { // save array to database } else { // save entity to database } return x } // client code let obj: SomeType = { // values here ...

Using either prop type for a React component in Typescript

Looking to build a Table component that can either render data from a prop or accept custom rendering via children. In order to achieve this, I need a type that can handle both scenarios with either data or children. I've come across some solutions a ...

Guide on implementing a .catch method in Firebase's onSnapshot function

I have recently developed an Ionic Firebase chat application. I seem to be encountering an issue with setting up a query snapshot when initializing the message page. Here is the code snippet that I am using: ngOnInit() { this.messageService.getA ...

typescriptIs it possible to disregard the static variable and ensure that it is correctly enforced

I have the following code snippet: export class X { static foo: { bar: number; }; } const bar = X.foo.bar Unfortunately, it appears that TypeScript doesn't properly detect if X.foo could potentially be undefined. Interestingly, TypeScript ...

Merge the values of an object's key with commas

I'm dealing with an array of objects that looks like this: let modifiers = [ {name: "House Fries", price: "2.00"}, {name: "Baked Potato", price: "2.50"}, {name: "Grits", price: "1.50"}, {name: "Nothing on Side", price: "0.00"} ] My goal is to con ...

The attribute 'forEach' is not recognized on the data type 'string | string[]'

I'm experiencing an issue with the following code snippet: @Where( ['owner', 'Manager', 'Email', 'productEmail', 'Region'], (keys: string[], values: unknown) => { const query = {}; ...

The angular-CLI does not support the use of content delivery networks (CDNs) within the .angular-cli.json

Is there a way to make angular-cli recognize when we add any deployed URLs for styles or scripts using CDN? Currently, adding them to index.html works but adding to .angular-cli.json has no effect. Any workaround available? ...

The feature of Nuxt 3's tsconfig path seems to be malfunctioning when accessed from the

Take a look at my file structure below -shared --foo.ts -web-ui (nuxt project) --pages --index.vue --index.ts --tsconfig.json This is the tsconfig for my nuxt setup. { // https://v3.nuxtjs.org/concepts/typescript "exte ...