Ответы пользователя по тегу TypeScript
  • Почему при компиляции typescript в js с помошью команты tsc выходит ошибка JavaScript heap out of memory?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    По умолчанию node просит минимум 512МБ.
    Можешь попробовать поиграться с --max-old-space-size, но хз. Обычно билд жрёт память гигабайтами.)
    Ответ написан
    1 комментарий
  • Как правильно инициализировать объект с разным набором полей в Typescript?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Record<string, string>
    Если ключи вдруг и в правду всегда начинаются на key, то можно так: Record<`key${number}`, string>.:)
    Если хочешь чтоб TS всегда заставлял проверять что значение там есть, то так:
    Record<string, string|undefined>
    Ответ написан
    5 комментариев
  • Почему пишет что типы несовместимы?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Ты дальше то сообщение читай:
    Type 'Applications' is not assignable to type '{ [param: string]: string | number | boolean | readonly (string | number | boolean)[]; }'.
    Index signature for type 'string' is missing in type 'Applications'

    Вот так заработает:
    export type Applications = {
      "date": string,
      "firm": string,
      "full name": string,
      "phone": string,
      "comment": string,
      "code": string
    }

    Что за хрень эта ваша Index signature гугли сам.
    Ответ написан
    Комментировать
  • Как прикрутить автогенерацию типов на чистом Rest API (без GraphQL)?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Да через сваггер. openapi-generator и прочее.
    Ответ написан
    Комментировать
  • Как метод сделать generic?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    А зачем? Ты ведь явно указываешь что результат - Observable<PayerTypes>. Другим он быть не может и ни от чего не зависит. Зачем там url?

    Или может ты имеешь ввиду что-то типа такого:
    type Urls = {
        getPayerTypes: PayerTypes;
        getNPCTypes: NPCTypes;
    }
    
    private httpGet<K extends keyof Urls>(url: K): Observable<Urls[K]> {
      return this.http.get<Urls[K]>(url)
        .pipe(
          pluck('data'),
          catchError(this.handleError)
        );
    }
    Ответ написан
    Комментировать
  • Как правильно обработать события в React+Typescript?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Ну да.
    React.KeyboardEvent - это синтетическое событие, которое генерируется в React.
    KeyboardEvent - это оригинальное событие, которое генерируется в браузере.
    KeyboardEvent лежит в event.nativeEvent у React.KeyboardEvent.

    Если вам в принципе пофиг откуда событие в функцию будет прилетать, и вас интересуют только общие свойства - сделайте так:
    const closeByESC = (event: KeyboardEvent | React.KeyboardEvent) => {

    P.S. Ну и лишних обёрток не надо: document.addEventListener('keydown', closeByESC);
    Ответ написан
    Комментировать
  • Как передать аргумент функции, для сложного объекта?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    function changeField<T extends DataType, K extends keyof T>(data:T, fieldName:K, val: T[K]) {
      data[fieldName] = val
    }
    Ответ написан
    Комментировать
  • Чем отличается в TS return Promise.resolve(); от простого return;?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Внутри async функции - ничем.
    Typescript-eslint просто не имеет соответствующего правила, а стандартное правило не знает ничего о типах.
    Либо отключай это правило, либо ублажай его.
    Ответ написан
    Комментировать
  • Как правильно реализовать дженерик?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    typescriptlang.org/play
    spoiler
    type Alph = 'Q' | 'W' | 'E' | 'R' | 'T' | 'Y' | 'U' | 'I' | 'O' | 'P' | 'A' | 'S' | 'D' | 'F' | 'G' | 'H' | 'J' | 'K' | 'L' | 'X' | 'Z' | 'C' | 'V' | 'B' | 'N' | 'M'
    
    type CamelToSnake<T extends string> = T extends `${infer S1}${Alph}${string}` ? T extends `${S1}${infer S2}` ? `${Lowercase<S1>}_${CamelToSnake<Uncapitalize<S2>>}` : T : T;
    type AsdSnake = CamelToSnake<'asdAsdAsd'> // asd_asd_asd
    
    type SnakeToCamel<T extends string> = T extends `${infer S1}_${infer S2}` ? `${Lowercase<S1>}${Capitalize<SnakeToCamel<S2>>}` : T;
    type AsdCamel = SnakeToCamel<'asd_asd_asd'> // asdAsdAsd
    
    type SnakePropToCamel<T extends PropertyKey> = T extends string ? SnakeToCamel<T> : T;
    type CamelPropToSnake<T extends PropertyKey> = T extends string ? CamelToSnake<T> : T;
    
    let camelToSnakeCase: <T extends PropertyKey>(str: T) => CamelPropToSnake<T>;
    
    type CamelObjectToSnake<T extends {[key: string]: any}> = {
      [K in keyof T as CamelPropToSnake<K>]: T[K]
    }
    
    function camelCaseObject<T extends {[key: string]: any}>(obj: T) {
      return Object.entries(obj)
        .reduce((acc, [key, value]) =>
            (acc[camelToSnakeCase(key as keyof T)] = value, acc),
          {} as CamelObjectToSnake<T>
        )
    }
    
    function camelToSnakeKeysOfArrayObject<T extends Array<{[key: string]: any}>>(arr: T) {
      return arr.map(camelCaseObject) as {
        [K in keyof T]: CamelObjectToSnake<T[K]>
      };
    }

    Основано на варианте WbICHA но поддерживает объекты разных сигнатур, типа:
    camelToSnakeKeysOfArrayObject([{
      aaAa: 1,
      bbBb: true
    }, {
      aaAa: 'ggg'
    }]);
    Ответ написан
    8 комментариев
  • Передача параметра в миксин?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Ты очевидно неправильно используешь миксины. Представляй себе миксины как множественное наследование. Ты не можешь динамически менять класс от которого унаследован в зависимости от параметров инстанса, нет?
    Так что тут тебе надо придумать что-то иное. Скорее всего тебе надо просто реверснуть подход - сделать миксином то, что у тебя является компонентом, а компонентами(разными) - то что ты хоткл сделать миксином.)
    Ответ написан
  • Как исправить ошибку typescript?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    ...data[String(item.id)]?
    У тя самого важного куска кода не хватает:
    type 'xhr>'.
    , я так понимаю, там на самом деле Record<что-то, что-то xhr>.
    И именно там кроется точный ответ на твой вопрос.)
    Ответ написан
    Комментировать
  • Как импортировать типы из библиотеки vue?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Увы, vue-cli из коробки это не умеет. И когда последний раз смотрел в эту сторону(пару лет назад) - плагинов для этого тоже не было. 2 года - это долго, так что рекомендую погуглить.)

    Но тут ещё одна загвоздка, о которой тоже надо заранее позаботиться: тип импортированных файлов .vue по умолчанию просто Vue, без конкретизации свойств и прочего. Чтобы были нормальные ts-типы их надо отдельно генерировать. Для этого есть либа vuedts, она не идеальна, но свою работу делает.
    Если не найдёшь готовых решений - можешь чтот-то своё с этой либой намутить.)
    Ответ написан
    Комментировать
  • Во всех вакансиях по Front-End требования TypeScript?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    В первую очередь: автокомплит(когда у тя на выбор ide предлагает пару конкретно нужных вариантов, а не список из 100500 предположительно подходящих - это каеф), во вторую: отлов тупых ошибок на ранней стадии: ты просто не сможешь вызвать функцию с неверным параметром, будь то опечатка или логическая ошибка. Это прям сильно ускоряет и упрощает разработку.

    Всё остальное, типа там архитектура, чистота кода, хорошие практики бла бла бла - это так, оно может быть - а может не быть.)

    Ну и изучать толстую книжку от и до совсем не обязательно. Для начала ты можешь просто писать как в javascript, постепенно изучая новые фичи и добавляя.
    Ответ написан
    Комментировать
  • Как типизировать динамическое значение?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    export interface ICustomTableCellProps {
      contact: IUser;
      cellData: keyof IUser;
      onChange: Function;
    }

    Должны приходить строка или число (name, lastname, age, pager)

    Не понял, откуда тут число? Если вы используете это так contact[cellData], то cellData очевидно может принимать только значения ключей contact, а contact - это IUser...
    Ответ написан
    3 комментария
  • Как убрать повторяющиеся цифры (судоку)?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Абстракный вопрос, ответ зависит от твоего алгоритма и что тебе вообще надо.
    По хорошему тебе нужно просто не гененровать повторяющиеся числа изначально, а не убирать их постфактум.
    Ответ написан
    Комментировать
  • Что такое опора в TypeScript React?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Хз, никогда не слышал. Правда читаю по теме практически исключительно на английском.)

    А в остальном суть проста: JSX - это диалект js, несмотря на html-подобную запись - это явный и без особых хитростей javascript. А значит к нему применимы все возможности TypeScript. Надо разный набор props в зависимости от одного конкретного - юзай union и дженерики, надо получить набор свойств какого-то чужого компонента - юзай React.ComponentProps<typeof ForeignComponent> и т.д. и т.п.
    Ответ написан
    Комментировать
  • Как прописывать типы для связывания их с библиотечным кодом?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Нужен код. Вопрос абстрактный слишком. (или ты не заключил код в тег <code></code> :) )
    Получить тип из имеющейся функции: type Fuc = typeof func;.
    Получить тип параметров передаваемых в функцию и тип возвращаемого значения: Parameters<Func> и ReturnType<Func> соответсвенно.
    Для сложных типов с дженериками - смотреть надо отдельно.
    Ответ написан
    1 комментарий
  • Vue + Typescript коллизия названий для action / getter из разных неймспейсов, или как решить Duplicate identifier?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Декораторы декорируют уже готовый объект, после его создания, а не в процессе.
    Твой код, если бы работал, равносилен по логике этому:
    export default class RegisterForm extends Vue implements IRegistrationForm, IVerifyCodeForm  {
        @namespace(namespaceRegister).Getter
        @namespace(namespaceVerifyCode).Getter
        isSending!: boolean;

    Если тебя это устраивает - так и пиши. Нет - придумай что-то ещё.

    В инстансе класса(объекте) не может быть два одинаковых поля, хранящих одновременно разные значения. Логично же, нет?



    Насколько я могу судить, запись
    @namespace(<vuex-path>).Getter
        isSending!: boolean;

    Означает - при получения поля isSending мы запрашиваем поле из vuex по адресу <vuex-path>, при установке поле isSending - мы коммитим поле в vuex по адресу <vuex-path>.
    Если одно поле у тебя устанавливает и получает одновременно два значения в vuex - смотри выше, хотя по хорошему такое лучше объединять в mutation и хз, предусмотрена ли этой либой такая дичь . Если же это должны быть два отдельных значения, то КАК ты себе это представляешь?
    Ответ написан
  • Как сохранить нормплбно информацию в бд?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Казалось бы причём тут typescript?
    Чё это: { 2, "фыаацаа"} за херня? Массив в javascript в квадратных скобках задаётся, объект же требует конкретных ключей.
    Ответ написан
    Комментировать
  • Проблема при использовании ref, выводит ошибку?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Где код, Вася?

    Без кода ничего сказать нельзя, потому что в нормальном коде такая ошибка невозможна, типы абсолютно совместимы:
    declare let refObject: RefObject<'some'>;
    declare let legacyRef: LegacyRef<'some'>;
    
    legacyRef = refObject; // ok

    Возможно он у вас ждёт какой-то конкретный тип: useRef<Тип>(null), но тогда сообщение об ошибке должно его содержать.
    Ответ написан