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>
);
}
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 am working on the project, which was started by someone else. There are two interface files in the model folder def and dto. The difference between def and dto interface files is not clear to me. Could any expereince developer let me know what is the difference and when and how to use dto instead of def and viceversa. Thanks in advance.
vendor-def.interface.ts:
import { SourceType, VendorType } from '../shared/enums/vendor-type.enum';
export interface VendorDef {
vendorId: string;
companyCode: string;
name: string;
acronym: string;
alias: string;
legalId: string;
vendorType: VendorType;
sourceType: SourceType;
fiscalCode: string;
}
export interface VendorFormDef {
sourceType: SourceType;
companyCode?: string;
previousMainCompany?: string;
}
export interface InUsageDef {
acronym: boolean;
legalId: boolean;
fiscalCode: boolean;
}
vendor-dto.interface.ts
import { SourceType, VendorType } from '../shared/enums/vendor-type.enum';
export interface VendorDto {
data: VendorDataDto[] | VendorDataDto;
errors?: VendorErrorsDto;
}
export interface VendorDataDto {
attributes: VendorAttributesDto;
id: string;
}
export interface VendorErrorsDto {
code: string;
title: string;
detail: string;
}
export interface VendorCreateDto {
companyCode: string;
name: string;
acronym: string;
legalId: string;
fiscalCode: string;
vendorType: VendorType;
sourceType: SourceType;
}
Basically, it's used to separate what your API gives you from the objects you will manipulate.
VendorDTO is your API response (hence the presence of the data and errors fields)
VendorDef is the definition of the object you will manipulate in your app.
It is common to have a transformer from VendorDTO to VendorDef for when you request the data and a transformer from VendorDef to VendorDTO for when you want to push an addition/update on your API.
It is not restricted to Typescript or Angular, so you might want to check your question's tags.
I get a problem when making an interface on Typescript!
export interface Content {
uuid?: string;
brand_id?: string;
brand_name?: string;
is_active?: boolean;
}
export interface Pageable {
sort?: Sort;
pageSize?: number;
pageNumber?: number;
offset?: number;
unpaged?: boolean;
paged?: boolean;
}
export interface Sort {
sorted?: boolean;
unsorted?: boolean;
empty?: boolean;
}
export interface BrandData {
content?: Content;
pageable?: Pageable;
numberOfElements?: number;
number?: number;
sort?: Sort;
size?: number;
first?: boolean;
last?: boolean;
empty?: boolean;
}
export interface BrandResponse {
readonly data?: BrandData[];
}
and then i want to get data in react component like this
const { brands } = useSelector((state: AppState) => state.catalogs.brands);
const [brandData, setBrandData] = React.useState(brands.data);
const [currentPage, setCurrentPage] = React.useState(brandData.pageable.pageNumber);
then the error exits like this
Property 'pageable' does not exist on type 'BrandData[]'.
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']>;
}
I have extended my FilterMetaData type to add a dynamic model which is different structure for different entities but somehow typescript not recognizing my object properties. I might be missing something here.
Interfaces
export type FilterMetaData<T extends {}> = T & {
filterCriteriaID: number;
filterCriteriaName?: string;
isDefaultSelected?: boolean;
isExpanded?: boolean;
}
export interface DateRange {
data?: DateRangeData;
}
export interface DateRangeData {
min?: Date;
max?: Date;
}
export interface Range {
data?: RangeData;
}
export interface RangeData {
currency?: string;
timePeriod?: string;
min?: number;
max?: number;
step?: number;
}
export interface Select {
data?: SelectData[];
}
export interface SelectData {
id?: number;
name?: string;
isSelected?:boolean|false;
parentID?: number | null;
parentName?: string;
}
Implementation in class
helper<T1 extends FilterMetaData<T2>>(filter) {
this.selectedFilterService.getAppliedFilterMasterData<T1>(filter)
.pipe(takeUntil(this.unsubscribe$))
.subscribe((filterData: T1) => {
if (filter.isDefaultSelected) {
filterData.isExpanded = false;
filterData.data.forEach((data) => data.isSelected = false);
this.selectedFilters.result.select.push(filterData);
this.loadComponent(new FilterComponentType(SelectComponent, filterData));
} else {
this.removeComponent(filter);
}
}, err => {
this.toastrService.error(err);
})
}
Invoking Function with type args like this:--
this.helper<FilterMetaData<Select>>(filter);