• Как писать fullstack с webpack?

    Aetae
    @Aetae
    Тлен
    webpack devServer, в частности функция proxy.
    Webpack поднимает сервер с горячей перезагрузкой фронта, бэк сервера поднимаешь на других портах, и обращаешься к api прозрачно с помощью встроенного прокси.
    Ответ написан
    Комментировать
  • Почему vue watch выдает обратное значение?

    Aetae
    @Aetae
    Тлен
    Потому что не isDropped(oldVal, newVal), а isDropped(newVal, oldVal), лол.
    Ответ написан
    Комментировать
  • Почему переменная не копирует ссылку на объект?

    Aetae
    @Aetae
    Тлен
    = - это присваивание, а не изменение. В случае с объектом присваивание ссылки, но всё ещё присваивание.
    Ответ написан
    Комментировать
  • Как изменить, а не перезаписасать тип у вложенных объектов?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Выделить ему свой интерфейс. Ничего страшного если их будет много Иесли будут дженерики тоже ничего страшного.
    Ответ написан
    3 комментария
  • Как динамически создавать экземпляры разных классов, с доступом к их типам?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Т.е. по сути у тебя (определяемый в рантайме) инстанс неизвестного класса, абсолютно рандомного, раз даже сигнатуры схожих методов не совпадают.

    Ну тогда какбэ остаётся только проверять руками, что за инстанс имеем перед использованием. Типа if (instance instanceof Animal) { ... }, как иначе то? Как-то ты же сейчас проверяешь какой метод вызвать specificAnimalMethod или specificHumanMethod?
    Ответ написан
  • Почему typescript не видит перегрузку?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    На самом деле вопрос в IDE. Вот тут нормально всё подсказывает например.

    Другой вопрос, что при заданном так типе ты можешь писать и link и children одновременно. Чтоб такого делать typescript не давал нужно поле-дискриминатор, типа:
    export type NavDataItem =
      | {
          type: 'a',
          name: string;
          link: string;
        }
      | {
          type: 'b',
          name: string;
          children: NavDataItem[];
        };
    Ответ написан
    Комментировать
  • Почему я получаю undefined?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Ну в комменте уже ответили, что приходит тебе не совсем то, что ты там в типе написал.
    Рекомендую не писать руками интерфейсы для готового json, лучше тыкнуть в консоли на ответе "Copy object" и вставь в любой конвертер, который гуглится по "json to ts", например https://app.quicktype.io/. Так ты точно не ошибёшься, а потом уже можешь уточнить тип руками.

    В идеале, конечно, неплохо бы каждый ответ от сервера считать unknown и прогонять через тайпгард, проверяя руками, что он соответствует типу, но это не частая практика, увы.
    Ответ написан
  • Как правильно задать Types для объектов где есть несколько типиов "контента"?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    export interface Post {
      title: string;
      content: Content[]; // мы ждём тут массив, а не кортеж из одного элемента
    }
    
    export type TContentType = "text" | "video" | "header" | "code" | "images" | "remark" | "materials";
    
    // базовый интерфейс, чисто для надёжности, никуда не экспортируем
    interface IContentBase {
      type: TContentType
    }
    
    export interface ITextContent extends IContentBase {
      type: "text";
      value: string;
    }
    
    export interface IVideoContent extends IContentBase {
      type: "video";
      url: string;
    }
    
    // ...
    
    export interface IOtherContent extends IContentBase {
      type: "header" | "code" | "images" | "remark" | "materials";
    }
    
    // делаем union с type как discriminator field
    export type Content = ITextContent |  IVideoContent | IOtherContent;
    
    const items: Post = {
      title: "foo bar",
      content: [
        {type: "text", value: "lorem 1"},
        {type: "video", url: "lorem 2"},
        {type: "text", value: "lorem 3"}
        // ...
      ]
    };
    
    // используем тайпгард, тайпскрипт недостаточно умный, чтоб вывести Extract<Content, { type: "text" }> в таких случаях
    const onlyTextType: ITextContent[] = items.content.filter((it): it is ITextContent => it.type === "text");
    // ...
    Ответ написан
    Комментировать
  • Как вернуть стейт к начальному состоянию?

    Aetae
    @Aetae
    Тлен
    Никак. Использовать два стейта.
    Ответ написан
    Комментировать
  • Как получить переменную php в typeScript?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    1. PHP испоняется на сервере.
    2. Javascript исполняется на клинете.
    3. Typescript исполняется у тебя на машине(\в CICD) при компиляции в javascript.

    Исходя из этого ts и php никак напрямую не связаны.

    Ты можешь либо делать из кода ajax запрос на сервер, и получать в ответ константы.
    Либо ты можешь просто подключать через <script> php файл который сгенерирует простой скрипт устанавливавший заданные константы и в js, условно так:
    header("Content-Type: application/x-javascript");
    
    define("CONSTANT", 1);
    
    echo 'Object.assign(window,' . json_encode(
    	get_defined_constants(true)['user']
    ) . ');';
    Ответ написан
    Комментировать
  • Как написать функцию с возвращаемым значением типа string, возвращающую одно из полей json'а, пришедшее с запросом axios?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Мужик, async/await - это просто сахар над Promise. Любая async функция возвращает Promise по определению, любой await этот Promise разрешает.
    async function setLegalLevel(): Promise<string> {
      ...
      await axios.post
      ...
    }
    ...
    const val: string = await setLegalLevel();
    Ответ написан
    Комментировать
  • Как обратиться к свойству объекта в typescript, если оно есть только в одном из нескольких возможных типов этого объекта?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Как и во всех подобных случаях - проверить какой конкретно у тебя там тип перед использованием:
    declare const a: {a: 1, b: 2} | {a: 1};
    
    if ('b' in a) { // ts тут сужает тип до {a: 1, b: 2}
      console.log(a.b);
    }

    P.S. Ты нарушаешь правило 3.8, не делай так.

    Ответ написан
    Комментировать
  • Как правильно отобразить GIF после запроса AJAX?

    Aetae
    @Aetae
    Тлен
    Как-то так:
    $.ajax({
      url: "/handlers/barcode.php",
      type: "get",
      xhrFields: { responseType: 'blob'},
      converters: {'* image': true}, 
      data: {
        data: 'ABC-abc-1239',
        code: 'Code128',
      },
      success: function(response) {
        $('#barcode').html('<img src="' + URL.createObjectURL(response) + '"/>');
      },
      error: function(xhr) {
        console.log('Ошибка запроса')
      }
    });


    * С удивлением узнал что jquery до сих пор не может работать с responseType из коробки. Что только подтверждает что пора о нём забыть.

    Если не заработает(зависит от версии jq) - выкинь его нафиг, и исползуй нативный fetch:
    fetch('/handlers/barcode.php?data=ABC-abc-1239&code=Code128')
      .then(res => res.blob())
      .then(URL.createObjectURL)
      .then(src => {
        $('#barcode > img').attr('src', src)
      })
      .catch(err => {
        console.log('Ошибка запроса')
      });
    Ответ написан
    4 комментария
  • Типизация большого объекта в Typescript?

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

    Любой тип который вы присваиваете приходящему в будущем ответу является по сути обманом TS'а, потому что вы не можете гарантировать, что с сервера не прилетит что-то другое.

    Правильным действием является обозначение любого приходящего ответа от сервера как unknown, и работа с ним исходя из этого, со всеми требуемыми проверками перед какими-либо действиями.
    Ответ написан
    Комментировать
  • Как получить последовательное выполнение async функций?

    Aetae
    @Aetae
    Тлен
    Где return в actionpl? Оно ничего не возвращает у тебя, что в случае с async значит пустой Promise.
    Ответ написан
    1 комментарий
  • Проблемы с типами при наследовании от абстрактного класса или при импликации от интерфейса?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Ну потому что extend - это "расширение", и главное совместимость, м?

    В данном случае любой UserInfo обратно совместим с BaseUserInfo, т.к. для BaseUserInfo.getState() возвращаемое значение имеет тип void (не путать с undefined), который никак не может быть использован (сам ts не даст).
    abstract class BaseUserInfo {
      abstract getState(): void;
    }
    
    class UserInfo extends BaseUserInfo { 
      override getState = (): number => 1;
    }
    
    function useInfo(info: BaseUserInfo) {
      // An expression of type 'void' cannot be tested for truthiness.(1345)
      if (info.getState()) { // не получится так сделать и всё сломать
        console.log('never')
      }
    }
    Ответ написан
    Комментировать
  • Как с помощью регулярного выражения выбрать то, что находится между символами?

    Aetae
    @Aetae
    Тлен
    Правильный ответ: нельзя (невозможно надёжно) использовать регулярные выражения для парсинга html. Используйте библиотеку для html-парсинга, имеющуюся для любого языка, какой бы вы не использовали.

    Ответ: /(?<=">).*?(?=<\/)/.
    Ответ написан
    2 комментария
  • Как правильно написать enum в React Typescript?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Ну какбэ очевидно, что в item.deviceType у тебя строка, а не DeviceType. Проверь что у тебя там в item.
    Ответ написан
  • Как импортировать все из папки?

    Aetae
    @Aetae
    Тлен
    Импортировать всю папку можно, но вот получить доступ ко всему - нельзя, можно только написать функцию которая будет забирать конкретный модуль:
    function getCommand(file) {
      return import(
        /* webpackInclude: /[A-Za-z0-9-_,\s]+\.ts$/i */
        `./commands/${file}`
      );
    }


    Ну и типы в обоих случаях нельзя так импортировать.
    Типы проверяются перед компиляцией и выкидываются, они никак уже не участвуют в сборке вебпака.
    Как ты это себе представляешь?

    Возможно тебе просто нужны глобальные типы? Тогда используй .d.ts, и\или подключай их в tsconfig.json.
    Ответ написан
    Комментировать