Advice on cleaning up copied typescript from a library

0
votes

This is a request for advice on best practices + helping me understand what I'm doing.

I found the library react-google-calendar-api, npm installed it, and got it to work in my React project. I then decided I wanted to extend it (eg allow a user to see all their Google Calendars and use various CRUD calls on different calendars). I tried creating a separate file in my repo that imported the key class from the library (ApiCalendar) to try to write additional functions off of that, but that didn't work. (Question 0: should it have?)

So instead what I did is copy over the main file from the library into my own repo. After much futzing around (including installing typescript in my frontend React repo), I got to a point where the start of the file looked like this:

const scriptSrcGoogle = "https://accounts.google.com/gsi/client"
const scriptSrcGapi = "https://apis.google.com/js/api.js"


class ApiCalendar {
    tokenClient: google.accounts.oauth2.TokenClient | null = null;
    onLoadCallback: any = null;
    calendar: string = 'primary';
  
    constructor(public config: ConfigApiCalendar) {
...

This was throwing errors because it didn't recognize google (and also gapi, which appeared later in the file). My rough understanding is that google and gapi are defined in the scriptSrcGoogle and scriptSrcGapi defined at the top. So it should have worked.

And indeed it does as long as I tell Typescript to ignore the file, i.e. adding // @ts-nocheck to the top of the file makes everything work as if I was relying on the npm installed library.

To help deepen my understanding...

  1. Is this a fair way to 'extend' the library in a quick way? (I didn't want to clone the library and treat it as a library I created but would still have to npm install)
  2. Is there a better way to fix the problem with recognizing google and gapi aside from having Typescript ignore the whole file?
reactjstypescriptgoogle-client