I am getting the following error while attempting to set up my reducers in app.module.ts
Error: src/app/app.module.ts:72:7 - error TS2322: Type 'MetaReducer<State, Action>[]' is not assignable to type 'MetaReducer<unknown, Action>[]'.
Types of parameters 'reducer' and 'reducer' are incompatible.
Type 'unknown' is not assignable to type 'State'.
72 metaReducers,
~~~~~~~~~~~~
How do I fix it? My code is as follows:
const metaReducers: MetaReducer<State>[] = !environment.production ? [logger] : [];
interface State {
router: fromRouter.RouterReducerState<BaseRouterStoreState>;
}
const reducers: ActionReducerMap<unknown> = {};
function logger(reducer: ActionReducer<State>): ActionReducer<State> {
return (state: State | undefined, action: Action): State => {
const result = reducer(state, action);
console.groupCollapsed(action.type);
console.log('prev state', state);
console.log('action', action);
console.log('next state', result);
console.groupEnd();
return result;
};
}
#NgModule({
declarations: [AppComponent],
imports: [
StoreModule.forRoot(reducers, {
// TS2322: Type 'MetaReducer<State, Action>[]' is not assignable to type 'MetaReducer<unknown, Action>[]'. Types of parameters 'reducer' and 'reducer' are incompatible. Type 'unknown' is not assignable to type 'State'.
metaReducers,
runtimeChecks: {
strictActionImmutability: true,
strictStateImmutability: true,
},
}),
],
bootstrap: [AppComponent],
})
export class AppModule {}
Related
I'm trying to dynamically import an icon from react-icons following the this Nextjs instructions but I get an error.
This is my code:
import React, { Suspense } from 'react';
import dynamic from 'next/dynamic';
interface IconProps {
name: string;
}
function Icon({ name }: IconProps) {
const MyIcon = dynamic(() => import('react-icons/fi/index.js').then((mod) => mod[name]), {suspense: true});
return (
<Suspense fallback={`Loading...`}>
<MyIcon />
</Suspense>
);
}
export default Icon
This is the error:
Argument of type '() => Promise<IconType | React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; }>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.
Type '() => Promise<IconType | React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; }>' is not assignable to type '() => LoaderComponent<{}>'.
Type 'Promise<IconType | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }>' is not assignable to type 'LoaderComponent<{}>'.
Type 'IconType | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<{}, any>'.
Types of property 'getDerivedStateFromProps' are incompatible.
Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<{}, any> | undefined'.
Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<{}, any>'.
Types of parameters 'nextProps' and 'nextProps' are incompatible.
Type 'Readonly<{}>' is not assignable to type 'never'.ts(2345)
What am I doing wrong?
import {Pipe, PipeTransform} from '#angular/core';
import {Product} from "./product";
#Pipe({
name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
transform(value: Product[], filterText?: string): Product[] {
filterText = filterText?filterText.toLocaleLowerCase(): null
return filterText ? value.filter((p: Product) => p.name
.toLocaleLowerCase().indexOf(filterText) !== -1) : value;
}
}
TS2322: Type 'string | null' is not assignable to type 'string | undefined'.Type 'null' is not assignable to type 'string | undefined'.
and
TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.Type 'undefined' is not assignable to type 'string'.
enter image description here
Try with this
import {Pipe, PipeTransform} from '#angular/core';
import {Product} from "./product";
#Pipe({
name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
transform(value: Product[], filterText?: string): Product[] {
let pattern = filterText ? filterText.toLocaleLowerCase(): null;
return pattern ? value.filter((p: Product) => p.name.toLocaleLowerCase().indexOf(pattern) !== -1) : value;
}
}
If a filterText is not passed to the function then you got that error because you are trying to assign something to undefined.
im trying to use function as a computed value in defineComponent:
code printscreen
<script lang="ts">
import { defineComponent } from "#vue/runtime-core";
import { testData } from "../assets/testData";
export type SearchDataType = {
_id: string;
index: number;
name: string;
};
interface ISearchPage {
searchData: SearchDataType[];
searchQuery: string
}
export default defineComponent({
name: "SearchPage",
components: {},
data(): ISearchPage {
return {
searchData: [],
searchQuery: ''
};
},
methods: {
getData: function () {
this.searchData = testData;
},
},
created(){
this.getData()
},
computed: {
filteredSearch: function() {
return this.searchData.filter((filteredItem: SearchDataType) => {
return filteredItem.name.match(this.searchQuery)
})
}
}
});
</script>
And, when i want to use this.searchData variable in computed im reciving the following errors:
Property 'searchData' does not exist on type 'CreateComponentPublicInstance<{ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: undefined; }, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 10 more ..., {}>'.
Property 'searchData' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: { [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: undefined; }; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 4 more ... & Co...'
I was trying to add the code below to shims-vue.d.ts file, but it didn't solve the problem:
import { ComponentCustomProperties } from "vue";
declare module "#vue/runtime-core" {
interface CreateComponentPublicInstance {
searchData: any | null;
}
}
Im new to vue with TypeScript. Could someone tell me, what am doing wrong?
I am currently using a redux pattern in a create-react-app with typescript.
Currently i am having an issue deciphering the overload error messages.
The current fix works but i dont think its correct as it wont be strictly typed anymore.
const combinedReducers = combineReducers({ reducer1, reducer2 } as any);
Overload Error message:
No overload matches this call.
Overload 1 of 3, '(reducers: ReducersMapObject<ApplicationState, any>): Reducer<CombinedState<ApplicationState>, AnyAction>', gave the following error.
Type '(state: ModelState | undefined, action: any) => { model: any; loading: boolean; errorMessage: string; } | { loading: boolean; errorMessage: any; model: never[]; }' is not assignable to type 'Reducer<ModelState, any>'.
Type '{ model: any; loading: boolean; errorMessage: string; } | { loading: boolean; errorMessage: any; model: never[]; }' is not assignable to type 'ModelState'.
Type '{ loading: boolean; errorMessage: any; model: never[]; }' is not assignable to type 'ModelState'.
Types of property 'model' are incompatible.
Type 'never[]' is missing the following properties from type 'Model': opportunity_id, model_result TS2769
24 | save_opportunity_state: SaveOpportunityReducer,
25 | archive_state: ArchiveOpportunityReducer,
> 26 | model_state: GetModelReducer,
| ^
27 | });
28 |
Reducer:
export interface ModelState {
model: Model;
loading: boolean;
errorMessage: string;
}
export interface Model {
opportunity_id: string;
model_result: ModelResult;
}
export interface ModelResult {
model_info: ModelInfo;
qualification: Qualification;
similar_deals?: null[] | null;
tool_tips: ToolTips;
top_actions?: null[] | null;
win_probability: WinProbability;
}
export interface ModelInfo {
probability_version: string;
similar_deals_version: string;
}
export interface Qualification {
colour: string;
score: number;
}
export interface ToolTips {
[key: string]: string;
}
export interface WinProbability {
colour: string;
features?: null[] | null;
score: number;
}
const initialState: ModelState = {
model: {
opportunity_id: '',
model_result: {
model_info: { probability_version: '', similar_deals_version: '' },
qualification: { colour: 'grey', score: 0 },
similar_deals: [],
tool_tips: {},
top_actions: [],
win_probability: { colour: 'green', features: [], score: 0 },
},
},
loading: false,
errorMessage: '',
};
If you look at the error message, specifically the last one states that model is missing following property.
I am guessing your failure case just returns an empty object. This contradicts the types defined above as the model should always contain x, y and z.
So in your failure case, you should add the following:
model: { ...initialState.model },
this error happen with Asp.net core 2 and angular 4 after running the application in seconds
angular CLI:
Angular CLI: 1.7.0
Node: 6.11.3
OS: win32 x64
Angular: 4.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router, tsc-wrapped
#angular/cli: 1.7.0
#angular-devkit/build-optimizer: 0.3.1
#angular-devkit/core: 0.3.1
#angular-devkit/schematics: 0.3.1
#ngtools/json-schema: 1.2.0
#ngtools/webpack: 1.5.0
#schematics/angular: 0.3.1
#schematics/package-update: 0.3.1
typescript: 2.3.4
webpack-hot-middleware: 2.18.2`enter code here`
webpack-merge: 4.1.0
webpack: 2.5.1
app.shared.module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { VehicleFormComponent } from './components/vehicle-form/vehicle-form.component';
#NgModule({
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
VehicleFormComponent
],
imports: [
CommonModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'vehicles/new', component: VehicleFormComponent },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }
])
]
})
export class AppModuleShared {
}
ouput error :
ERROR in [at-loader] ./ClientApp/app/components/app/app.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; styles: {}[]; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/counter/counter.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/fetchdata/fetchdata.component.ts:4:12
TS2345: Argument of type '{ selector: string; template: {}; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/home/home.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/navmenu/navmenu.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; styles: {}[]; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/vehicle-form/vehicle-form.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; styles: {}[]; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
error image: