在 TS 中找不到模块“X”错误的声明文件

目录

Could not find declaration file for module ‘X’ Error

1. 找不到模块“X”错误的声明文件
2. 找不到模块“反应”的声明文件
3. 找不到模块“lodash”的声明文件
4. 找不到模块“uuid”的声明文件
5. 找不到“styled-components”的声明文件

找不到模块 ‘X’ 错误的声明文件

当 TypeScript 找不到模块的类型声明时，会出现错误“Could not find declaration file for module”。

要解决该错误，请通过运行错误消息中的命令来安装模块的类型，例如npm install -D @types/module-name .

错误消息显示出现错误时应尝试运行的命令。上面截图中的命令是：

npm i --save-dev @types/uuid

uuid是导致示例中错误的包的名称。

通常，类型包的名称是一致的 -但您可以尝试使用官方TypeScript 类型搜索@types/module-name来查找定义包
。

如果您在使用以下任何软件包时遇到错误，请单击链接滚动到副标题。

1. 反应
2. lodash
3. uuid

如果错误仍然存​​在，请尝试将import特定包的语句更改为require().

// 👇️ for default export
const yourModule = require('your-module')

// 👇️ for named export
const { yourModule } = require('your-module');

第三方包可能不提供类型

如果错误仍然存​​在，您正在导入的第三方模块可能不提供类型，这意味着您需要在具有扩展名的文件中声明该模块.d.ts。

在您的常规 TypeScript 文件旁边创建一个名为的新文件module-name.d.ts，并向其中添加以下行。

declare module 'module-name';

确保替换module-name为导致错误的模块的名称。

any这将在导入时将包的类型设置为。

如果要为包添加自己的类型定义，请将此行替换为以下代码：

declare module 'module-name' {
  export function myFunction(): string;
}

该示例显示如何为myFunction返回字符串的名为的函数添加类型。

解决尝试将 JavaScript 文件导入 TypeScript 项目时的错误

如果在尝试将 JavaScript 文件导入 TypeScript 文件时出现“找不到模块‘X’的声明文件”错误，则必须在文件中设置该allowJs选项。truetsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    // ... your other options
  },
}

启用allowJs选项后，您可以导入带有.jsTypeScript.jsx文件扩展名的文件。

checkJs选项确定是否应在 JavaScript 文件中报告类型错误。

如果这仍然不起作用，您应该尝试通过在import.

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { myFunction } from 'module-name';

在语句上方添加这些import行将抑制错误消息。

目录

1. 找不到模块“反应”的声明文件
2. 找不到模块“lodash”的声明文件
3. 找不到模块“uuid”的声明文件
4. 找不到“styled-components”的声明文件

找不到模块“react”的声明文件

当 TypeScript 找不到与 react 相关的模块的类型声明时，会出现错误“找不到模块‘react’的声明文件”。

要解决错误，请通过运行错误消息中的命令来安装模块的类型，例如npm install -D @types/react。

错误消息显示出现错误时应尝试运行的命令。上面截图中的命令是：

npm i --save-dev @types/react

通常，类型包的名称是一致的 – ，但您可以尝试使用官方的TypeScript 类型搜索@types/module-name来查找定义包
。

导致错误的其他常见的反应相关包是：

npm i --save-dev @types/react-dom

# 👇️ if using react-router
npm i --save-dev @types/react-router

# 👇️ if using react-router-dom
npm i --save-dev @types/react-router-dom

如果错误仍然存​​在，您正在导入的第三方模块可能不提供类型，这意味着您需要在具有扩展名的文件中声明该模块.d.ts。

TypeScript 在查找.d.ts常规文件的相同位置查找文件
.ts，这由tsconfig.json 文件中的
include和设置决定。exclude

在您的常规 TypeScript 文件旁边创建一个名为的新文件module-name.d.ts，并向其中添加以下行。

declare module 'module-name';

确保替换module-name为导致错误的模块的名称。

如果要为包添加自己的类型定义，请将此行替换为以下代码：

declare module 'module-name' {
  export function myFunction(): string;
}

该示例显示如何为myFunction返回字符串的名为的函数添加类型。

如果这仍然不起作用，您应该尝试通过在import.

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { myFunction } from 'module-name';

在语句上方添加这些import行将抑制错误消息。

目录

1. 找不到模块“lodash”的声明文件
2. 找不到模块“uuid”的声明文件
3. 找不到“styled-components”的声明文件

找不到模块“lodash”的声明文件

当 TypeScript 找不到 lodash 相关模块的类型声明时，会出现错误“找不到模块‘lodash’的声明文件”。

