Задать вопрос
  • Почему VUE не подключает компонент внутри другого компоненте?

    yarkov
    @yarkov Куратор тега Vue.js
    Помог ответ? Отметь решением.
    Имена разные дайте им для начала
    Ответ написан
    Комментировать
  • Как типизировать в ts?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Вопрос конечно в духе "я его того, а он мне нихрна, чаво это он". Где конкретика блин? Что именно за ошибка? Любая ошибка TS - это "ошибка типов", он для этого и существует. Что у тебя в route?

    Но окей, предположим, что route у тебя - это текущий роут vue-рутера, тогда ошибка у тебя скорее всего выглядит как-то так:
    TS7053: Element implicitly has an 'any' type because expression of type 'RouteRecordName' can't be used to index type '{ first: string; second: string; }'.   No index signature with a parameter of type 'string' was found on type '{ first: string; second: string; }'.

    Собственно прочитав текст ошибки можно уже догадаться, в чём проблема: у (неявно выведенного за отсутствием явного объявления) типа объекта pages есть ключи типа 'first' | 'second' | ..., но нет index signature типа string, т.е. не указано, что ключом может быть любая строка, а не только конкретные'first' | 'second' | ....
    route.name же после проверки на пустоту имеет тип string | symbol. Ты не можешь у объекта с чётко ограниченным набором ключей брать значение по произвольному строковому/символьному.

    Прямое решение в лоб:
    Задать тип pages позволяющий рандомные ключи, например
    const pages: Record<PropertyKey, string> = {
      first: 'Первая',
      second: 'Вторая',
      ...
    }

    Всё сразу заработает, но это не спасёт тебя от ошибок(например опечаток).


    Не менее прямой вариант
    (но с другой стороны):
    Кастануть нужный тип руками: ... = pages[route.name as keyof typeof pages]
    Ведь мы уверены, что name в route всегда будет одним из ключей pages. Уверены же?..

    Энтерпрайз решение(ничем не лучше предыдущих, зато выглядит солидно):
    Твой файл routes.ts:
    export enum ERoutes {
      FIRST = 'first',
      SECOND = 'second'
    }
    
    const routes = [
      {
         name: ERoutes.FIRST,
         ...
      },
      {
         name: ERoutes.SECOND,
         ...
      },
      ...
    ]

    В коде:
    const pages: Record<ERoutes, string> = {
      [ERoutes.FIRST]: 'Первая',
      [ERoutes.SECOND]: 'Вторая',
      ...
    }
    
    ... = pages[route.name as ERoutes]


    Надмозговое решение("как батька"):
    Твой файл routes.ts:
    const routes = [
      {
         name: 'first',
         ...
      },
      {
         name: 'second',
         ...
      },
      ...
    ] as const satisfies ReadonlyArray<ReadonlyRouteRecordRaw>;
    
    type ReadonlyRouteRecordRaw = Omit<RouteRecordRaw, 'children'> & {
      children?: ReadonlyArray<ReadonlyRouteRecordRaw>;
    };
    
    type ExtractNames<Route> = Route extends { name: infer Name } ? Name : never;
    type FlattenChildren<Route> = Route extends { children: ReadonlyArray<infer Children> }
      ? FlattenChildren<Children> | Route
      : Route;
    
    // с помощью магии ts вытаскиваем в тип RouteNames все заданные у нас имена маршрутов
    export type RouteNames = ExtractNames<FlattenChildren<typeof routes[number]>>;
    
    // с помощью магии же прокидывем их прямо в декларацию vue-router
    declare module 'vue-router' {
      export interface RouteLocationNormalizedLoaded {
        name: RouteNames | null | undefined;
      }
    }

    satisfies
    satisfies - новая фича ts 4.9, в предыдущих версиях того же можно добиться сделав обёртку вида:
    const narrowRoutesTypeWrapper = <T extends ReadonlyArray<ReadonlyRouteRecordRaw>>(routes: T) => routes;
    const routes = narrowRoutesTypeWrapper([ ... ] as const);

    И твой код заработает вообще без изменений (если в pages есть все нужные ключи).)
    Однако для удобства можно написать так:
    const pages: Record<RouteNames, string> = {
      first: 'Первая',
      second: 'Вторая',
      ...
    }
    Ответ написан
    Комментировать
  • В premiere pro 2022 не могу найти эффект camera blur, где его найти? Или его заменили на что то другое?

    используйте эффект "Gaussian blur"
    Ответ написан
    Комментировать
  • Как написать этот код на Laravel?

    delphinpro
    @delphinpro Куратор тега Laravel
    frontend developer
    А что этот код делает? Достает список аэропортов города?

    1. Создать таблицы cities и airports (обратите внимание – названия во мн. числе)
    cities:
    id | name | другие поля, если нужно
    airports:
    id | city_id | name | другие поля, если нужно

    2. Создать модели City и Airport (обратите внимание – названия в ед. числе)

    2.1 В модели City создать отношение один-ко-многим (в городе может быть несколько аэропортов)

    public function airports(): \Illuminate\Database\Eloquent\Relations\HasMany {}
        return $this->hasMany(\App\Models\Airport::class);
    }


    2.2 В модели Airport создать обратное отношение

    public function city(): \Illuminate\Database\Eloquent\Relations\BelongsTo {}
        return $this->belongsTo(\App\Models\City::class);
    }


    Теперь можно получать аэропорты города, и город по аэропорту

    $from = $request->input['otkuda'];
    $city = \App\Models\City::whereName($from) // По названию города
        ->firstOrFail(); 
    
    // или
    // $fromId = $request->input['otkuda'];
    // $city = \App\Models\City::findOrFail($fromId); // По ID города
    
    dump($city->toArray()); // Получили город
    dump($city->airports->toArray()); // Получили список аэропортов города


    $airportId = $request->input['airportId'];
    $airport = \App\Models\Airport::findOrFail($airportId);
    
    dump($airport->toArray()); // Получили аэропорт по ID
    dump($airport->city->toArray()); // Получили город, в котором этот аэропорт находится.
    Ответ написан
    5 комментариев
  • Ссылка на несуществующий класс. Меня не проклянут?

    BoShurik
    @BoShurik
    Symfony developer
    Опишите зависимость в require-dev секции + можно дать ссылку на пакет в suggest секции.
    Таким образом при разработке все зависимости будут устанавливаться, а при использовании библиотеки как зависимости - игнорироваться

    https://getcomposer.org/doc/04-schema.md#require-dev
    https://getcomposer.org/doc/04-schema.md#suggest
    Ответ написан
    1 комментарий
  • Закрытие бесплатного G Suite (Workspace), куда мигрировать?

    Rogihao
    @Rogihao Автор вопроса
    Руководитель
    Для тех, кто ищет ответ на похожий вопрос
    Выбрал решение от Яндекс

    Но Яндекс оказался с подвохом.
    Тарифы были
    Базовый - 153 ₽ за пользователя в месяц
    Оптимальный - 311 ₽ за пользователя в месяц
    Расширенный - 824 ₽ за пользователя в месяц
    На 03.12.2022
    Базовый - 249 ₽ за пользователя в месяц
    Оптимальный - 559 ₽ за пользователя в месяц
    Расширенный - 1399 ₽ за пользователя в месяц
    Бесплатный тариф для подключения убрали, возможно как-то к нему можно подключиться, но на сайте видимых способов нет.

    И главная подстава стала известна с 01.12.2022
    Яндекс всех с 17 апреле 2023 попросит на платные тарифы
    Скриншоты взяты из канала https://t.me/StepanCheltsov/2435
    638b07d0d3ca0248845660.jpeg
    638b07d80e541722537743.jpeg

    С таким непредсказуемым подходом не могу рекомендовать Яндекс для своего домена
    Ответ написан
    Комментировать
  • Как так оказалось, что часть Windows 10 не русифицирована?

    У меня версия 19041. Такого пункта в данном месте нет.
    Возможно, вкладка добавляется драйверами на аудио (такое бывает например с тачпадом)
    Ответ написан
    3 комментария
  • Как нормально перегрузить функцию?

    К сожалению, в TypeScript придётся проверять через if.
    function dispatch<T>(key: DispatchKey<T>, value: DispatchValue<T>): void;
    function dispatch<T>(keys: DispatchKey<T>[], iterator: (key: DispatchKey<T>) => DispatchValue<T>): void;
    function dispatch<T>(
        keyOrKeys: DispatchKey<T> | DispatchKey<T>[],
        valueOrIterator: DispatchValue<T> | ((key: DispatchKey<T>) => DispatchValue<T>)
    ): void {
        if (Array.isArray(keyOrKeys) && typeof valueOrIterator === 'function') {
            setState((prev) => {
                const updated = keyOrKeys.map((key) => valueOrIterator(key));
                console.log(updated);
                return prev;
            });
        } else {
            setState((prev) => ({
                ...prev,
                [keyOrKeys]: valueOrIterator,
            }));
        }
    }
    Ответ написан
    7 комментариев
  • В чем преимущества TS?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    А ещё динамическая типизация сильно экономит время на написание кода - это очень нехилая оптимизация рабочего процесса.

    Это утверждение верно относительно языков с изначально статической типизацией против языков с динамической, но не верно для TS как такового. Если не использовать маньячные правила типа обязательного ручного проставления типов, то в 80% случаев TS сам прекрасно выводит тип, без лишних телодвижений.
    Огромное ускорение от типизированого автокомплита в IDE и отсутствия возможности, например, случайно кинуть в функцию объект вместо строки, с лихвой перекрывает оставшиеся 20%.
    Редкие случаи когда TS писал мне "какую-то хрень" и отказывался что-то делать, заставляя сидеть и разбираться - на поверку оказывались сильно неочевидными косяками в моём коде, которые могли бы привести к реальным багам.
    Ответ написан
    Комментировать
  • В чем преимущества TS?

    yarkov
    @yarkov
    Помог ответ? Отметь решением.
    Во-первых, откуда вдруг на клиенте должны появиться огромные объёмы данных, которые будут генерировать эти ошибки и затруднять их поиск? Вы собрались логику на клиенте считать? Тогда у нас уже тут принципиальное несовпадение по вопросам "соответствующих инструментов". Клиент в вебе нужен только для представления. Ну ещё какой-то интерактив - формы, события... Всё.

    Как там в 2010?

    как мартышка ковыряешься с проставлением типов (а иногда это и не особо очевидно), а потом оказывается что какой-нибудь популярный плагин (условный слайдер) в твоей экосистеме - не типизирован. Ручками писать? Потрошить внутренности плагина? Искать аналог?

    Это уж как вам удобно. Вам в большинстве случаев понадобится типизировать от стороннего плагина несколько, а то и один метод и пару аргументов. Не хотите ручками? Идём на https://www.typescriptlang.org/dt/search/ и ищем готовое. А в большинстве случаев достаточно создать файлик типа modules.d.ts и там прописать строчку declare module 'ldapjs-type-parsers';, где подставить имя пакета, для которого нет типов.

    Вопрос звучит как "уговорите меня использовать TypeScript". В общем вас никто не заставляет. Если лично вам неудобно, то пишите на JS.
    P.S. Я уже молчу про удобство рефакторинга ))
    Ответ написан
    7 комментариев
  • Можно ли сделать паузу в javascript?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Можно, используйте await:
    window.addEventListener('load', async () => {
        
        var data1 = await $.getJSON('https://json файл разные');
        
        console.log('Получены данные:', data1);
        
        $(".mypanel").html(data1.hls);
        
        var A = ',{"get":"';
        var B = '",';
        var C = '"img":"';
        var D = '"}';
        var master = [A,data1.hls,B,C,D];
        
        var data2 = await $.post('zapros2.php', {name1: master});
        
        console.log('Получены еще данные:', data2);
        
    });

    Для справки: при AJAX запросах jQuery возвращает объект Deferred, который обратно совместим с Promise.

    Соответственно к нему можно применять await.
    Ответ написан
    1 комментарий
  • Как запустить computed в VUE3?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Ключевое слово в качестве имени переменной - что за бред?
    Как достучаться до параметров из script setup - читаем документацию.
    У вычисляемого свойства нет сеттера - так пусть будет функцией, объект не нужен.

    Исправляем:

    const props = defineProps({
      showBgBlue: {
        type: Boolean,
        default: true,
      },
    });
    
    const mainClass = computed(() => props.showBgBlue ? 'bg-blueGray-50 py-12' : 'bg-white');
    Ответ написан
    5 комментариев
  • Правильно ли я понимаю причину ререндеров в react+redux?

    @i1yas
    Предположу что вы делаете так:
    const MyForm = () => {
        const name = useSelector((state) => state.user.form.name);
        const surname = useSelector((state) => state.user.form.surname);
        const email = useSelector((state) => state.user.form.email);
        const agree = useSelector((state) => state.user.form.agree);
    
        ...
    }

    В этом случае даже один селектор тригернет ререндер компонента MyForm

    Нужно переработать форму так, чтобы компонент каждого поля внутри себя использовал useSelector:
    const Field = ({ name, ... }) => {
        const value = useSelector(...);
        ...
    }
    const MyForm = () => {
        return (
           <FormContainer ...>
              <Field name="name"/>
              <Field name="surname"/>
              <Field name="email"/>
              ...
           </Form>
        )
    }


    Собственно, это не специфика редакса, это то как хуки и рендеринг в реакте работают. Если ты подписался на значение, то все компненты ниже по дереву будут ререндериться на каждом апдейте. Общее правило - делать подписку на значение как можно ближе к месту использования этого значения.
    Ответ написан
    3 комментария
  • Зачем использовать callback функцию(именно передавать ее в качестве аргумента),если можно просто вызвать функцию,которая видна например по замыканию?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Callback-функция может меняться от вызова к вызову основной функции.
    Например, метод Array.prototype.sort(), в который передаётся функция, определяющая порядок сортировки. В зависимости от переданной callback-функции метод может сортировать как числа, так и строки или объекты, как в возрастающем или убывающем порядке, так и в более сложном, например по расстоянию от заданной точки.
    Кстати, onload в вашем примере - это тоже callback-функция, только переданная как свойство, а не аргумент другой функции.
    Ответ написан
  • Как добавить .webp в React?

    theobroma
    @theobroma
    javascript developer (ReactJS)
    1. Gulp точно не нужен. Мне прям вспомнился 2016 - тогда еще были сборки реакта галпом...
    2. В составе create-react-app используется webpack. Нужно просто расширить конфиг с помощью craco.
    Вот тутор , который сам для себя проверял на работоспособность: How to Optimize Images for Usage in Websites
    Ответ написан
    1 комментарий
  • Как типизировать асинхронный конструктор, если он не возвращает экземпляр?

    Попробуй вместо "асинхронного конструктора" сделать асинхронный фабричный метод, который будет возвращать промис с полностью собранным объектом

    class Something {
        constructor(private text: string){
    
        }
        
        public static async create(): Promise<Something>{
            const text = await Promise.resolve("txt");
            return new Something(text);
        }
    }
    Ответ написан
    1 комментарий
  • Jquery Что это за инициализация класса и зачем?

    @weart
    чтобы юзать внутри $('.pirozok')
    Ответ написан
    Комментировать
  • Почему везде используют const вместо let в JS?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Редактор кода домой не отпустит, пока переменную, которую нигде не изменяют,
    не объявить вместо let — const )

    Иммутабельность должна быть явной!

    При чтении кода гораздо удобнее для понимания изначально знать, что от константы сюрпризов не ждать.
    А переменную стоит посмотреть внимательнее: где, как, зачем и на что меняют.
    Ответ написан
    Комментировать