vue.js - TypeScript hovorí, že typ vlastnosti je neznámy, napriek tomu, že som sa pokúsil definovať svoje vlastnosti prísne

Som nováčik vo Vue a ešte novší v TypeScripte. Preskúmal som dokumentácie pre obe a vytvoril som s nimi malé, malé projekty. Avšak prechod na kompozíciu s Vue a TS sa ukazuje ako náročný.

Chcem mať 3 tlačidlá na reorganizáciu poradia niektorých úloh v zozname podľa tutoriálu od Net Ninjy. Napriek tomu, že som jeho kód skopíroval, TS mi v IDE dáva chyby. Následne (pravdepodobne ide o problém vyplývajúci z chýb zobrazovaných v IDE) je tam množstvo kódu, ku ktorému sa nedostáva. Dovoľ mi ti to ukázať.

<script lang="ts">
import { computed, defineComponent, PropType } from "vue";
import Job from "../types/Job";
import OrderTerm from "../types/OrderTerm";

export default defineComponent({
    props: {
        jobs: {
            required: true,
            type: Array as PropType<Job[]>,
        },
        order: {
            required: true,
            type: String as PropType<OrderTerm>,
        },
    },
    setup(props) {
        console.log("ce code est allerant", props, props.jobs);
        const aaa = props;
        const x = computed(() => {
            console.log(
                "this code was not reached; restated, it does not print, idk why"
            );
            return [...props.jobs].sort((a: Job, b: Job) => {
                return a[props.order] > b[props.order] ? 1 : -1;
            });
        });
        // console.log("fobar");
        return { x };
    },
});
</script>

V IDE sa mi zobrazuje táto chyba:

ype 'unknown' must have a '[Symbol.iterator]()' method that returns an iterator.Vetur(2488)
(parameter) props: Readonly<LooseRequired<Readonly<{
    jobs: unknown;
    order: unknown;
} & {}>>>

&

Type 'unknown' cannot be used as an index type.Vetur(2538)
(parameter) props: Readonly<LooseRequired<Readonly<{
    jobs: unknown;
    order: unknown;
} & {}>>>

Nevidím, ako by časti jobs & order mohli byť nesprávne definované. Čo by tam mohlo byť zlé? Vyzerá to presne tak, ako je to v Ninja kóde, takže... Som zmätený. Chyby sú úplným protikladom mojich očakávaní, ktorými sú, že vlastnosti, ktoré odovzdávam, sú TS detekované. Sú správne.

Tu sú obsah props.jobs pred riadkom computed():

Proxy { <target>: (4) […], <handler>: {…} }

<target>: Array(4) [ {…}, {…}, {…}, … ]

0: Object { title: "bartender", location: "vancouver", salary: 35, … }

1: Object { title: "priest", location: "Calgary", salary: 90, … }

2: Object { title: "Farmworker", location: "Hyrule", salary: 40000, … }

3: Object { title: "potus", location: "USA", salary: 999999, … }

length: 4

Ak chýba nejaký užitočný kontext, dajte mi prosím vedieť.

úprava: horúco na stope, zmenil som to na computed((props) => ... a teraz mám lepšiu chybu

TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'Job'.
    42 |            console.log("asdfsaf");
    43 |            return [...props.jobs].sort((a: Job, b: Job) => {
  > 44 |                return a[props.order] > b[props.order] ? 1 : -1;
       |                       ^^^^^^^^^^^^^^
    45 |            });
    46 |        });

upraviť a pridať moju šablónu bez lorem ipsum:

<template>
    <div class="jobList">
        <h1>Ordered by: {{ order }}</h1>
        <ul>
            <li v-for="job in x" :key="job.id">
                <div class="card">
                    <div>{{ job.id }}</div>
                    <h2>{{ job.title }} in the city of {{ job.location }}</h2>
                    <p>{{ job.salary }} rupees</p>
                    <div class="description">
                        lorem ipsum but shorter
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

Zobrazenie ../types/Job a ../types/OrderTerm:

// Job.ts
interface Job {
    title: string,
    location: string,
    salary: number,
    id: string,
    ft: boolean
}

export default Job

// OrderTerm.ts
type OrderTerm = "location" | "title" | "salary"

export default OrderTerm

Odpoveď č. 1

musíte definovať pole ako pole úloh:

const jobs = [...props.jobs] as Job[]