如何覆盖通过@types/package 安装的不正确的 TypeScript 类型定义

How to overwrite incorrect TypeScript type definition installed via @types/package

提问by Borek Bernard

Say that I want to use dotenvmodule in my TypeScript project and install its .d.ts using npm install @types/dotenv --save. Then I realize that the types are not correct. For example, the config()function doesn't return boolean but a richer object.

假设我想dotenv在我的 TypeScript 项目中使用module 并使用 .d.ts 安装它的 .d.ts npm install @types/dotenv --save。然后我意识到类型不正确。例如，该config()函数不返回布尔值，而是一个更丰富的对象。

How do I deal with this situation? Should I just copy the downloaded type definition to another file, update it manually and uninstall @types/dotenv? Is there a better way? (I need the fix right away, not after it has been merged by upstream maintainers.)

我该如何处理这种情况？我是否应该将下载的类型定义复制到另一个文件，手动更新并卸载@types/dotenv？有没有更好的办法？（我需要立即修复，而不是在上游维护者合并之后。）

采纳答案by deKajoo

I would check that the version of dotenvand the version of @types/dotenvare aligned, that my be the cause of the function missing.

我会检查版本dotenv和版本@types/dotenv是否对齐，我是函数丢失的原因。

If they are then the cleaner way would be to modify the .d.ts yourself. In order to do this: npm remove @types/dotenv. Create a folder typeson your project. Copy the whole folderdotenvfound in node_modules/@typesin it.

如果它们是，那么更简洁的方法是自己修改 .d.ts。为了做到这一点：npm remove @types/dotenv。types在您的项目上创建一个文件夹。复制在其中找到的整个文件夹。dotenvnode_modules/@types

Then fix your d.ts in it and modify your tsconfig.jsonto tell him to also look in your new folder for missing types with typeRootslike this:

然后在其中修复您的 d.ts 并修改您tsconfig.json以告诉他也在您的新文件夹中查找缺少的类型，typeRoots如下所示：

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

(Don't forget to add ./node_modules/@typesor other types you got with npm won't be found anymore)

（不要忘记添加，./node_modules/@types否则你用 npm 获得的其他类型将不再被发现）

Hope it helps!

希望能帮助到你！

回答by Daniel Rosenwasser

I would copy the declaration files from DefinitelyTyped, modify them locally, send a PR to DefinitelyTyped, and then follow the advice given on the following question to use the changes immediately: How can I write and use custom declaration files that don't exist on DefinitelyTyped?

我会从绝对类型复制声明文件，在本地修改它们，将 PR 发送到绝对类型，然后按照以下问题给出的建议立即使用更改：如何编写和使用不存在的自定义声明文件确定打字？

Sending updates to DefinitelyTyped

发送更新到绝对类型

1. Head over to the DefinitelyTyped repo: https://github.com/DefinitelyTyped/DefinitelyTyped/
2. Clone your fork locally. (often just git clone https://github.com/YourUserName/DefinitelyTyped/)
3. Create a branch for your updates (e.g. git branch changes-to-xyz)
4. Make changes to the package you're interested in.
5. Add and commit files. (git add types; git commit)
6. Then push them to your fork of DefinitelyTyped (git push -u origin changes-to-xyz)

1. 前往绝对类型存储库：https: //github.com/DefinitelyTyped/DefinitelyTyped/
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)

Using those updates locally

在本地使用这些更新

1. Create a local-typesfolder in your project.
2. Copy the DefinitelyTyped folder (let's call it xyz) you modified and into local-types/xyz.
3. From local-types/xyz, run npm init --scope types --yes.
4. From the root of your project, run npm install local-types/xyz

1. local-types在您的项目中创建一个文件夹。
2. 将xyz您修改过的绝对类型文件夹（我们称之为）复制到local-types/xyz.
3. 从local-types/xyz，运行npm init --scope types --yes。
4. 从项目的根目录运行 npm install local-types/xyz

That's it!

就是这样！

回答by golopot

You can patch @types/foolocally for your app by patch-package.

您可以@types/foo通过patch-package在本地为您的应用 程序打补丁。

1. Run npm i -D patch-package

2. Simply modify node_moules/@types/footo suit your needs.

3. Run npx patch-package @types/foo. This creates a diff file in patches/that records the changes from the last step.

4. Add scripts: {postinstall: "patch-package"}in package.jsonso that patches are applied after install.

1. 跑 npm i -D patch-package

2. 只需修改node_moules/@types/foo即可满足您的需求。

3. 运行npx patch-package @types/foo。这将创建一个差异文件，patches/其中记录了上一步的更改。

4. 添加scripts: {postinstall: "patch-package"}在package.json使补丁后安装使用。

回答by Erik Zivkovic

A way that is not mentioned here is to put a type declaration in a index.d.tsfile. For my case, the types from @types/react-bootstrapwere not correct.

这里没有提到的一种方法是将类型声明放在index.d.ts文件中。就我而言，来自的类型@types/react-bootstrap不正确。

I wanted to use bsClassas declared in the documentation, but it did not exist in Popover. Instead they included a prop that does not exist on Popovernamely bsStyle.

我想bsClass按照文档中声明的方式使用，但它不存在于Popover. 相反，他们包括了一个不存在的道具Popover即bsStyle。

The fix for me was to remove bsStyleand add bsClass:

我的解决方法是删除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> { }
}

Update

更新

I finally bit the bullet and uploaded a PRto DefinitelyTyped for adding a few missing bsClass / bsSize declarations.

我终于硬着头皮上传了一个 PR到绝对类型，以添加一些缺少的 bsClass / bsSize 声明。

Update 2: An example using declaration merging

更新 2：使用声明合并的示例

I wanted the img loading="lazy"attribute for the <img>tag in React, but it's not merged yet. I solved it this way:

我想要React 中标签的 imgloading="lazy"属性<img>，但它还没有合并。我是这样解决的：

File: global.d.ts

文件： 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";
        }
    }
}