Need for utilizing a decorator when implementing an interface

I am interested in implementing a rule that mandates certain members of a typescript interface to have decorators in their implementation.

Below is an example of the interface I have:

export interface InjectComponentDef<TComponent> {
  // TODO: How can I restrict this to only allow properties decorated with @Input()
  inputs: Partial<TComponent>, // & { @Input() [key: string]: any } my attempt to enforce decorator, invalid syntax 
  //... 
};

In the following class example, I aim to prevent the inclusion of the notAnInput property in an InjectComponentDef.inputs implementation:

export class MyComponent {
   public @Input() isAnInput: string;
   public notAnInput: string;
}
...
let x: InputComponentDef<MyComponent> =
{
    inputs: {
        isAnInput:'all good',
        notAnInput:'no good', // I want this to throw a compile time error because it is not decorated with @Input
    }
}

Is there a way to achieve this in typescript at compile time?

Answer №1

According to information sourced from the TypeScript documentation:

During runtime, the class decorator expression is executed as a function, receiving the constructor of the adorned class as its sole argument.

Furthermore:

The decorators ultimately translate into a function that will be invoked at runtime with details regarding the decorated declaration.

From this description, it seems that decorators are not intended for usage during compilation. Even though there may be workarounds to make them function in that context, such an approach could be deemed incorrect from a design standpoint.

To sum up, your scenario seems to involve a situation that cannot be effectively validated during compile time.

Consider why enforcing @Input() is necessary. Perhaps allowing a child object to independently set data for notAnInput might be entirely valid based on your specific requirements.

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

Is there a method or alternative solution for deconstructing TypeScript types/interfaces?

Imagine a scenario where a class has multiple type parameters: class BaseClass<T extends T1, U extends U1, V extends V1, /* etc. */ > Is there a method to consolidate these type arguments in a way that allows for "spreading" or "destructuring," sim ...

Error message: "Unable to find a windows instance" encountered while conducting tests on Paho MQTT Client using mocha and typescript

After spending countless days searching online, I have yet to find any resources on testing the Paho MQTT Client. My approach so far has been somewhat naive, as shown below: import { suite, test, slow, timeout, skip, only } from 'mocha-typescript&apo ...

Developing with Electron JS and TypeScript - Leveraging TS-Node in the primary process

Is there a way to modify the code below in order for the electron main process to utilize Typescript by using ts-node? "scripts": { "shell": "cross-env NODE_ENV=development electron ts-node ./app/main.ts" } ...

Leveraging the injectable service within the end callback function alongside interactJS

When using interactJS with Angular to enable drag and drop functionality for elements with the 'draggable' class, everything was working smoothly until I encountered an issue with using the injected service of the component in the callback functi ...

Retrieve an enumeration from a value within an enumeration

In my coding project, I have an enum called Animals and I've been working on a function that should return the value as an enum if it is valid. enum Animals { WOLF = 'wolf', BADGER = 'badger', CAT = 'cat', } cons ...

Encountering an "Undefined property" error in Angular when trying to read a property, even though the json-p

manager.ts export interface Manager { id: number; name: string; employees: Array<Employee>; } employee.ts export interface Employee { id: number; fullName: string; } managers.component.ts export class ManagersComponent implem ...

Angular checkbox filtering for tables

I have a table populated with data that I want to filter using checkboxes. Below is the HTML code for this component: <div><mat-checkbox [(ngModel)]="pending">Pending</mat-checkbox></div> <div><mat-checkbox [(ngModel ...

Consecutive HTTP requests in Angular using rxjs

Currently working on a function that utilizes concatMap to perform sequential HTTP calls, such as adding a person, using the returned information to add a contact, and then adding some accounts. This function takes in a list (in my case, portfolios) and f ...

Strategies for managing the "ref" property of Material-UI component props within our custom components

I have a unique custom component setup as shown below: // ... import { PaperProps, styled } from '@mui/material'; type ComponentProps = PaperProps & { a: string, b: string }; export const MyPaper = styled(Paper)(/* ... */); const Compo ...

Guide to dynamically setting the index element with ngFor in Angular

When working with NgFor in Angular, I am interested in dynamically handling attributes using an index. I have a collection of properties/interfaces that look like this: vehicle1_Name, vehicle2_Name, vehicle3_Name vehicle4_Name, totalVehCount To achieve t ...

The specified type '{ flag: boolean; }' cannot be assigned to the type 'IntrinsicAttributes & boolean'

Just delving into TypeScript and I've hit a snag when trying to pass an element to another component. Feeling lost on how to proceed. Error lurking in Cards component export default function MySpecialProject() { const [toggle, setToggle] = useState ...

Address aliases in the webpack configuration file

When utilizing webpack, it is possible to write the configuration file using TypeScript. However, it is crucial to ensure that any alias paths present in the config file are resolved to their mapped paths. It should be noted that this pertains specificall ...

Steps to properly specify the Express Error Type

When defining the variable err, I have opted to use any due to uncertainty about the correct type. I was anticipating an express.Error type, but none was found. What would be the appropriate way to assign a type to err? // Addressing Syntax Error in JSON ...

Angular2 app fails to update after emitting an event

I need help with a child component responsible for updating phone numbers on a webpage. The goal is for the application to automatically display the changed phone number once the user hits the 'save' button. Here's a visual of how the appli ...

Can someone explain the distinction between 'return item' and 'return true' when it comes to JavaScript array methods?

Forgive me for any errors in my query, as I am not very experienced in asking questions. I have encountered the following two scenarios :- const comment = comments.find(function (comment) { if (comment.id === 823423) { return t ...

NextJS API Generator for OpenAPI specifications

In my NextJS project, we utilize the /api path to implement our API, with an openapi.yaml file defining the interface. To generate the API client successfully, we run the following command: openapi-generator-cli generate -i data/api/openapi.yaml -o src/api ...

Typescript -> In a React Native project, the type of 'value' is classified as 'unknown'

While working on converting a JS file to TS within my react native project, I encountered an issue that I am struggling to resolve. The problem arises when the value['flag'] is displaying an error message stating 'value' is of type &apo ...

Circular referencing in Angular models causes interdependence and can lead to dependency

I'm facing a dependency issue with the models relation in my Angular project. It seems to be an architecture problem, but I'm not sure. I have a User model that contains Books, and a Book model that contains Users. When I run this code, I encoun ...

Create a d.ts file for Vue components that are written using Typescript

As a newcomer to Vue, I am eager to dive into creating components and publishing packages to NPM. My plan is to develop Vue (typescript) + Vuetify reusable components that can be easily installed from NPM into any of my projects. While I have successfully ...

Adjusting canvas height in Storybook - Component does not fit properly due to low canvas height

I had a component that I needed to add to Storybook. It was working fine, but the styling was slightly off. I managed to resolve this by adding inline styling with position: absolute. Here is how it looks now: const Template: any = (args: any): any => ( ...