我阅读了TypeScript模块解析的工作原理。

我有以下存储库:@tsstack/di。编译后,目录结构如下:

├── dist
│   ├── annotations.d.ts
│   ├── annotations.js
│   ├── index.d.ts
│   ├── index.js
│   ├── injector.d.ts
│   ├── injector.js
│   ├── profiler.d.ts
│   ├── profiler.js
│   ├── providers.d.ts
│   ├── providers.js
│   ├── util.d.ts
│   └── util.js
├── LICENSE
├── package.json
├── README.md
├── src
│   ├── annotations.ts
│   ├── index.ts
│   ├── injector.ts
│   ├── profiler.ts
│   ├── providers.ts
│   └── util.ts
└── tsconfig.json

在package.json中,我写了“main”:“dist/index.js”。

在Node.js中,一切正常,但TypeScript:

import {Injector} from '@ts-stack/di';

找不到模块“@ts stack/di”的声明文件/path/to/node_modules/@tsstack/di/dist/index.js”隐式具有“any”类型。

然而,如果我按如下方式导入,那么一切都正常:

import {Injector} from '/path/to/node_modules/@ts-stack/di/dist/index.js';

我做错了什么?


当前回答

由于Javascript中缺少约束,TypeScript基本上是在实现规则并向代码中添加类型,以使代码更清晰、更准确。TypeScript要求您描述数据,以便编译器可以检查代码并查找错误。编译器将告诉您是否使用了不匹配的类型,是否超出了范围或试图返回不同的类型。因此,当您使用TypeScript的外部库和模块时,它们需要包含描述代码中类型的文件。这些文件被称为扩展名为d.ts的类型声明文件。npm模块的大多数声明类型都已编写,您可以使用npm install@types/module_name(其中module_name是要包含其类型的模块的名称)来包含它们。

但是,有些模块没有它们的类型定义,为了消除错误并使用import*作为“模块名”中的模块名导入模块,请在项目的根目录中创建一个文件夹类型,在其中创建一个带有模块名的新文件夹,并在该文件夹中创建模块名.d.ts文件并写入声明模块“模块名。”。之后,只需转到tsconfig.json文件,在compilerOptions中添加“typeRoots”:[“../../typings”,“../../node_modules/@types”](具有文件夹的正确相对路径),让TypeScript知道在哪里可以找到库和模块的类型定义,并在文件中添加一个新属性“exclude”:[。下面是一个tsconfig.json文件的示例:

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "sourceMap": true,
        "outDir": "../dst/",
        "target": "ESNEXT",
        "typeRoots": [
            "../../typings",
            "../../node_modules/@types"
        ]
    },
    "lib": [
            "es2016"
    ],
    "exclude": [
        "../../node_modules",
        "../../typings"
    ]
}

通过这样做,错误将消失,您将能够遵守最新的ES6和TypeScript规则。

其他回答

我也得到了这一点,让我困惑了一段时间,即使已经安装了模块和类型,并多次重新加载了IDE。

在我的案例中,解决方法是终止终端进程,删除node_modules,清除节点包管理器缓存,重新安装,然后重新加载编辑器。

一个简单的解决方案:

// example.d.ts
declare module 'foo';

如果要声明对象的接口(推荐用于大型项目),可以使用:

// example.d.ts
declare module 'foo'{
    // example
    export function getName(): string
}

如何使用?易于理解的

const x = require('foo') // or import x from 'foo'
x.getName() // intellisense can read this

@ktretyak和@Retsam的答案是正确的,但我想添加一个完整的实时示例以及我必须做的事情:

错误:

错误TS7016(TS)找不到模块的声明文件'反应区域选择'。'C:/Repo/node_modules/react region select/lib/RegionSelect.js'隐式具有“any”类型。尝试npm i--save dev@types/react region select(如果存在)或添加新声明包含“声明模块”的(.d.ts)文件

运行npm i--save dev@types/react region select时出现错误:

npm错误!代码E404npm错误!404未找到-GEThttps://registry.npmjs.org/@类型%2反应区域选择-未找到npm错误!404'@类型/react-region-select@latest'不是在npm注册表中。npm错误!404你应该让作者发布它(或者自己使用这个名字!)npm错误!404注意您也可以从npm tarball、文件夹、httpurl或giturl安装。

考虑到create-react-app创建了一个名为react-app-env.d.ts的文件,我尝试将声明模块放入“react region select”;但我还是收到了错误。

然后,我在src中创建了一个名为typings的新文件夹,以及名为react-region-select.dts的文件

declare module 'react-region-select';

这样做之后,错误消失了,我可以像文档所述那样导入它:

import RegionSelect from "react-region-select"; 

https://github.com/casavi/react-region-select

这对我有用。

// modules.d.ts 
declare module 'my-module';
// tsconfig.json 
{
  ...
  "include": [
    ...
    "src", "modules.d.ts"
  ]
}

// Import
import * as MyModule from 'my-module'
...
const theModule = MyModule()
...

这种方式对我有效:

1.在声明文件(例如index.d.ts)中添加自己的声明(可能在项目根目录下)

declare module 'Injector';

2.将index.d.ts添加到tsconfig.json

  {
    "compilerOptions": {
        "strictNullChecks": true,
        "moduleResolution": "node",
        "jsx": "react",
        "noUnusedParameters": true,
        "noUnusedLocals": true,
        "allowSyntheticDefaultImports":true,
        "target": "es5",
        "module": "ES2015",
        "declaration": true,
        "outDir": "./lib",
        "noImplicitAny": true,
        "importHelpers": true
      },
      "include": [
        "src/**/*",
        "index.d.ts",   // declaration file path
      ],
      "compileOnSave": false
    }