Aetae

Как и во всех подобных случаях - проверить какой конкретно у тебя там тип перед использованием:

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, не делай так.

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

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

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

Где return в actionpl? Оно ничего не возвращает у тебя, что в случае с async значит пустой Promise.

Ну потому что 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')
  }
}

Ну какбэ очевидно, что в item.deviceType у тебя строка, а не DeviceType. Проверь что у тебя там в item.

Импортировать всю папку можно, но вот получить доступ ко всему - нельзя, можно только написать функцию которая будет забирать конкретный модуль:

function getCommand(file) {
  return import(
    /* webpackInclude: /[A-Za-z0-9-_,\s]+\.ts$/i */
    `./commands/${file}`
  );
}

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

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

Если ты не указываешь при useState тип стейта руками, то он выводится автоматически.

useState([null, null]); - ts выведет тут тип null[], то есть массив null, про Date он никак догадаться не может. Следует указать явно: useState<Array<Date | null>>([null, null]);

Так делать нельзя: нельзя писать напрямую в стор, без коммита - что у тебя происходит с помощью v-model. У тебя сейчас должна быть полна консоль ворнингов.

Меняешь v-model на :value и @input="...." и работаешь с этим. Имя файла лежит в $event.target.files[0].name если что.

Глубоко не вникал, но наверное тут логично испрользовать тайп гарды:

// какая-то проверка достаточная чтобы сказать, что у нас тут NextPageContext;
const isNextPageContext = (ctx: unknown): ctx is NextPageContext => false; 
// аналогично для AppContext
const isAppContext = (ctx: unknown): ctx is AppContext => false; 

const baseQuery = fetchBaseQuery({
  baseUrl: 'http://localhost:7777/api/auth',
  prepareHeaders: (headers, { extra }) => {
    let req;

    if (isNextPageContext(extra)) {
      req = extra.req;
    } else if (isAppContext(extra)) {
      req = extra.ctx?.req;
    }

    if (req) {
      headers.set('Cookie', req.headers.cookie || '');
    }

    return headers;
  },
  credentials: 'include',
});

Как-то так (не проверял):

interface CreateConnectionOptions extends ConnectOptions {
  retryCount?: number;
  retryDelay?: number;
}

function createConnection(uri: string, {
  retryCount = 6,
  retryDelay = 1000,
  ...mongooseConnectOptions
}: CreateConnectionOptions = {}): Observable<Connection> {
  let connection$ = defer(() => mongoose.createConnection(uri, mongooseConnectOptions).asPromise());
  
  if (retryCount > 0) {
    connection$ = connection$.pipe(retry({
      count: retryCount,
      delay: retryDelay
    }));
  }
  
  return connection$.pipe(shareReplay(1));
}

Очевидный ответ - не удалять из store пока они остаются на экране.)
Если юзер может их "закрыть" - удалять по событию закрытия.
Если они должны пропадать по таймауту - удалять по таймауту.
Иначе - удалять по хуку onUnmounted компонента.

Router 4 - для Vue 3, для 2 нужен 3.

А откуда тебе знать сколько он займёт, если данные произвольны?

Если в receivedData может быть фиксированное количество записей фиксированных размеров, то условно как-то так:

<div v-if="loading">
  <div v-for="foo in 10" class="fixed-size loading"></div>
  Loading
</div>
<div v-else>
  <div v-for="foo in receivedData.foo" class="fixed-size">{{ foo }}</div>
  {{ receivedData.bar }}
</div>

Если объект уже есть, то его самого можно использовать как тип.

const obj = { ... }; 
type Obj = typeof obj;

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

Если поля поддаются какой-то логике, то с использованием литералов можно сделать компактный тип.

const products = {
  value: false
};
console.log(products)
console.log(products.value)
products.value = true;

Разницы с ref в данном случае никакой.

1. Какой-либо общий css можно использовать только в том случае если компоненты дети не могут существовать без компонента родителя. В таком случае выделяете отдельную папочку под такую связку компонентов, там делаете файлик <compnent-group-name>.variables.scss и импортируете его куда надо.
2. Если эти компоненты не связаны - любые управляющие и изменяющие поведение компонента вещи нужно передавать исключительно через props. Каждый отдельный компонент - чёрный ящик. У тебя должна быть возможность полностью и кардинально изменить вёрстку внутри компонента, не изменив его поведение. В vue 3 для этого даже есть удобная конструкция v-bind внутри <style>.

P.S. Ну и само собой если этот $gap глобальный параметр, можно в конфиге vue\sass-loader добавить общий для всех файл с переменными.

По поводу джанго и что там с CORS ничего не скажу, но если ты используешь @vue/cli или просто webpack для разработки фронта на той же машине, это решается удобно на стороне devServer прописыванием proxy, который собственно прозрачно проксирует все запросы к бэку куда укажешь, без дополнительной настройки сервера.