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

Oops! An unhandled promise error occurred when trying to fetch a URL with a status of 0. The response received has a status code of

I keep encountering an error whenever I try to hit a post request URL: Error: Uncaught (in promise): Response with status: 0 for URL: null at c (http://localhost:8100/build/polyfills.js:3:19752) at c (http://localhost:8100/build/polyfills.js:3:1 ...

Bidirectional binding with complex objects

In my Angular2 app, I have a class called MyClass with the following structure: export class MyClass { name: Object; } The name object is used to load the current language dynamically. Currently, for two-way binding, I am initializing it like this: it ...

Vue JS: When Computed Properties Fail to Trigger

I am currently using Vue.js and have implemented a computed property stored within my vuex. The issue I am facing is that when I add an item to the array, the watcher does not trigger. However, upon logging the item, it is indeed present. computed:{ ...

Learn how to verify changing form inputs with Vue watchers. The challenge of numbers

Currently, I am working on a sum application and encountering some challenges with input validations. I have implemented Watcher to handle the validations, and I am exploring the possibility of adding sound and color feedback for accurate validation. Repo ...

Updating a data value in Vue3 also updates the corresponding prop

Not sure if this is standard behavior, I'm fairly new to Vue, but it's really frustrating. Hopefully someone here can shed some light on what's going on... Here's my code snippet: props: [ 'asset', //--- asset.price = 50 ...

Creating a radial progress chart using Plotly JavaScript

I recently started working with the Plotly library and now I need to display a circular progress graph in Vuejs 2, like the one shown below. While Plotly is a comprehensive tool, I have not come across an example that matches this specific design using Ja ...

What is the best way to utilize v-model with an array of strings in a Vuex store when using v-for

Encountered an issue while trying to set a value in an Array within the Vuex Store: VueCompilerError: v-model cannot be used on v-for or v-slot scope variables because they are not writable. Seeking alternatives to achieve this without creating a local co ...

Tips for utilizing slot scope effectively in vuejs 2.5.x

I've been attempting to incorporate the slot-scope feature in our Vue application (using the older syntax v2.5.x): https://v2.vuejs.org/v2/guide/components-slots.html#Scoped-Slots-with-the-slot-scope-Attribute but it doesn't seem to be functionin ...

Is the return type determined by the parameter type?

I need to create an interface that can handle different types of parameters from a third-party library, which will determine the return type. The return types could also be complex types or basic types like void or null. Here is a simple example demonstra ...

Thoroughly verifying API responses in RTK Query with Zod schema

I am seeking to verify the API response I receive from a REST API by utilizing a Zod schema. As an illustration, I possess this user schema along with the corresponding API import { z } from 'zod'; import { createApi, fetchBaseQuery } from ' ...

"Troubleshooting: PrimeVue DataTable Not Displaying Proper

Attempting to utilize PrimeVue and implement the DataTable Component, but it is not appearing. It seems to be an issue related to $slots error? The Button component is rendering and functioning as expected. Table.vue <template> <div> ...

Vue.js plugin goes unnoticed. The error "ReferenceError: jQuery is not defined at eval" arises

I have a Vue 3 project that I am working on and recently tried incorporating the bootstrap-material-datetimepicker library into it. Here is how I included it in my Vue component file: <template> <div> <!-- --> </div> ...

Issue encountered while trying to iterate through an observable: Object does not have the capability to utilize the 'forEach' property or method

I am currently following the pattern outlined in the hero.service.ts file, which can be found at this link: https://angular.io/docs/ts/latest/guide/server-communication.html The Observable documentation I referenced is available here: When examining my c ...

Adding an event listener to the DOM through a service

In the current method of adding a DOM event handler, it is common to utilize Renderer2.listen() for cases where it needs to be done outside of a template. This technique seamlessly integrates with Directives and Components. However, if this same process i ...

What is the best method for iterating through an array and generating a glossary list organized by categories?

I have an array filled with definitions. How can I use Vue.js to iterate through this array and create a glossary list organized by letters? Desired Output: A Aterm: A definition of aterm B Bterm: A definition of bterm C Cterm: A definition of cterm ...

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 ...

Receive the most recent information from Angular's service method

I offer a unique service. handler.ts import { Observable,of,Subject } from 'rxjs'; import { PlayerService } from "./../../core/services/player.service"; import { Injectable } from "@angular/core"; import { DeezerService } from "../services/deez ...

Using TypeScript, Material UI introduces a new property to the primary object on the palette

Experimenting with the customization of MUI v5 theme has been a fun challenge in my current project. I have successfully tailored the theme to suit my requirements so far, but now I am faced with the task of adding a new property to the primary object defi ...

The reference to Vuex's this.$store is not defined

I am currently learning Vue with Vux and Vuetify. I have successfully installed it using Vue CLI. Following the documentation, I attempted to access the store but encountered an 'undefined' error for this.$storage. Here is the code snippet from ...

The Battle of Identifiers: Named Functions against Anonymous Functions in TypeScript

When it comes to performance and performance alone, which option is superior? 1) function GameLoop() { // Performing complex calculations requestAnimationFrame(GameLoop); } requestAnimationFrame(GameLoop); 2) function GameLoop() { // ...