Aetae

В каком-ниюудь модуле укажи:

declare global {
  const VUE_APP_WS_URL: string | undefined;
}

В тайпскрит всё должно быть типизированнно. Ты не можешь просто с потолка брать какие-то переменные.

Не слушай Василий Банников, плодить копипаст-типы точно не надо.

А по размещению типов точно такая же логика как с обычными модулями. Так что абсолютно нормально импортировать связанные типы из связанного модуля. Все теории и паттерны проектирования применяются и тут.

По хорошему конечно стоит придерживаться SOLID или чего-то подобного.
Т.е. в Grid сделать тип IGridItemProps с теми свойствами которые точно нужны для работы Grid, а в GridItem наследовать от него уже конкретную реализацию

interface GridItemProps extends IGridItemProps { ... }

. Однако это нужно только если теоретически могут появиться ещё GridItemSuper и GrigItemNice, если же такого быть не может и модули(компоненты) сами по себе тесно связны, то заморачиваться не стоит.

Потому что enum в typescript может мержиться:
Валидный код:

enum Membership {
  Simple,
  Standart,
  Premium
}

enum Membership {
  SimpleX = 99
}

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

Если фрем может быть подключён только к одному конкретному сайту, то заменить window.location.origin на origin целевого сайта. Если к нескольким, то либо заменить на звёздочку(*), если вам добра не жалко, либо вызывать postMessage несколько раз подряд, по одному для каждого домена.

P.S. attachEvent? Серьёзно?

Ты получаешь бинарник как текст в кодировке utf8, я правильно тебя понял?
Ничего не кажется тебе в этом деле странным?)

Полагаю файл бьётся на этапе преобразования - прочитать бинарник как utf8 - закодировать получившийся текст как из utf8 как бинарник.

Что у тебя скрывается под api? Axios? Сделай так:

api.get(`files/${id}`, {
  responseType: 'blob'
}).then((r) => {
  const url = URL.createObjectURL(r.data);
  // ...

Как уже сказал Lynn «Кофеман»: чтоб typescript не ругался на null ты должен сделать так, чтобы там не было null. Довольно очевидно, да.

На практике надо сделать либо так:

const data = useSelector(state => state.DataState.Data) ?? defaultData;

Либо так:
if (favorite && data) {

Ну или ещё как, на твой вкус.

let foo = function() {
  console.log("\n 1 here");
}

foo = ((old) => function() {
  const result = old.apply(this, arguments);
  console.log("\n 2 here");
  return result;
})(foo);

Как то так, но это такое себе: (?<=[^А-яёЁ]|^)Если(?=[^А-яёЁ]|$)

Также как и всегда, в этом суть типов.
Переданное значение может быть или одного типа или другого. И пока ты явно не проверишь через if какого же именно типа прилетело значение - использовать его нельзя.

this внутри function зависит от контекста вызова этой function.
Когда срабатывает onAuthStateChanged - вызывается переданная ему функция-обработчик, которой устанавливается какой-то this(или не устанавливается, и тогда он по умолчанию window или, в строгом режиме, undefined). И этот this точно никак не связан с текущим this Vue, потому что тот никаким образом не передан при вызове, и, соответственно onAuthStateChanged о нём ничего не знает.

Используй:
a) (async function(user) { ... }).bind(this) чтобы жёстко привязать эту функцию к this.
b) vm.g = 5;, т.к. таким образом конкретный this сохранён в переменную и не меняется в зависимости от контекста вызова.
c) стрелочную функцию async (user) => { ... }, её механика работы по сути осуществляет неявный bind.
d) функцию обработчик в методах Vue: Vue автоматически делает bind всех методов к this:

onAuthStateChanged(this.onAuthStateChanged)
methods: {
  onAuthStateChanged: async function (user) { ... }
}

Условно так:

const RunOutsideAngular = (target: any, memberName: string) => {
  const method = target[memberName];
  return Object.defineProperty(target, memberName, {
    writable: true,
    configurable: true,
    value(...args: any[]) {
        return this.ngZone.runOutsideAngular(method.bind(this, ...args))
    } 
  });
};

const RunOutsideAngularAll = (constructor: Function) => { 
    const keys = new Set<string>(); 
    let proto = constructor.prototype;

    do {
        if(proto === Object.prototype) break;

        Object.getOwnPropertyNames(proto).forEach(
            key => typeof proto[key] === 'function' 
                && key !== 'constructor'
                && keys.add(key)
        );
    } while (
        proto = Object.getPrototypeOf(proto)
    );

    keys.forEach(key => RunOutsideAngular(constructor.prototype, key));
}

class SomeClass {
    @RunOutsideAngular
    myFunc() {
        mycode.....
    }
}

// или

@RunOutsideAngularAll
class SomeClass {
    myFunc() {
        mycode.....
    }
}

RunOutsideAngular - по-хорошему надо типизировать дженериком под ангуляр.
RunOutsideAngularAll - обрабатывает все методы и функции, в т.ч. унаследованные, можно упростить чтоб работал только с методами текущего класса.

В ошибке всё написано. Прямой импорт из .json выводит недостаточно строгий тип. Метод ожидает что type будет строго одно из "direct" | "fanout" | "headers" | "topic", а получает просто string.

Можно сделать так:

return (await this.rascal.create(RascalConfig as BrokerConfig))

Но это чревато ошибками в самом конфиге.

Единственное на данный момент надёжное решение(пока не добавят эту фичу) - держать конфиг в .ts файле в виде:
const RascalConfig: BrokerConfig = { ... }
или
const RascalConfig = { ... } as const

Ну или написать простенький генератор соответствующего .d.ts к каждому .json.

В vue 3 всё ещё работают параметры extends и mixins. Не понятно чего ты пытаешься сделать.