Encountering a type error in ExcelJS/Angular while attempting to modify border settings

I am currently utilizing the excelJS library within an Angular 4 project. When attempting to modify the borders of a specific row using the following code snippet:

sheet.getRow(5).eachCell(cell => cell.border = {
    top: { style: 'thin' },
    left: { style: 'thin' },
    bottom: { style: 'thin' },
    right: { style: 'thin' }
});

An error is thrown by the Angular compiler stating:

Type '{ top: { style: string; }; left: { style: string; }; bottom: { style: string; }; right: { style: ...' is not assignable to type 'Partial<Borders>'.

Edit: I encountered a similar issue to that described in this question and the provided solution did not resolve it. It was suggested to simply run 

npm install --save-dev @types/exceljs
, but this also did not work for me. Instead, I found a workaround through this method. I added the following configuration to my tsconfig.json:

"compilerOptions": {
    "paths": {
      "exceljs": [
        "../node_modules/exceljs/dist/es5/exceljs.browser"
      ]
    },
excelangulartypescriptexceljs

Answer №1

After much consideration, I finally found a way to get this to work. However, the solution feels somewhat unconventional. I ended up using Object.assign as a workaround to bypass the compiler's types:

sheet.getRow(5).eachCell(cell => Object.assign(cell, {
    border: {
        top: { style: 'thin' },
        left: { style: 'thin' },
        bottom: { style: 'thin' },
        right: { style: 'thin' }
    })
});

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

Express and Angular 5 service worker facing compatibility issues

For the past couple of days, I've been struggling with my Angular5 service worker. However, after some investigation, I believe the issue lies in the way I am serving the application. If you're interested in the detailed journey leading up to thi ...

node.jsangularexpressservice-workerangular-service-worker

In Typescript, what is the antonym of "Choose"?

I'm attempting to create a custom type that can remove specific properties from an object, unlike the Pick utility. The desired functionality is as follows: type ObjectType = { key1: number, key2: string, key3: boolean, key4: num ...

typescript

I'm experiencing some difficulties utilizing the return value from a function in Typescript

I am looking for a way to iterate through an array to check if a node has child nodes and whether it is compatible with the user's role. My initial idea was to use "for (let entry of someArray)" to access each node value in the array. However, the "s ...

javascriptarraystypescript

The functionality of provideRouter and RouterConfig cannot be located in the updated @angular/router version 3.0.0-alpha.3^

Currently in the process of migrating an angular2 app to RC2 and experimenting with the router's version 3 alpha. Followed the setup provided by the angular docs for routing as demonstrated in the plunker. However, encountering the following errors: ...

angularjstypescriptangularnpmangular2-routing

Updating the sidebar component in Angular 11 post successful login

Recently, I delved into the world of Angular with a goal to learn more about its functionality. I encountered an issue with my sidebar component that remains static even after logging in: Click here to view my sidebar text Upon successful login, the regi ...

angulartypescript

When handling a document click event in Typescript, an error may occur where it cannot read

Just starting out with Typescript and diving into Angular, I am currently in the process of converting my project to the Angular system. However, I've hit a roadblock. I need to figure out how to close the dropdown content when the user clicks anywher ...

javascriptangulartypescript

Powerful data types for a method retrieving a value from an object

There is a function that retrieves a value by key from an object and provides suggestions of possible keys in the record when using it. This function also infers types from its arguments. function get<T extends Record<string, any>, K1 extends keyo ...

typescripttypescript-typings

Code to track the changes made to a specific cell in Google Sheets

I am currently collaborating on a file with multiple individuals and I would like to create a script that can identify the person who last modified a specific cell, along with the timestamp of when the modification occurred. All I need is the email address ...

javascriptexcelgoogle-apps-scriptgoogle-sheets

Guide for nesting components in Storybook using Angular

I am currently working with a folder structure that contains both my button and card components: https://i.sstatic.net/fNa0t.png To organize my components, I created a components.module.ts file and placed all my components in it. Then, I imported it into ...

angulartypescriptfrontendstorybookangular-storybook

What are the circumstances under which JavaScript GCP libraries return null values?

My current project involves working with GCP and Firebase using typescript. I have been utilizing the provided libraries, specifically version 8 of Firebase, and have encountered some unexpected behavior. For instance (firebase, ver. 8.10.1) import 'f ...

javascripttypescriptfirebasegoogle-cloud-platform

Select a randomly generated number from an array, which dynamically updates every time the browser is refreshed

I recently completed a project in Angular that utilizes the TMDB API. The project is nearly finalized, but I have a desire to implement a change where the background image (backdrop_path) and other elements shift each time the browser is reloaded. Curren ...

angulartypescriptapi

Choosing between types.ts and types.d.ts depends on the specific needs of your project

Understanding the purpose of a declaration file (d.ts) can be confusing as it serves multiple functions: Declaring types for JavaScript libraries utilized in TypeScript projects Enabling JavaScript libraries to be utilized by other TypeScript projects Ho ...

typescript.d.ts

Ionic router links not functioning properly

I am currently trying to set up a basic route in Ionic 7 using Angular. It was functioning as expected, but after the recent Ionic 7 update, it has stopped working. My goal is to navigate to the network page, but I'm encountering the following error: ...

angularionic-framework

Assigning individual IDs to form group fields - a step-by-step guide

I'm currently working with Angular and I have a requirement to track the id of each input field. Is there a method to assign a unique id for each form input similar to this? this.contactForm = this.formBuilder.group({ firstname: ['', {id: ...

javascriptangularformsformbuilderformgroups

Mat-Select now activates only upon clicking the bottom line

I recently incorporated Mat-Select from Angular material (TS) into my project and came across an interesting issue. The dropdown menu isn't opening unless I click on the bottom line of the mat-select component. In the past, when I worked with Mat-sele ...

angulartypescriptangular-material

Animating the background color within the Angular 4 side menu

In my quest to create an interactive user interface, I am looking to add animation effects to the background of my active element within a side menu. Here is the HTML code snippet I currently have: <ul> <li>Dashboard</li> ...

cssangular

The error message "HighCharts Sankey + NextJS: TypeError: Unable to access property 'Core/Series/Point.js' of undefined" occurred

I am attempting to display a Sankey chart from HighCharts using the HighCharts React library within a NextJS project. I have followed the steps outlined in HighChart's documentation to integrate the Sankey module, but I encounter an error on the page: ...

reactjstypescripthighchartsnext.jssankey-diagram

Adjust the dimensions of the ng2-charts to fit your needs

Is there a way to specify the width and height of a chart using ng2-charts? Specifically, I am working on a Bar chart similar to the one shown in the ng2-charts demo. public doughnutChartLabels:string[] = ['EMI', 'Car', 'Food&apos ...

angulartypescriptchart.jsng2-charts

Tips for identifying when a div reaches the top or bottom of the browser window in Angular 4

This question has solutions available for JQuery (which I prefer not to use in the current project) and Angular1 (which I am unfamiliar with). ...

angular

Angular 2 and its commitment

Currently, I am following the Angular 2 tutorial for the Hero App which includes a section on Http requests. You can find the tutorial here. In the hero.service.ts file, there is a method called getHeroes() that makes a call to the server: getHeroes(): ...

angularpromise