Aetae

На самом деле вопрос в IDE. Вот тут нормально всё подсказывает например.

Другой вопрос, что при заданном так типе ты можешь писать и link и children одновременно. Чтоб такого делать typescript не давал нужно поле-дискриминатор, типа:

export type NavDataItem =
  | {
      type: 'a',
      name: string;
      link: string;
    }
  | {
      type: 'b',
      name: string;
      children: NavDataItem[];
    };

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

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

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");
// ...

Никак. Использовать два стейта.

https://habr.com/ru/post/556538/

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']
) . ');';

Мужик, async/await - это просто сахар над Promise. Любая async функция возвращает Promise по определению, любой await этот Promise разрешает.

async function setLegalLevel(): Promise<string> {
  ...
  await axios.post
  ...
}
...
const val: string = await setLegalLevel();

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

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 компонента.