Typescript/Vue 3 -- find() value within an array of objects. Object is of type 'unknown'

Question

How do I resolve the following typescript error? For context, I am using the Vue 3 Composition API where I ultimately am using the result to specify whether or not a default option value should be <option ... selected v-if="!isMatch">.

Object is of type 'unknown'.

The error is highlighting the second 'option'.

props:{
    value: {
        required: true,
        type: String,
    },
    options: {
        required: true,
        type: Array,
    },
}
setup(props){
    const isMatch = () => props.options.find(option => {
        return option['code'] === props.value
    })
    return { isMatch }
}

Example 'Options' Data

[
    {
        "code": "CA",
        "name": "Canada"
    },
    {
        "code": "US",
        "name": "United States"
    }
]

Could you share the props setup part? By the looks of how you are using it on the template, I think RoToRa is right, you might want to use Array.prototype.some instead of find. Need more context here. — Yom T.
– Yom T., Commented Jul 8, 2021 at 12:33

Ryan Prentiss · Accepted Answer · 2021-07-08 19:09:46Z

3

Following a bit of refactoring, I came up with this via the Vue Docs. I required the addition of two interface definitions and the PropType import.

import { defineComponent, PropType } from 'vue'

interface Option {
    code: String,
    name: String
}

interface Options extends Array<Option>{}

export default defineComponent({
    props: {
        id: {
            required: true,
            type: String,
        },
        title: {
            required: true,
            type: String,
        },
        selections: {
            required: true,
            type: Array as PropType<Options>
        }
        modelValue: {
            required: true,
            type: String,
        },
    },
    setup(props) {
        const isMatch = () =>
            props.selections.some(
                selection => selection['code'] === props.modelValue
            )

        return { isMatch }
    },
})

answered Jul 8, 2021 at 19:09

Ryan Prentiss

1,6823 gold badges31 silver badges51 bronze badges

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

1 Comment

Yom T. Over a year ago

Yep, it's a common gotcha.

RoToRa · Accepted Answer · 2021-07-08 08:02:26Z

1

.find() returns an matching object from the array, but you seem to just want a boolean saying if such an object exists, so you should be using .some() instead.

BTW, you can simplify the arrow function by just using an expression instead of using return:

const isMatch = () => props.options.some(option => option['code'] === props.value)

answered Jul 8, 2021 at 8:02

RoToRa

38.5k12 gold badges72 silver badges110 bronze badges

2 Comments

Ryan Prentiss Over a year ago

Thanks, though I'm still needing to resolve the "Object is of type 'Unknown'" error.

RoToRa Over a year ago

Sorry, I thought that would help. I don't have any other ideas.

Collectives™ on Stack Overflow

Typescript/Vue 3 -- find() value within an array of objects. Object is of type 'unknown'

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related