I\'ve seen this answered before, but they don\'t seem to cover this specific use case (or they don\'t work/help)
import {Route} from \'vue-router\';
export con
I came across this when typing a rootReducer, in case anyone else is doing the same. I was importing typed reducers that were composed of other types (state, actions) that I had not also exported.
Short answer: export all your action and state types from the reducers!
Composite types seem not to work to well when their parts are not also exported and you rely on type inference. In this case, inferring the type of the rootReducer (which would be too much to explicitly type if you have more than just a few reducers).
const rootReducer = combineReducers({ typedReducerA, typedReducerB, ... }
Apparently this is the solution to my problem:
import {Route, RouteConfig} from 'vue-router';
export const detailRoute: RouteConfig = {
path: '/detail/:id',
component: Detail,
props: (route: Route) => ({
state: route.query.state
})
};
Specifying that detailRoute was a RouteConfig (which in turn uses Route) solved the problem. I must have misunderstood how this is supposed to work, but this fixed it.
The compiler is failing to figure out the exact shape of detailRoute
, because it does not know the shape of Route
.
One way around this is to import Route
from its source, thereby providing the information that the compiler needs to determine the shape of detailRoute
.
import { Route } from "./../node_modules/vue-router/types/router";
export const detailRoute = {
props: (route: Route) => null,
};
Since the index.d.ts file in vue-router (which you were importing in the question) re-exports Route
, it does not provide the direct reference to Route
that the compiler needed.
Another option is to opt detailRoute
out of static typing altogether.
import { Route } from 'vue-router'; // index.d.ts
export const detailRoute: any = {
props: (route: Route) => null,
};
Since any
opts-out of static typing, the compiler does not need to figure out the shape of detailRoute
.
A further is option is what you did in your own answer. Since you provided the type annotation, the compiler again does not need to figure out the shape of detailRoute
.
import { Route, RouteConfig } from 'vue-router'; // index.d.ts
export const detailRoute: RouteConfig = {
props: (route: Route) => null,
};
https://github.com/Microsoft/TypeScript/issues/5711
When trying to emit [the module], the compiler needs to write an object type literal... representing the shape of the module. But there isn't a name in scope that refers directly to [Route], so the type "cannot be named" and there's an error.
If you add [a direct] import of [Route]... the error should go away.