how do you specify a class function to use typescript props interface

Question

I've just found out I can do:

interface Product {
  name: string,
  price: number,
  category: string,
  id: string,
  quantity: number
}

bagTotal = (products: Product[]) => {

}

which is useful but I have this. where bag is one of my props coming from my redux store

interface IBagProps {
  bag: {
    products: Product[]
  }
}

so in the parameters of the function I want to use the bag props from the IBagProps interface

how do I this?

I wanted to do something like this: bagTotal = (products: IBagProps) => {

but that looks like it's going to pass all the props through

because products is an array in the bag object and bag comes from props. so I thought that it should have to live in the props interface? — Red Baron
– Red Baron, Commented Dec 29, 2018 at 19:31

Walter Barbagallo · Accepted Answer · 2018-12-29 19:36:02Z

1

You can access to the type of the bag member simply like this:

type BagsInfo = IBagProps['bag']

You can then refactor the bagTotal function to something similar to:

function bagTotal(bagsInfo: BagsInfo) {
  return bagsInfo.products.length
}

If your bagTotal function is directly "connected" to the products array you can retrieve the Product type with:

type Product = IBagProps['bags']['products'][number]

answered Dec 29, 2018 at 19:36

Walter Barbagallo

2512 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Walter Barbagallo Over a year ago

ok, I missed the point. I need more context info: how are you connecting bagTotal to IBagProps? Is it a redux selector? as a solution you can adapt the input argument: const adapt = (fn: (products: Product[]) => number) => (bagProps: IBagProps) => fn(bagProps.bag.products) and then when using bagTotal just wrap with adapt(bagTotal)

Red Baron Over a year ago

ok I'll try and explain better. I know I can do this: bagTotal = (products: Product[]). but I just wanted to get it from IBagProps because I thought it makes more sense to put it in the props seeing as it's from there?

Nurbol Alpysbayev · Accepted Answer · 2018-12-30 03:11:49Z

1

It's as simple as this:

const bagTotal = (products: IBagProps['bag']['products']) => {

}

But normally you just directly use Product[].

UPD, if you probably mean that IBagProps is passed to your function and you have to pull products from there, then destructuring like this can be done:

const bagTotal = ({ bag: {products} }: IBagProps) => {
    products.map(p => p.name)
  }

edited Dec 30, 2018 at 3:11

answered Dec 30, 2018 at 3:03

Nurbol Alpysbayev

22.4k6 gold badges68 silver badges100 bronze badges

2 Comments

Red Baron Over a year ago

that first way doesn't look correct though and I've not seen people use it like that. I understand I can just use Product[] but does that mean in my PropsInterface for this class that I should leave bag empty?

Nurbol Alpysbayev Over a year ago

@RedBaron There is not much wrong with the first approach, however, as I said, normally you just use Product[]. Regarding your second question I didn't get it, sorry. I am not too familiar with react, hence with PropsInterface as well.

Karol Majewski · Accepted Answer · 2018-12-30 20:15:48Z

1

You could leverage lookup types:

class Bag extends React.Component<IBagProps> {
  bagTotal = (products: IBagProps['bag']['products']) => {
    /* ... */
  }
}

but it is hardly the most elegant approach. If your method depends on Product[], it is perfectly fine to say:

class Bag extends React.Component<IBagProps> {
  bagTotal = (products: Product[]) => {
    /* ... */
  }
}

Not only is it more readable, but it also doesn't depend on the shape of your props. If one day you decide to change their structure to, let's say:

interface IBagProps {
  products: Product[]
}

your method signature will not be affected — as it shouldn't be.

answered Dec 30, 2018 at 20:15

Karol Majewski

26.2k9 gold badges53 silver badges57 bronze badges

Collectives™ on Stack Overflow

how do you specify a class function to use typescript props interface

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related