How to rewrite type defination of third party library in vue project created by create-vue

Question

I have a vue project using cesium library, following the update of cesium, some errors occur.

My code:

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

Error:

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:

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

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

But in fact the function handles the absence of the roll attribute:

// Part of javascript source code, handles default value
// of 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);

So the type defination should be:

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

I want to rewrite this type in my vue project without using patch-package, how should I do?

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

---

SOME UPDATE

cesium library type defination structure:

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

And there are too many classes and functions so that the file size is about 2MB. What I want is rewrite setView() function's type and keep other work as normal.

Answer 1

Since you said it is after an update, it would be recommended to wait for fixed version or stay in previous version imo. But you can declare types in any typescript project quite easily.

Using global namespace, you can declare in the file which is using the function:

declare global {
  interface cesium{
    setView: CustomType
  }
}

If the usage is in multiple places, it would be better to follow below method

1. Edit your tsconfig file to use the typeRoots property. You should include both the node_modules/@types directory, as well as your custom directory:

{
     "compilerOptions": {
         ...
         "typeRoots": [ "./types", "./node_modules/@types"]
      }
}

This means that your project will first check your “types” folder before searching in node_modules/@types. Note that this directory should be at the root of your project!

2. Add that root folder to the exclude property in the tsconfig file as well, so it will not get compiled:

{
      "compilerOptions": {},
      "exclude": ["node_modules", "types", ...]
}

3. Create the file:

types/cesium/index.d.ts

5. Add your type definition.

declare module cesium
{
setView: ....
}

Reference for second method here