Tips for modifying the type definition of a third-party library in a Vue project built with Create-Vue

After updating the Cesium library in my Vue project, I encountered some errors.

This is the code snippet:

camera.setView({
  destination,
  orientation: { heading, pitch }
})

The error message reads:

Type '{ heading: number; pitch: number; }' is not assignable to type 'HeadingPitchRollValues | DirectionUp | undefined'.
Property 'roll' is missing in type '{ heading: number; pitch: number; }' but required in type 'HeadingPitchRollValues'.

The function signature is as follows:

setView(options: {
  destination?: Cartesian3 | Rectangle;
  orientation?: HeadingPitchRollValues | DirectionUp;
  endTransform?: Matrix4;
  convert?: boolean;
}): void;

export type HeadingPitchRollValues = {
  heading: number;
  pitch: number;
  roll: number;
};

However, the function can work without the 'roll' attribute:

// JavaScript source code snippet that handles default values for heading, pitch, and roll
scratchHpr.heading = defaultValue(orientation.heading, 0.0);
scratchHpr.pitch = defaultValue(orientation.pitch, -CesiumMath.PI_OVER_TWO);
scratchHpr.roll = defaultValue(orientation.roll, 0.0);

To resolve this issue, the type definition should be modified to:

setView(options: {
  destination?: Cartesian3 | Rectangle;
  orientation?: Partial<HeadingPitchRollValues> | DirectionUp;
  endTransform?: Matrix4;
  convert?: boolean;
}): void;

I am looking for a way to update this type in my Vue project without resorting to 'patch-package'. Any suggestions?

My repository: https://github.com/Gu-Miao/learn-cesium


SOME UPDATE

The structure of the Cesium library's type definitions:

declare module 'cesium' {
  // ...some classes and functions
  export class Camera {
    // ...some properties
    setView(options: {
      destination?: Cartesian3 | Rectangle
      orientation?: HeadingPitchRollValues | DirectionUp
      endTransform?: Matrix4
      convert?: boolean
    }): void
  }
}

Due to numerous classes and functions, the file size is approximately 2MB. My goal is to modify only the type of the 'setView()' function while keeping everything else intact within the library.

Answer №1

After acknowledging that the issue occurred after an update, it is advisable to either wait for a fixed version or revert to the previous one in my opinion. However, you can easily declare types in any TypeScript project.

By using the global namespace, you can declare within the file where the function is being used:

declare global {
  interface cesium{
    setView: CustomType
  }
}

If the usage is spread across multiple locations, it would be more efficient to implement the following method:

  1. Modify your tsconfig file to utilize the typeRoots property. Include both the node_modules/@types directory and your custom directory:
{
     "compilerOptions": {
         ...
         "typeRoots": [ "./types", "./node_modules/@types"]
      }
}

This arrangement ensures that your project will prioritize searching in your “types” folder before venturing into node_modules/@types. Remember that this directory should be located at the root of your project!

  1. Also, add that root folder to the exclude property in the tsconfig file to prevent it from being compiled:
{
      "compilerOptions": {},
      "exclude": ["node_modules", "types", ...]
}
  1. Next, create the file:
types/cesium/index.d.ts
  1. Include your type definition
declare module cesium
{
setView: ....
}

For more information on the second approach, refer to this resource.

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

Optimizing row performance for Angular grids in the Chrome browser

When creating a component that includes a table with numerous rows, everything works well with small amounts of data. However, once the item count reaches 2000 or more, it starts lagging. Scrolling and animations become sluggish. Even after trying to impl ...

Tips for choosing and unchoosing rows in angular 6

I am looking to extract the values from selected rows and store them in an array. However, I also need to remove a row from the result array when it is deselected. The issue with my current code is that every time I click on a row, the fileName values are ...

When fetching data from the API in Angular, the response is displayed as an object

After fetching data from the API, I am encountering an issue where the "jobTitle" value is not displaying in the table, but instead appears as an array in the console. Can someone assist me with resolving this problem? Below is the visibility.ts file: exp ...

Error: The parameter should be a string, not an object

