Theo's Typesafe Cult•5mo ago

No typescript error. Why?

Hey, all you tech geeks out there. can someone explain to me why I didn't get ts error in this case? here's a link to the file that confused me: https://github.com/mbozhik/spiller/blob/main/src/components/app/products/Catalog.tsx I have types defined for the entity “Product”. https://github.com/mbozhik/spiller/blob/main/src/app/products/page.tsx

export interface Product {
  name: string
  caption: string
  article: number

  short_description: any
  full_description: any
...
}

export interface Product {
  name: string
  caption: string
  article: number

  short_description: any
  full_description: any
...
}

But for some reason I didn't get a typescript error when I tried to get “product.description” (which was deleted after creating this component). I should have gotten an error that I am trying to access a non-existent property of the “Product” interface

const Catalog: React.FC<{products: Product[]}> = ({products}) => {
 ...  
  const filteredProducts = products.filter((product) => {
    const productCaption = product.description.replace(/\s+/g, '').toLowerCase()
  })
...
}

const Catalog: React.FC<{products: Product[]}> = ({products}) => {
 ...  
  const filteredProducts = products.filter((product) => {
    const productCaption = product.description.replace(/\s+/g, '').toLowerCase()
  })
...
}

At the same time autocomplete types works, i.e. vs code when typing “product.” shows me the list of available values, but the error doesn't appear if I add something non-existent. https://github.com/mbozhik/spiller/commit/0b4aff78273fc09a93249b4a93bc48854a2b53f3 I just changed the search operation from description to product signature, that way it will be more intuitive for the user. but this case doesn't leave me alone

Solution:

Would it be fixed if you remove [x: string]: any?

Jump to solution

3 Replies

Solution

ktmouk•5mo ago

Would it be fixed if you remove [x: string]: any?

Salumsu•5mo ago

This is the answer. [x: string] means any string is accepted as a product property key.

maksOP•5mo ago

Oh, really. I added this to the interface before I found out that you can mix additional props through {...props}. Thanks a lot!

Gaming

Programming

No typescript error. Why?