Ответы пользователя по тегу TypeScript
  • Почему пишет что типы несовместимы?

    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 комментариев
  • Как исправить ошибку 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 комментарий
  • Как сохранить нормплбно информацию в бд?

    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), но тогда сообщение об ошибке должно его содержать.
    Ответ написан
  • Типизация массива для функции и смена типа при сравнивании?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    1. Перед return поставьте if(!gif) return null; и станет лучше.)
    Собсно суть логична: вы сами написали что gif может быть undefined, попытка получения свойства у undefined(gif.<some>) - очевидная ошибка.
    Вы должны заранее обработать такой случай и принять меры.

    object в современном ts занчит просто {} без всяких свойств. Если вам нужен любой объект с любыми свойствами, то используйте Record<string, any>. Однако по хорошему никаких any быть не должно, вам следует чётко описать структуру получаемого объекта.

    2. Ничего не понятно. useOnScreen - это нестандартных хук. Реализаций в гугле полно разных. Так что приведите его код и скажите, что вы хотите от него добиться.
    Ответ написан
    7 комментариев
  • Как задать условный дженерик, для входящих в функцию параметров?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Вообще это делается просто так:
    type C = {
        type: string
    }
    
    type Gen = <T extends C | C[]>(a: T) => T
    
    const gen: Gen = (a) => {
        return a
    }

    Если надо что-то более сложное с возвратным значением сделать, то так:
    type Gen = <T extends C | C[]>(a: T) => T extends C[] ? 1 : 2
    Ответ написан
    Комментировать
  • Как настроить глобальный @types в Koa?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Ну не правильно же, ты пытаешься присвоить тип string объекту вида {id: some}.
    const { id }: {id: string}
    Ответ написан
  • Как создать универсальный условный тип в Typescript?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Только через "палку", для того она и нужна:
    interface CreatureBase {
      type: string;
      subtype: string;
      params: unknown;
    }
    
    interface PeopleBase extends CreatureBase {
      type: 'People';
    }
    
    interface PeopleChild extends PeopleBase {
      subtype: 'child';
      params: {
        age: number;
        school: string;
      }
    }
    
    interface PeopleAdult extends PeopleBase {
      subtype: 'adult';
      params: {
        height: number,
        weight: number,
        age: number
      }
    }
    
    type Creature = PeopleChild | PeopleAdult; //...
    
    const arr: Creature[] = [
      {
        type: 'People',
        subtype: 'adult',
        params: {
          height: 1,
          weight: 2,
          age: 3
        }
      },
      {
        type: 'People',
        subtype: 'child',
        params: {
          school: 'foo',
          age: 3
        }
      },
      {
        type: 'People',
        subtype: 'adult',
        params: {
          school: 'foo', // err
          age: 3
        }
      }
    ]


    А обойти типизацию можно кастанув as any, или дважды кастанув в новый тип var as unknown as type. Но не нужно.)
    Ответ написан
    2 комментария