I am having trouble with a function that is supposed to return a string but instead, it returns an object. Unfortunately, I cannot use the .toString() method either. currentEnvironment: string = "beta"; serverURL: string = this.setServerURL(this.currentEnv ...

The box shadow feature does not function properly when the position is set to sticky

Applying position sticky to th and td in the example below seems to be causing issues with the box shadow not working. Can anyone provide insights on why this is happening? <div class="overflow-x-auto lg:overflow-visible"> <div> <t ...

Tips for efficiently deconstructing JSON arrays, objects, and nested arrays

I'm attempting to destructure a JSON file with the following structure: [ { "Bags": [ { "id": 1, "name": "Michael Kors Bag", "price": 235, "imgURL" ...

TypeScript encountered an error with code TS2305, stating that the module "constants" does not have any exported members

My Vite + React + TypeScript application has the following structure: src constants a.ts b.ts index.ts components Comp.tsx tsconfig file with "baseUrl": "src" The content of a.ts is as follows: export const ARRAY = ...

The distinction between storing data and component data becomes apparent when using Vuex in conjunction with a persisted state

Below is my post.js file in the store directory: import axios from 'axios' import createPersistedState from "vuex-persistedstate" export default { namespaced: true, state: { sample_data: 'Welcome!!', l ...

Using $gte and $lt to search within a range in mongoDB can be tricky when dealing with data types in typescript

Whenever I try to search by range of dates using $gte and $lt, I encounter issues with types. The types for my model are as follows: export interface IOneStoreCa { magId: number, caTtc?: number, marge?: number, } export interface ICa { _id: string ...

Executing a method in Vue.js watch function

When it comes to coding, I have a method that looks like this: <select class="section" @change="showIndex($event.target.selectedIndex)"> <option v-for="number in 50">{{ number}} per page</option> &l ...

Issue with Discord.js (14.1) - Message Handling Unresponsive

After developing a sizable Discord Bot in Python, I decided to expand my skills and start learning JS. Despite thoroughly studying the documentation and comparing with my original Python Bot regarding intents, I am facing difficulties getting the message ...

`How can I trigger a Child Component method to refresh upon clicking a Button in the Parent Component using Vue JS?`

In a form field within the Parent Component, there is a submit button along with a select option. When the User changes the select option, it should pass that value to trigger a method/function in the child component. I want the child function to be automa ...

Tips for troubleshooting and debugging a Vue.js application using the Chrome browser

Recently, I decided to implement Vue.js as a templating tool for my Meteor app. However, when attempting to debug the code on Chrome browser, I encountered an issue where I couldn't locate the debugger pointer. It appears that debugging isn't fun ...

I am faced with a challenge involving an asynchronous function and the best approach to executing it synchronously

I devised the following plan: // Primary Function to Follow // Capture necessary local data // Transform into required editable format // Iterate through user's local images // Append image names to converted d ...

"Using VueJS to allow for easy data editing directly from a table and redirect

I currently have 3 pages set up for my project: 1- The first page is a list displaying all the data in a table format. 2- The second page allows me to add new data (currently using dummy data in the code). 3- The third page is supposed to be an edit page, ...

Certain files in the HTML report generated by ESLint may not display any output

When using eslint to generate an HTML report, I am encountering some issues. Within my package.json, the configuration is as follows: "eslint-html": "eslint --format html ./src/* -o ./dist/eslint/index.html", The resulting report in the file ./dist/esli ...

Linting: Add "`··` eslint(prettier/prettier)" to a project using React with TypeScript and Styled Components

I'm facing a challenge with conflicting rules between Eslint and Prettier in my React project that uses TypeScript and Styled Components. When working in VSCode, I keep getting this error message: "Insert ·· eslint(prettier/prettier)" T ...

Accessing information from RESTful Web Service with Angular 2's Http functionality

I am currently working on retrieving data from a RESTful web service using Angular 2 Http. Initially, I inject the service into the constructor of the client component class: constructor (private _myService: MyService, private route: Activat ...

The input value fails to update after the method is called

I am working on developing a todo-list application and here is the code I have so far: HTML: <div class="divPadder"> <input ref="makePlaceholderEmpty" class="inputBoxSize" type="text" :placeholder="placeholder"v-model="task"> <ul> ...

Encountering a clash in Npm dependencies

I have been involved in a Vue project where I utilized Vue Cli and integrated the Typescript plugin. However, I encountered multiple vulnerabilities that need to be addressed. When I executed npm audit fix, it failed to resolve the dependency conflict: npm ...