TypeScript как правильно убрать ошибки?

Question

[SM_ST]

Подскажите, как убрать ошибку, которая нависла над этой строчкой

selected.value.push(el)

Argument of type 'any' is not assignable to parameter of type 'never'.Vetur(2345)
const el: any
const el: any

?

Только начал разбираться в TypeScript

<script lang="ts">
import { defineComponent, useStore, ref } from '@nuxtjs/composition-api'
export default defineComponent({
  setup() {
    const parentCategories = ref([])
    const categories = ref([])
    const selected = ref([])

    const store = useStore()

    categories.value = store.getters.GET_CATEGORIES

    parentCategories.value = getParentCategories()

    const changeCategory = (id: Number) => {
      const el: any = categories.value.find((el: any) => el.id === id)

      if (!el) return false

      const children = categories.value.filter(
        (item: any) => item.parentId === el.id
      )

      if (children.length > 0) {
        parentCategories.value = categories.value.filter(
          (item: any) => item.parentId === el.id
        )
        selected.value.push(el)
      } else {
        store.dispatch('SET_CATEGORY_MODAL_SELECTED', el)
        closeModal()
      }
    }

    const prevCategory = (id: Number) => {
      const categorySelected: any = categories.value.find(
        (el: any) => el.id === id
      )

      if (!categorySelected) return false

      if (categorySelected.parentId === 0) {
        parentCategories.value = getParentCategories()
        selected.value = []
      } else {
        parentCategories.value = categories.value.filter(
          (item: any) => item.id === categorySelected.parentId
        )
      }
    }

    const closeModal = () => {
      store.dispatch('OPEN_CATEGORY_MODAL', false)
    }

    function getParentCategories() {
      return categories.value.filter((item: any) => item.parentId === 0)
    }

    return {
      closeModal,
      changeCategory,
      prevCategory,
      selected,
      parentCategories,
    }
  },
})
</script>

Comments

[profesor08]

vue + typescript такая себе идея.

[WbICHA]

Зачем ты подключил тайпскрипт, если ты его не используешь?

[SM_ST]

WbICHA, начинаю учить, подскажите где косяки и на что обратить внимание

[WbICHA]

SM_ST,

el: any
item: any
item: any
categorySelected: any 
el: any
...

Действительно, где?)

[SM_ST]

WbICHA, а как нужно?)

[Антон Воскобоев]

profesor08,

vue + typescript такая себе идея.

А почему?..

[WbICHA]

SM_ST, что значит "как нужно"? Нужно использовать типы иначе для чего тебе тс?

[profesor08]

Антон Воскобоев, потому что поддержка типов там только на уровне блока script. В шаблоне все твои типы до одного места.

[Антон Воскобоев]

profesor08, а разве в каких-либо других шаблонах есть поддержка типов?

[Aetae]

Антон Воскобоев, в jsx на уровне самого typescript поддерживается. Но это чисто преференции.
Ради этого писать на сраном react и в мерзком jsx я бы не стал. (но если вам очень хочется - в vue тоже можно писать на jsx)

В шаблонах, если они написаны правильно(без кучи inline кода), нативная поддержка типов особенно и не критична. Тем более с нормальным плагинами для IDE и eslint.
Шаблоны vue - самые эстетически приятные шаблоны, что я видел.)

[Антон Воскобоев]

Aetae,

сраном react и в мерзком jsx

Кроме этой вкусовщины, со всем согласен. )

[Антон Антон]

profesor08, ну, vetur кое что может: https://vuejs.github.io/vetur/guide/interpolation.html (но это не нативно, да)

[profesor08]

Антон Антон, vetur поможет выявить все ошибки на этапе компиляции? Подскажет ошибки, если я поменяю что-то в каком-то компоненте, который используется много где еще?

[Дмитрий Беляев]

а разве в каких-либо других шаблонах есть поддержка типов?

Антон Воскобоев, в svelte и angular есть, а реактовский tsx вообще в самом typescript из коробки

[Дмитрий Беляев]

сраном react и в мерзком jsx

Кроме этой вкусовщины, со всем согласен. )

Антон Воскобоев, это не вкусовщина...
Пока Вы работаете в пределах одной маленькой команды, которая пилит на реакте однотипные маленькие проектики, проблем особых не заметите (ну кроме разве что кода нужно писать раз в 5 больше, а больше кода - больше ошибок)
Но стоит попереключаться между разными проектами от разных команд и сразу виден весь мрак... Проблема реакт, в том что это ни разу не фреймворк, реакт - это просто еще один шаблонизатор, просто работающий с virtual DOM. А людям нужен фреймворк для нормальной разработки. Вот сколько я проектов на реакте видел, столько же я видел велосипедов в качестве фреймворка поверх реакт...

[Антон Антон]

profesor08, "на этапе компиляции" надо встроить в цепочку VTI из состава vetur, тогда да, будет ловить. я ж говорю - не нативно. А так да, ловит дофига ошибок. В принципе, по ссылке вся информация есть и все ограничения описаны

[Антон Воскобоев]

Дмитрий Беляев,

это ни разу не фреймворк, реакт - это просто еще один шаблонизатор

Ну да, это библиотека.

кода нужно писать раз в 5 больше

А, собственно, почему больше-то? Просто "HTML in JS", разве не так?

[Дмитрий Беляев]

Антон Воскобоев, ну начнем с того, что jsx - это не "HTML in JS", не получится просто вставить валидный HTML и прикрутить туда состояние, придется его еще править, начиная от банального class -> className и вплоть до закрытия всех одиночных тэгов.

Ну и давайте на примерах:

1. static + conditional class
React:

