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 },
Related
I need some help and explanation with the error I am receiving in my app... I get a JSON from an API that gives me some data and that data has an array products. On click I want to copy these products(izdelki) from this array to a new empty array and send it over an API call to the backend.
But I have a problem with getting the products from this array I receive. My code is returning me this error:
error TS2322: Type '{ sifra: string; naziv: string; kolicina: number; ean: string; em: string; cena: number; rabat1: number; rabat2: number; prednarocilo: number; ismail: number; }[]' is not assignable to type '[{ sifra: string; naziv: string; kolicina: number; ean: string; em: string; cena: number; rabat1: number; rabat2: number; prednarocilo: number; ismail: number; }]'.
[ng] Target requires 1 element(s) but source may have fewer.
[ng]
[ng] 38 this.orderProducts = data.map(this.order['izdelki']);
I am new to angular and Arrays are giving me some trouble :)
single-order.ts code:
export interface SingleOrder {
id: number;
datum: string;
datum_dobave: string;
dostava: number;
g_popust: number;
opomba: string;
predkoci1narocilo: number;
kc: number;
prevoznik: string;
narocilnica: string;
narocilnicadate: string;
izdelki: {
sifra: string;
naziv: string;
kolicina: number;
ean: string;
em: string;
cena: number;
rabat1: number;
rabat2: number;
prednarocilo: number;
ismail: number;
}[];
}
Service to get the single order:
getSingleOrder(id: number): Observable<SingleOrder[]> {
return from(Preferences.get({ key: 'TOKEN_KEY' })).pipe(
switchMap(token => {
const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
return this.httpClient.get<SingleOrder[]>(`${environment.apiUrl}customer/orders/${id}`, { headers, observe: 'response' });
}),
catchError(err => {
console.log(err.status);
if (err.status === 400) {
console.log(err.error.message);
}
if (err.status === 401) {
this.authService.logout();
this.router.navigateByUrl('/login', { replaceUrl: true });
}
return EMPTY;
}),
map(res => res.body)
);
};
Here is my order-view.page.ts code:
export class Izdelki {
sifra: string;
naziv: string;
kolicina: number;
ean: string;
em: string;
cena: number;
rabat1: number;
rabat2: number;
prednarocilo: number;
ismail: number;
}
#Component({
selector: 'app-order-view',
templateUrl: './order-view.page.html',
styleUrls: ['./order-view.page.scss'],
})
export class OrderViewPage implements OnInit, OnDestroy {
order: SingleOrder[];
// orderProducts: SingleOrder['izdelki'][];
orderProducts: SingleOrder['izdelki'][];
repeatOrderArr: Izdelki[];
private orderSubscription: Subscription;
constructor(
private route: ActivatedRoute,
private customerService: CustomerService,
) { }
ngOnInit() {
this.getOrder();
}
getOrder() {
const id = Number(this.route.snapshot.paramMap.get('id'));
this.orderSubscription = this.customerService.getSingleOrder(id).subscribe(
data => {
this.order = data;
console.log('Order data:', this.order);
this.orderProducts = data.map(this.order['izdelki']);
},
error => {
console.log('Error', error);
});
}
repeatThisPurchase() {
this.repeatOrderArr= [...this.orderProducts];
console.log(this.repeatOrderArr);
}
ngOnDestroy(): void{
this.orderSubscription.unsubscribe();
}
}
Here is an image of console.log(data) so you can see whats inside the JSON response:
HTML file code:
<ion-button color="vigros" class="purchase-btn" size="default" type="submit" (click)="repeatThisPurchase()" expand="block">Ponovi nakup</ion-button>
let say izdelki is a class
export class Izdelki {
sifra: string;
naziv: string;
kolicina: number;
ean: string;
em: string;
cena: number;
rabat1: number;
rabat2: number;
prednarocilo: number;
ismail: number;
}
so inSingleORder you declared izdelki with type [Izdelki]
export interface SingleOrder {
izdelki: [Izdelki]
}
but in your subscribe you used it directly like if izdelki is of type Izdelki
So SingleOrder izdelki became
export interface SingleOrder {
izdelki: Izdelki
}
or if izdelki is an array
export interface SingleOrder {
izdelki: Izdelki[]
}
To solve your issue you have to
declare SingleOrder izdelki with the type Izdelki
declare orderProducts as an array of SingleOrder['izdelki']
orderProducts: SingleOrder['izdelki'][];
You have inversed the declaration of your array. Start by declaring the type of the array fist, like :
export interface SingleOrder {
...
izdelki: {
sifra: string;
naziv: string;
kolicina: number;
ean: string;
em: string;
cena: number;
rabat1: number;
rabat2: number;
prednarocilo: number;
ismail: number;
}[];
}
I'm trying to implement HMS Core location kit into my vue ionic app.
I import HMSLocation and declare it, but when I try to use the getFusedLocationProviderClient function I get
TypeError: Cannot read properties of undefined (reading 'getFusedLocationProviderClient')
import { HMSLocation } from "#hmscore/ionic-native-hms-location/ngx";
export default {
data() {
return {
hmsLocation: null,
fusedClient: null,
locationResult: null,
};
},
mounted() {
this.getLocation();
},
methods: {
async getLocation() {
this.hmsLocation = new HMSLocation();
console.log(this.hmsLocation);
this.fusedClient = this.hmsLocation.getFusedLocationProviderClient();
this.locationResult = await this.fusedClient.getLastLocation;
},
},
.....
console.log(this.hmsLocation); returns
node_modules/#hmscore/ionic-native-hms-location/ngx
import { IonicNativePlugin } from '#ionic-native/core';
export declare class HMSLocation extends IonicNativePlugin {
getGeofenceService(): GeofenceService;
getGeocoderService(language: string, country?: string): GeocoderService;
getFusedLocationProviderClient(): FusedLocationService;
getActivityIdentificationService(): ActivityIdentificationService;
addListener(event: Events, callback: (data: LocationResult | [] | ActivityConversionResponse | ActivityIdentificationResponse) => void): any;
disableLogger(): Promise<void>;
enableLogger(): Promise<void>;
}
export declare class BackgroundManager {
private constructor();
static notify(notificationId: number, notification: string): void;
static makeToast(text: string, duration: number): void;
}
export interface FusedLocationService {
disableBackgroundLocation(): Promise<void>;
enableBackgroundLocation(notificationId: number, notification: string): Promise<void>;
checkLocationSettings(request: LocationSettingsRequest): Promise<LocationSettingsStates>;
flushLocations(): Promise<void>;
getLastLocation(): Promise<Location>;
getLastLocationWithAddress(request: LocationRequest): Promise<HWLocation>;
getLocationAvailability(): Promise<boolean>;
getNavigationContextState(requestType: NavigationRequestConstants): Promise<NavigationResult>;
removeLocationUpdates(requestCode: number, type: RequestType): Promise<boolean>;
requestLocationUpdates(requestCode: number, request: LocationRequest, callback?: (locationResult: LocationResult) => void): Promise<boolean>;
requestLocationUpdatesEx(requestCode: number, request: LocationRequest): Promise<boolean>;
setMockLocation(latLng: LatLng): Promise<void>;
setMockMode(mode: boolean): Promise<void>;
setLogConfig(logConfigSettings: LogConfigSettings): Promise<void>;
getLogConfig(): Promise<LogConfigSettings>;
}
I'm passing down a pretty large array of objects through several React components. I was wondering, what is the syntax for writing the types of all the properties in each object (the objects are nested several times)?
I currently have interfaces like below. These are two components, MainContent, which passes props down into Chart:
MainContent component:
interface ComparatorTypes {
id: string;
name: string;
}
interface DataTypes {
jobId: string;
jobTitle: string;
descriptionUrl: string;
totalCompensation: number;
baseSalary: number;
longevityPay: number;
specialPay: number;
allowances: number;
paidTimeOff: number;
holidays: number;
retirementBenefit: Array<{
formula: string;
details: any;
}>;
healthBenefit: Array<{
premium: number;
details: any;
}>;
remoteWork: {
isAllowed: string;
details: any;
};
}
interface QueryTypes {
agencyName: string;
id: string;
data: DataTypes[];
}
interface params {
comparatorData: ComparatorTypes[];
queryData: QueryTypes[];
}
export default function MainContent({ comparatorData, queryData }: params) {
return (
<S.MainContentComponent>
<Header />
<Summary comparatorData={comparatorData} />
<Chart queryData={queryData} />
</S.MainContentComponent>
);
}
and Chart component:
interface ComparatorTypes {
id: string;
name: string;
}
interface DataTypes {
jobId: string;
jobTitle: string;
descriptionUrl: string;
totalCompensation: number;
baseSalary: number;
longevityPay: number;
specialPay: number;
allowances: number;
paidTimeOff: number;
holidays: number;
retirementBenefit: Array<{
formula: string;
details: any;
}>;
healthBenefit: Array<{
premium: number;
details: any;
}>;
remoteWork: {
isAllowed: string;
details: any;
};
}
interface QueryTypes {
agencyName: string;
id: string;
data: DataTypes[];
}
interface params {
// comparatorData: ComparatorTypes[];
queryData: QueryTypes[];
}
export default function Chart({ queryData }: params): JSX.Element {
...
You can see how redundant it is to be naming these giant, several-times-nested interfaces before every component that uses this array of objects. Is this normal for Typescript? Is there a better way to do something like this? Or does all this data need to be typed upon being passed down through every component?
What forces you to define these identical interfaces explictly for each component?
On the contrary, factorizing them would be the normal choice: that way, they are defined in a single place (single source of truth), and by importing them, you explictly say that you re-use the exact same types.
// Chart.tsx
export interface QueryTypes {
agencyName: string;
id: string;
data: DataTypes[];
}
export interface DataTypes {
jobId: string;
jobTitle: string;
// etc.
}
export default function Chart({
queryData
}: {
queryData: QueryTypes[];
}) {}
// Main.tsx
import Chart, { QueryTypes } from ".Chart";
import Summary, { ComparatorTypes } from "./Summary"; // Same for ComparatorTypes
export default function MainContent({
comparatorData,
queryData
}: {
comparatorData: ComparatorTypes[];
queryData: QueryTypes[];
}) {
return (
<S.MainContentComponent>
<Header />
<Summary comparatorData={comparatorData} />
<Chart queryData={queryData} />
</S.MainContentComponent>
);
}
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?
Having this type:
export interface IMyTypes {
First: {
name: string;
city: string;
country: string;
status: string;
};
Second: {
name: string;
age: number;
height: number;
};
}
This must be used in a component but I cannot make it accept both, the props should be First or Second.
I can make it work for First:
import { IMyTypes } from '../my-types';
interface MyComponentProps {
componentProps: ComponentProps<IMyTypes['First']>;
}
or for the second:
interface MyComponentProps {
componentProps: ComponentProps<IMyTypes['Second']>;
}
But doesn't work to make it accept one or the other, tried like the following but it isn't correct:
interface MyComponentProps {
componentProps: ComponentProps<IMyTypes['First' | 'Second']>;
}
Is there a solution to this?
The solution that solves the issue:
interface MyComponentProps {
componentProps:
| ComponentProps<IMyTypes['First']>
| ComponentProps<IMyTypes['Second']>;
}