Дмитрий Беляев

function preparedData<T extends Record<string, {name: string, id: string}[]>>(data: T) {
  return Object.keys(data).map((key) => {
    return data[key as keyof T].map((a) => ({
      val: a.name,
      newId: a.id,
    }));
  });
}

https://www.typescriptlang.org/play?#code/GYVwdgxg...

У Вас только 1 ul на странице, а переменная i у Вас вообще никак не относится к найденным ul

let ula = document.getElementsByTagName("ul")[0];

for(let i = 0; i < arr.length; i++) {
  ula.insertAdjacentHTML('beforeend', `
  <li>
    <a href="#">${arr[i]}</a>
  </li> 
  `);
}

Функциональные типы в TS - это типы, значением которых может являться любая функция с совместимой сигнатурой. Методы классов - это те же функции. При этом надо помнить, что this в JS/TS определяется вызовом, а не объявлением функции/метода.
И это существенно отличает их от делегатов в шарпе, которые по своей сути являются умной ссылкой на метод конкретного инстанса.

Аналог делегата из шарпа на TS может выглядеть как то так:

class Delegate<Target, Args extends any[], Ret> {
    constructor(
        private target: Target,
        private method: (this: Target, ...args: Args) => Ret,
    ) {}

    public invoke(...args: Args): Ret {
        return this.method.apply(this.target, args);
    }
}

Вот только конструировать такой делегат в отличии от шарпа придется явно.

https://www.typescriptlang.org/play?#code/MYGwhgzh...

Помимо описанных в других ответах LIMIT и OFFSET есть еще такая вещь как курсор.
Курсор позволяет читать строки по одной, но требует открытого соединения с СУБД.
На самом деле большинство СУБД в ответ на запрос возвращают именно курсор, просто функции из библиотеки, которая работает с СУБД, вычитывают курсор до конца, если смысл таких функций вернуть массив строк из результата запроса.
Курсор штука ленивая, то есть поиск следующей строки СУБД будет делать только в тот момент, когда у нее попросят следующую строку для курсора.
В случае если у нас есть постоянный коннект к СУБД, вариант запросить сразу все и потом дергать курсор понемногу будет работать быстрее чем множество запросов с LIMIT, так как СУБД будет лишь единожды анализировать запрос, подбирать подходящие для него индексы и т.д.

То есть в Вашем случае нужно сначала понять, можно ли гарантированно поддерживать коннект к СУБД между ивентами.
Если да, то отправляете в СУБД запрос и получаете курсор перед подпиской на ивент, а в хендлере самого ивента уже дергаете курсор по 5 раз.
Если нет, то на каждый ивент отправляете запрос с LIMIT и OFFSET.

Webpack может отследить только ошибки компиляции, такие как SyntaxError или если лоадер вернул ошибку.
ReferenceError происходит в рантайме и Webpack ничего о ней знать не может в принципе.

В TypeScript есть литеральные типы ('some string', 1, 2, 3, true, false).
Значение константы поменять нельзя, поэтому TypeScript выводит для них литеральный тип.
Поэтому тип q будет не boolean, а true.

const arr = [10, 20, 30, 50, 235, 3000];
const digits = [1, 2, 5];
for (const num of arr) {
  const digit = (num / 10 ** (Math.log10(num) | 0)) | 0;
  if (digits.includes(digit)) {
    console.log(num);
  }
}

А что Вам не понятно в описании текста ошибки?

Argument of type 'ComputedRef' is not assignable to parameter of type 'string'.

Давайте я засуну в переводчик за Вас:

Аргумент типа 'ComputedRef' не может быть присвоен параметру типа 'string'.

const pErrorMinMessage = computed<string>(() => {
  return 'world'
})
const fun1 = function (val: string) {
  console.log('hello' + val)
}

fun1(pErrorMinMessage.value)

https://www.typescriptlang.org/play?jsx=0&module=1...

type AlbumType = {
  id: number;
  title: string;
};

enum ActionPoints {
  SET_ALBUMS = "SET_ALBUMS",
  ADD_ALBUM = "ADD_ALBUM",
  REMOVE_ALBUM = "REMOVE_ALBUM"
}

type ActionType = {
  type: ActionPoints.SET_ALBUMS;
  payload: AlbumType[];
} | {
  type: ActionPoints.ADD_ALBUM;
  payload: AlbumType;
} | {
  type: ActionPoints.REMOVE_ALBUM;
  payload: number;
};

const reducer = (state: AlbumType[], action: ActionType) => {
  switch (action.type) {
    case ActionPoints.SET_ALBUMS:
      return action.payload;
    case ActionPoints.ADD_ALBUM:
      return [...state, action.payload];
    case ActionPoints.REMOVE_ALBUM:
      return state.filter((album) => album.id !== action.payload);
    default:
      return state;
  }
};

mode === "development" ? "style-loader" : MiniCssExtractPlugin.loader,

вот на этой строке Вы обращаетесь к переменной mode, которая нигде не объявлена

Typescript compiler - это инструмент проверки типов и компиляции typescript в javascript. Так же он умеет транспайлить конструкции новых стандартов js в более старые стандарты, но это не основная задача этого инструмента, и делает он это хуже целевых инструментов, в частности его можно настроить только на конкретный стандарт.

Babel - это инструмент для парсинга js кода в AST, обхода и модификации AST и обратной сериализации AST в js. Так же это еще и экосистема плагинов и пресетов. Плагины как правило реализуют транспиляцию одной из фич более нового стандарта в более старый. Пресеты - это просто конфигурируемый набор плагинов.
Так же в Babel AST есть поддержка некоторых расширений js (а ts - это тоже расширение js), но включается это все флагами.

В экосистеме babel есть preset-env нацеленный именно на транспиляцию более новых стандартов в более старые. Его особенностью является поддержка browserlist и подключения только тех плагинов, которые нужны для указанных браузеров. За счет этого получается более оптимальный js на выходе, так как многие фичи после транспайлинга работают медленнее чем нативные и занимают больше кода.

Еще в экосистеме babel есть preset-typescript, который включает поддержку ts синтаксиса и транспиляцию ts в js. При этом, в отличии от tsc, он не делает проверку типов, а некоторые сущности может обрабатывать неправильно (как и большинство сторонних компиляторов ts, т.к. у ts нет строгой спеки и единственным источником правды является код tsc, который далек от идеального).

Оптимальным по выходному результату (пусть и за счет времени сборки) будет вариант, когда сначала ts код обрабатывается через tsc без транспиляции в старые стандарты, а затем происходит транспиляция с помощью babel + preset-env + browserlist.

https://www.typescriptlang.org/tsconfig#resolveJso...

Ну или создайте рядом с db.json файл db.json.d.ts со следующим содержимым:

declare const JSON: {
    id: number;
}[];
export default JSON;

interface Props {
  list: {
    id: number;
    name: string;
    children?: Props['list'];
  }[];
}

или

interface PropsListItem {
  id: number;
  name: string;
  children?: PropsListItem[];
}

interface Props {
  list: PropsListItem[];
}

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

Но если все же стили в каждом конкретном случае определяются сервером, то можно генерировать их на лету. Правда есть проблема, с тем, что такие стили не редактируются через devtools (хотя сейчас может уже что изменилось). Несколько лет назад я сталкивался с подобной задачей, когда стили для некоторых вариантов отображения UI задавались пользователями, я тогда написал вот такой модуль для решения этой задачи:
https://gist.github.com/bingo347/cb8e62606e206c009...