Блог

Я новичок в Vue и еще новее в машинописи. Я изучил документы для обоих и создал с их помощью небольшие, небольшие проекты. Однако переход к составу с Vue и TS оказывается сложной задачей.

Я хочу, чтобы 3 кнопки реорганизовали порядок некоторых заданий в списке, следуя учебнику Net Ninja. Однако, несмотря на то, что я скопировал его код, TS выдает мне ошибки в IDE. Ниже по течению (предположительно, это проблема ниже по течению из-за ошибок, отображаемых в ide) есть куча кода, который не доступен. Позвольте мне показать вам.

 <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>
 

Я получаю эту ошибку в IDE:

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

amp;

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

Я не вижу, как jobs amp; order части были плохо определены. Что там может быть не так? Это выглядит так же, как и в Коде Ниндзя… Я в замешательстве. Ошибки полностью совпадают с моими ожиданиями, которые заключаются в том, что реквизит, который я подаю, обнаруживается TS. они правы.

Here’s the contents of props.jobs prior to the computed() line:

 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
 

If any useful context is MIA please let me know.

редактировать: по горячим следам я изменил его на computed((props) => ... , и теперь у меня есть лучшая ошибка

 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 |        });
 

отредактируйте, чтобы добавить мой шаблон без 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>
 

Показ ../types/Job и ../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
 

вам нужно определить массив как массив заданий:

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