typescript - How can I make the tsserver language server and vue-tsc aware of my global type modifications in my index.d.ts file

admin管理员组

文章数量:1357121

Edit: I have also tried following the vue documentation and moving the vue type modification into router.ts in my types folder but that did not resolve the issue.

I have a Nuxt 3 project using typescript.

I am using an index.d.ts file in my root directory to globally modify various module types. My goal is to add the contents of my own custom type MyCustomInterface to the Nuxt interface PageMeta and the Vue interface RouteMeta, so they can be passed into a function elsewhere in my code that is typed like so:

function myTypedFunction<DataT extends MyCustomInterface>(data: DataT) {
    // some very cool but irrelevant code
}

// example usage in nuxt middleware
export default defineNuxtRouteMiddleware(
  (to) => {
    // ...

    const myValue = myTypedFunction(to.meta);

    // ...
  },
);

index.d.ts excerpt

// It is always important to ensure you import/export something when augmenting a type
export {};

// modifies the typing for Page metadata
declare module '#app' {
  interface PageMeta {
    extraData?: string[];
    extraData2?: string[];
  }
}

declare module 'vue-router' {
  interface RouteMeta {
    extraData?: string[];
    extraData2?: string[];
  }
}

MyCustomInterface definition in general.ts in my types folder

export interface MyCustomInterface {
  extraData?: string[];
  extraData2?: string[];
}

The problem is that both the vscode tsserver and vue-tsc are complaining that RouteMeta (the type of to.meta in the middleware) has no properties in common with MyCustomInterface but when I connect to my local dev server running the project anyway it is obvious that the data is there and can be forcefully accessed and the code works just fine when I pass the RouteMeta instance into the function.

So it seems to me like tsserver and vue-tsc either aren't aware of my index.d.ts changes, or my changes are bad. Can someone help me make sure that tsserver and vue-tsc are aware of my index.d.ts changes?

Edit: I have also tried following the vue documentation and moving the vue type modification into router.ts in my types folder but that did not resolve the issue.

I have a Nuxt 3 project using typescript.

I am using an index.d.ts file in my root directory to globally modify various module types. My goal is to add the contents of my own custom type MyCustomInterface to the Nuxt interface PageMeta and the Vue interface RouteMeta, so they can be passed into a function elsewhere in my code that is typed like so:

function myTypedFunction<DataT extends MyCustomInterface>(data: DataT) {
    // some very cool but irrelevant code
}

// example usage in nuxt middleware
export default defineNuxtRouteMiddleware(
  (to) => {
    // ...

    const myValue = myTypedFunction(to.meta);

    // ...
  },
);

index.d.ts excerpt

// It is always important to ensure you import/export something when augmenting a type
export {};

// modifies the typing for Page metadata
declare module '#app' {
  interface PageMeta {
    extraData?: string[];
    extraData2?: string[];
  }
}

declare module 'vue-router' {
  interface RouteMeta {
    extraData?: string[];
    extraData2?: string[];
  }
}

MyCustomInterface definition in general.ts in my types folder

export interface MyCustomInterface {
  extraData?: string[];
  extraData2?: string[];
}

The problem is that both the vscode tsserver and vue-tsc are complaining that RouteMeta (the type of to.meta in the middleware) has no properties in common with MyCustomInterface but when I connect to my local dev server running the project anyway it is obvious that the data is there and can be forcefully accessed and the code works just fine when I pass the RouteMeta instance into the function.

So it seems to me like tsserver and vue-tsc either aren't aware of my index.d.ts changes, or my changes are bad. Can someone help me make sure that tsserver and vue-tsc are aware of my index.d.ts changes?

• typescript
• vue.js
• nuxt.js

Share Improve this question Follow edited Mar 27 at 22:11 sam whittle asked Mar 27 at 21:59 sam whittlesam whittle 12111 silver badge1010 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The simplest solution to this problem I have found is manually importing the modified type and type casting the data to it.

So in this case I want to pass in the to.meta from my Nuxt middleware into the typed function. tsserver and vue-tsc are both telling me that to.meta is of the vue-router type RouteMeta which has been modified in my index.d.ts. So i adjusted my middleware to look like this:

import type { RouteMeta } from "vue-router";

// global authorization middleware that runs on every route to check if user is entitled to be there
export default defineNuxtRouteMiddleware(
  (to) => {
    // ...

    const myValue = myTypedFunction(to.meta as RouteMeta);

    // ...
  },
);

I am typecasting from RouteMeta to RouteMeta, which feels redundant and unnecessary, but it does solve the compilation and language server issues.

本文标签：