要解决该错误，请通过运行错误消息中的命令来安装模块的类型，例如npm install -D @types/lodash.

错误消息显示出现错误时应尝试运行的命令。上面截图中的命令是：

npm i --save-dev @types/lodash

通常，类型包的名称是一致的 – ，但您可以尝试使用官方的TypeScript 类型搜索@types/module-name来查找定义包
。

如果错误仍然存​​在，您正在导入的与 lodash 相关的第三方模块可能不提供类型，这意味着您需要在具有扩展名的文件中声明该模块.d.ts。

TypeScript 在查找.d.ts常规文件的相同位置查找文件
，这由文件中的和设置
.ts决定。includeexcludetsconfig.json

在您的常规 TypeScript 文件旁边创建一个名为的新文件module-name.d.ts，并向其中添加以下行。

declare module 'module-name';

确保替换module-name为导致错误的模块的名称。

如果要为包添加自己的类型定义，请将此行替换为以下代码：

declare module 'module-name' {
  export function myFunction(): string;
}

该示例显示如何为myFunction返回字符串的名为的函数添加类型。

如果这仍然不起作用，您应该尝试通过在import.

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { myFunction } from 'module-name';

在语句上方添加这些import行将抑制错误消息。

# 目录

1. 找不到模块“uuid”的声明文件
2. 找不到“styled-components”的声明文件

# 找不到模块“uuid”的声明文件

当 TypeScript找不到与 uuid 相关的模块的类型声明时，会出现错误“找不到模块的声明文件uuid”。

要解决错误，请通过运行错误消息中的命令来安装模块的类型，例如npm install -D @types/uuid。

错误消息显示出现错误时应尝试运行的命令。上面截图中的命令是：

npm i --save-dev @types/uuid

如果这不起作用，请尝试安装最新版本的uuid包及其类型。

包和类型之间的版本应该匹配或至少彼此非常接近。

npm i uuid@latest

npm i --save-dev @types/uuid@latest

现在你应该可以像这样使用这个包了：

import { v4 as uuidv4 } from 'uuid';

console.log(uuidv4());

通常，类型包的名称是一致的 – ，但您可以尝试使用官方的TypeScript 类型搜索@types/module-name来查找定义包
。

如果错误仍然存​​在，您正在导入的与 uuid 相关的第三方模块可能不提供类型，这意味着您需要在具有扩展名的文件中声明该模块.d.ts。

TypeScript 在查找.d.ts常规文件的相同位置查找文件
，这由文件中的和设置
.ts决定。includeexcludetsconfig.json

在您的常规 TypeScript 文件旁边创建一个名为的新文件module-name.d.ts，并向其中添加以下行。

declare module 'module-name';

确保替换module-name为导致错误的模块的名称。

如果要为包添加自己的类型定义，请将此行替换为以下代码：

declare module 'module-name' {
  export function myFunction(): string;
}

该示例显示如何为myFunction返回字符串的名为的函数添加类型。

If this still doesn’t work, you should try to ignore the error by adding the
following lines above the import.

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { myFunction } from 'module-name';

Adding these lines above the import statement will suppress the error message.

# Could not find declaration file for ‘styled-components’

The error “could not find declaration file for module ‘styled-components'”
occurs when TypeScript cannot find the type declaration for a
styled-components-related module.

To solve the error, install the types for the module by running the command
from the error message.

Open your terminal and run the following command to solve the error.

npm i --save-dev @types/styled-components

# 👇️ you only need this if using REACT-NATIVE
npm i --save-dev @types/styled-components-react-native

Usually, the names of type packages are consistent – @types/module-name but
you could try to look for a definition package by using the official
TypeScript type search.

If the error persists, the style-components-related third-party module you are
importing might not provide typings, which means that you need to declare the
module in a file with a .d.ts extension.

TypeScript looks for .d.ts files in the same places it looks for your regular
.ts files, which is determined by the include and exclude settings in your
tsconfig.json file.

Create a new file named module-name.d.ts next to your regular TypeScript files
and add the following line to it.

declare module 'module-name';

Make sure to replace module-name with the name of the module that’s causing
the error.

If you want to add your own type definitions for the package, replace the line
with the following code:

declare module 'module-name' {
  export function myFunction(): string;
}

The example shows how to add types for a function named myFunction that
returns a string.

If this still doesn’t work, you should try to ignore the error by adding the
following lines above the import.

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { myFunction } from 'module-name';

Adding these lines above the import statement will suppress the error message.

I’ve also written a detailed guide on
how to use create-react-app with TypeScript.