<div className={`static${state ? ' conditional' : ''}`}></div>

Vue:

<div class="static" :class="{conditional: state}"></div>

Svelte:

<div class="static" class:conditional={state}></div>

Как по мне, вариант с react очень тяжело читать...

2. Кинуть событие родителю, притом дать возможность родителю не подписываться или подписаться самому + прокинуть наверх.
React: нет событий, поэтому делаем жуткий костыль в виде колбэка в пропсах

const Parent = ({onEvent}) => {
  const myOnEvent = e => {
    onEvent?.(e); // хорошо что в es2020 появился такой синтаксис, а то пришлось бы if городить
    // ...
  };
  return <Child onEvent={myOnEvent} />;
};

const Child = ({onEvent}) => {
  const onClick = e => {
    onEvent?.(e);
  };
  return <button onClick={onClick}>click me</button>;
};

Vue:

<!-- Parent -->
<Child @event="someMethod" @event="$emit('event', $event)" />

<!-- Child -->
<button @click="$emit('event', $event)">click me</button>;

Svelte:

<!-- Parent -->
<Child on:event={someFunction} on:event />

<!-- Child -->
<script lang="ts">
import {createEventDispatcher} from 'svelte';
// нужно из-за идеологии "тянем в бандл только то что реально используется"
const dispatch = createEventDispatcher();
</script>
<button on:click={e => dispatch('event', e)}>click me</button>;

3. Массив строк из пропсов отрисовать в виде переключателя (radio) + вывести выбранный
React:

import {useState} from 'react';
export const Switcher = ({items = []}) => {
  const [selected, setSelected] = useState('');
  return <>
    {items.map(item => <label>
      <input type="radio" checked={selected === item} onChange={() => setSelected(item)} />
      {item}
    </label>)}
    <div>{selected}</div>
  </>
};

Vue, не умеет выводить больше 1 элемента в корень компонента, так что нужна обертка:

<script>
// вот тут конечно vue проиграет...
export default {
  props: {
    items: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {selected: ''};
  },
};
</script>
<template>
<div>
  <label v-for="item of items">
    <!-- зато насколько проще тут -->
    <input type="radio" :value="item" v-model="selected" >
    {{item}}
  </label>
  <div>{{selected}}</div>
</div>
</template>

Svelte:

<script lang="ts">
export let items: string[] = [];
let selected = '';
</script>
{#each items as item}
  <label>
    <input type="radio" value={item} bind:group={selected} >
    {item}
  </label>
{/each}
<div>{selected}</div>

И это я еще варианты с react на функциональных компонентах писал (из-за которых, кстати, добавилась еще одна проверка в рантайме на каждый чих), в реальных проектах встречается огромное количество компонентов на классах, и с ними кода будет еще больше...

[Антон Воскобоев]

Дмитрий Беляев, вот вы о чем... Благодарю за детализацию.

[profesor08]

Дмитрий Беляев,

static + conditional class

пример для реакта - говнокод, точно такой-же говнокод можно написать и на ву, и на свелт. В ву и свелт для этого дела ввели целую, директиву, которая парсится, токенизируется и тд. В реакте у тебя просто жс, а раз просто жс, то можно же сделать по человечески и написать функцию, которая будет генерировать имена классов, или использовать готовый модуль classnames. В результате получится хороший и понятный код.

<div className={cn("static", { conditional: state })}></div>
<div className={cn({ static: true, conditional: state })}></div>

А в styled-components, такого вопроса не возникнет в принципе.
<MyDiv conditional={state}></MyDiv>

Кинуть событие родителю, притом дать возможность родителю не подписываться или подписаться самому + прокинуть наверх.
React: нет событий, поэтому делаем жуткий костыль в виде колбэка в пропсах

Если надо, то можно пробросить html пропсы {...props} прям из входящих дальше в jsx. И внезапно, можно будет подписаться на любые события html элемента. В styled-compoentns даже этим не надо заниматься. А если компонент подписывается на события от html элемента, и хочется передать какие-то данные родителю, то в любом случае придется подписаться на событие html элемента, а потом вручную вызвать колбек пришедший от родителя. Будь это реакт, ву или свелт, собственно это и происходит в примерах. А так как примеры совсем не равнозначные, то неплохо бы сделать чтоб в событии менялся какой-то внутренний стейт в компоненте, который событие генерирует. Тогда будет все честнее и нагляднее.

В реакте среда разработки подскажет, какие есть пропсы у компонента, какие аргументы у колбеков и кучу прочих ништяков. А в случае ву, я не припомню, чтоб были какие-то подсказки о вызываемых внутри компонента $emit.

[Антон Антон]

Дмитрий Беляев,

Vue, не умеет выводить больше 1 элемента в корень компонента, так что нужна обертка:

в третьей версии уже умеет

[Дмитрий Беляев]

Антон Антон, если честно я не работал с vue3, могли бы Вы переделать мой пример с этим нововведением?
Заодно думаю можно на setup переделать конфиг, тогда он будет проще

[Антон Антон]

Дмитрий Беляев, можно просто обертку убрать. Если нужен setup синтаксис, то для таких простых случаев тоже почти ничего не меняется, все различия пойдут в более сложных случаях. Но зато можно делать только части отображаемых объектов реактивными, что снизит общую нагрузку при проверках зависимостей и прочих частях работы системы реактивности:

import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  setup () {
    return { selected: ref('') }
  }
})

defineComponent нужен как раз для type hinting у тайпскрипта и ветура

Answer 1

[profesor08]

Неплохо бы указать с каким типом объекта будет работать твой ref.

const selected = ref<HTMLInputElement[]>([])