Angular struggles to process the mapped type modifiers in Typescript during compilation

In my node.js project, I have successfully implemented a custom mapped type as follows:

export type Mutable<T> = {
    -readonly [P in keyof T]: T[P];
};

However, when I tried to add the same code to an Angular 6 project, compilation failed with the following errors:

ERROR in src/assets/scripts/utils.ts(2,5): error TS1131: Property or signature expected.
src/assets/scripts/utils.ts(2,27): error TS1005: ']' expected.
src/assets/scripts/utils.ts(2,28): error TS1005: ';' expected.
src/assets/scripts/utils.ts(14,29): error TS1128: Declaration or statement expected.
src/assets/scripts/utils.ts(3,1): error TS1128: Declaration or statement expected.

I am wondering why this happens and how I can resolve it?

Any insights or solutions would be greatly appreciated!

angulartypescriptmodifiermapped-types

Answer №1

If you are running an outdated version of TypeScript (specifically 2.7 or earlier), please note that the feature to explicitly remove the readonly modifier was introduced in version 2.8. You can find more information about this update in the PR and on the Roadmap.

For those using older versions, there is a workaround to achieve the same result of removing readonly properties as explained here

type MutableHelper<T, TNames extends string> = { [P in TNames]: (T & { [name: string]: never })[P]};
type Mutable<T> = MutableHelper<T, keyof T>;

Answer №2

In the most recent release of 

@angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8deee1e4cdbeb7bbaf">[email protected]</a>
, it includes typescript@~2.7.2. It is worth noting that mapped type is a functionality introduced in @typescript@^2.8.

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

Customizing the Global Error Handler in Angular

Our project utilizes a global error handler to manage errors. However, we have encountered a unique scenario where we need to handle a specific case separately but are unable to do so. The global error handler is configured in the app.module.ts: { provide: ...

angular

Encountering issue while resolving flux/utils in webpack

My TypeScript OS project is in the process of being migrated to webpack, Unfortunately, I am currently facing a build error: ERROR in ./src/store/GigaStore.ts Module not found: Error: Cannot resolve module 'flux/utils' in /home/erfangc/GigaGrid ...

reactjstypescriptwebpackfluxts-loader

Run a script in a newly opened tab using the chrome.tabs.create() method

Struggling with executing a script using chrome.tabs.executeScript() in the tab created with chrome.tabs.create()? Despite searching for solutions, nothing seems to be working as expected. Check out my current code below: runContentScript(){ c ...

reactjstypescriptgoogle-chrome-extension

Guide to updating the d attribute of a path element in Angular 2

I've been working on an Angular2 Project and I have a service file that allows me to access data in my component's .ts file. class Coordinate { x:number; y:number; } class Data { ..... coordinates: Array<Coordinate>; ......... } M ...

angularsvgangular2-template

The state data is not being properly updated and is getting duplicated

While developing a loop to parse my API data, I encountered an issue where the values obtained were not being captured properly for dynamically loading corresponding components based on their characteristics. The problem arose after implementing useState() ...

reactjstypescriptmaterial-ui

Concealing the value of 'Zero' in an input field with TypeScript and Angular 2

<input type="text" class="form-control" id="transactionAmount" maxlength="10" HideZero="true" [(ngModel)]="userBalance.transactionAmount" ...

htmlangulartypescript

The UI in PrimeNG dropdown does not reflect changes made with patchValue()

Currently, I am working on a reactive form that includes a few fields - three dropdowns and one calendar. These fields are all PrimeNG components. Interestingly, all fields except for the project field successfully update their values in the user interface ...

angularprimeng

Creating a filter with Django Rest Framework and Angular 11 by utilizing multiple data values

I've been encountering difficulties with searching and filtering in my current project setup. The technologies I'm using include Django Rest Framework and PostgreSQL for the backend, as well as Angular 11 for the frontend. Here is a snippet of my ...

djangoangulardjango-rest-framework

Preserve Angular 2 service instances while navigating between routes

I am faced with a scenario where I have three components that are all utilizing the same DataService. This is not because they share the same data, but rather because they use the exact same methods and patterns: @Component({ templateUrl: './data ...

angularangular2-routing

Modify the size of the fabricjs text box to perfectly match the chosen text

I'm currently facing an issue with my code snippet that is supposed to create a new Textbox: new fabric.Textbox('Add some text') The problem I'm encountering is that the text box appears too small compared to its content: https://i.s ...

javascripttypescriptfabricjs

Modify capital letters to dashed format in the ToJSON method in Nest JS

I am working with a method that looks like this: @Entity() export class Picklist extends BaseD2CEntity { @ApiHideProperty() @PrimaryGeneratedColumn() id: number; @Column({ name: 'picklist_name' }) @IsString() @ApiProperty({ type: Str ...

javascriptnode.jstypescriptnestjsclass-transformer

The REST API seems to be functioning correctly when accessed through Postman, but there are issues when attempting to call

When I include @PreAuthorize("hasRole('ROLE_SUPER_ADMIN')") in my controller and make a call from Angular, it doesn't work. However, it works fine when called from Postman. @GetMapping("/getAllOrgniz") @PreAuthorize("hasRole('ROLE_SUPE ...

angularspring-bootspring-security

Unable to retrieve content in NGX-Quill upon submission

I am currently using "ngx-quill": "^14.3.0" along with "@angular/core": "~12.2.0". It is registered in the app module: QuillModule (not for root). And also in the lazy loaded module: QuillModule (not for root). public editor = { toolbar: [ ...

javascriptangularquillngx-quill

Routing static pages in Angular 2

I successfully created a static page using Angular 2. When I run ng serve and visit my page, it functions as intended. Specifically, I can navigate to a specific page by typing in the URL, such as www.mysite.com/resume. However, after uploading it to my si ...

javascriptangularangular2-routing

Is there a way to retrieve the value of an option passed by serverless CLI in serverless.ts file?

As I explored the serverless framework with serverless.ts for configuration, a certain question came to mind. When utilizing the serverless CLI, passing values can be done in the following way: serverless offline --stage prod In the serverless.yml file, ...

typescriptyamlserverless

The ng-model-options in Angular 2 is set to "updateOn: 'change blur'"

Currently working with angular 2, I am seeking a solution to modify the behavior of ngModel upon Enter key press. In angular 1.X, we utilized ng-model-options="{updateOn: 'change blur'}". How can this be achieved in angular 2? For reference, her ...

javascriptangularjsangulartypescript

Using NextJS to execute a Typescript script on the server

I am working on a NextJS/Typescript project where I need to implement a CLI script for processing files on the server. However, I am facing difficulties in getting the script to run successfully. Here is an example of the script src/cli.ts: console.log(" ...

typescriptnext.jsts-node

Error message in Spring Boot: Unable to display index page, error page not found

Currently, I am working on a web application that utilizes spring boot for the backend and angular2 for the frontend. However, when accessing a non-root URL, spring boot returns a whitelabel page since the servlet container is unaware of the angular routin ...

angularspring-boot

Can wildcard paths be imported in React using Typescript?

Is there a way to dynamically import a React Typescript Component from a wildcard path, similar to the following code snippet? const Component = loadable( () => import(`../../../src/**/*/${component_name}`), ); I have searched numerous solutions on ...

javascriptreactjstypescriptimportreact-typescript

The concept of 'this' remains undefined when using a TypeScript Property Decorator

I've been delving into TypeScript decorators focusing on properties, and I crafted the following snippet inspired by various examples: decorator.ts export function logProperty(target: any, key: string) { let val = this[key]; const getter = () ...

javascripttypescriptpropertiesthisdecorator