Как перезаписать неверное определение типа TypeScript, установленное через @types/package

Скажите, что я хочу использовать модуль dotenv в моем проекте TypeScript и установить его .d.ts с помощью npm install @types/dotenv --save. Тогда я понимаю, что типы неверны. Например, функция config() не возвращает логический, но более богатый объект.

Как я могу справиться с этой ситуацией? Должен ли я просто скопировать загруженное определение типа в другой файл, обновить его вручную и удалить @types/dotenv? Есть ли способ лучше? (Мне нужно исправление сразу, а не после того, как оно было объединено сторонними разработчиками.)

Ответы

Ответ 1

Я бы проверял, что версия dotenv и версия @types/dotenv выровнены, что моя причина отсутствия функции.

Если это так, то более чистым способом было бы изменить сами .d.ts. Для этого: npm remove @types/dotenv. Создайте папку types в своем проекте. Скопируйте целую папку dotenv в node_modules/@types в ней.

Затем закрепите в нем d.ts и измените свой tsconfig.json, чтобы он также попросил вас посмотреть  новая папка для отсутствующих типов с typeRoots следующим образом:

{
"compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "typeRoots": [
        "./node_modules/@types",
        "./types/",
    ]
},
"files": ["./app.ts"]
}

(Не забудьте добавить ./node_modules/@types или другие типы, которые вы получили с npm, больше не будут найдены)

Надеюсь, что это поможет!

Ответ 2

Я скопировал бы файлы декларации из DefiniteTyped, изменил бы их локально, отправил PR в DefinitiveTyped, а затем следовал советам, данным по следующему вопросу, чтобы немедленно использовать изменения: Как я могу написать и использовать файлы пользовательских деклараций, которые не существуют на DefinitelyTyped?

Отправка обновлений в DefinitiveTyped

  1. Отправляйтесь в репозиторий DefiniteTyped: https://github.com/DefiniteTyped/DefiniteTyped/
  2. Клонируйте свою вилку локально. (часто это просто git clone https://github.com/YourUserName/DefinitelyTyped/)
  3. Создайте ветку для ваших обновлений (например, git branch changes-to-xyz)
  4. Внесите изменения в интересующий вас пакет.
  5. Добавить и зафиксировать файлы. (git add types; git commit)
  6. Затем вставьте их в свою git push -u origin changes-to-xyz DefiniteTyped (git push -u origin changes-to-xyz)

Используя эти обновления локально

  1. Создайте папку local-types в вашем проекте.
  2. Скопируйте измененную папку DefintelyTyped (пусть назовем ее xyz) в local-types/xyz.
  3. Из local-types/xyz запустите npm init --scope types --yes.
  4. В корне вашего проекта запустите npm install local-types/xyz

Это!

Ответ 3

Вы можете патчить @types/foo локально для своего приложения с помощью patch-package.

  1. Запустите npm я -D patch-package

  2. Просто измените node_moules/@types/foo в соответствии с вашими потребностями.

  3. Запустите npx patch-package @types/foo. Это создает файл diff в patches/ котором записываются изменения с последнего шага.

  4. Добавьте scripts: {postinstall: "patch-package"} в package.json чтобы исправления применялись после установки.

Ответ 4

Способ, который здесь не упомянут, - это поместить объявление типа в файл index.d.ts. В моем случае типы из @types/react-bootstrap были неправильными.

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

Для меня исправлением было удалить bsStyle и добавить bsClass:

import * as React from "react";
import { Sizes } from "react-bootstrap";

// Overwrite bad declaration from @types/react-bootstrap
declare module "react-bootstrap" {
    namespace Popover {
        export interface PopoverProps extends React.HTMLProps<Popover> {
            // Optional
            arrowOffsetLeft?: number | string;
            arrowOffsetTop?: number | string;
            bsSize?: Sizes;
            bsClass?: string; // This is not included in types from @types/react-bootstrap
            placement?: string;
            positionLeft?: number | string;
            positionTop?: number | string;
        }
    }
    class Popover extends React.Component<Popover.PopoverProps> { }
}

Обновить

Наконец, я укусил пулю и загрузил PR в DefiniteTyped для добавления нескольких пропущенных объявлений bsClass/bsSize.

Обновление 2: пример использования объявления слияния

Я хотел атрибут img loading="lazy" для <img> в React, но он еще не объединен. Я решил это так:

Файл: global.d.ts

// Unused import - only used to make this file a module (otherwise declare global won't work)
// tslint:disable-next-line:no-unused
import React from "react";

// Extend HTMLImageElement to support image lazy loading
// https://addyosmani.com/blog/lazy-loading/
declare global {
    namespace React {
        interface ImgHTMLAttributes<T> {
            loading?: "lazy" | "eager" | "auto";
        }
    }
}