我阅读了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';
我做错了什么？
这种方式对我有效：
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
}
在我看来，解决这个问题的三种不同方法都不起作用。一旦在package.json中将“type”设置为“module”，那么它将符合ES module而不是CommonJS语法。我能够根据package.json设置使用ES模块语法来解决这个问题。
import ws from 'ws'
export const create = (/** @type {string} */ accessToken) => {
const WebSocket = ws;
return new WebSocket(endpoint, accessToken, sslOptions);
}
这样，您就可以在“ws”模块中使用WebSocket类。这是一个节点模块的示例，但基本上可以将任何类型的节点模块和函数放在其中。
下面这些对我不起作用：
npm安装-D@types/module名称const foo=require（'模块名称'）；
// index.d.ts
declare module 'foo';
tsconfig.json中的配置
"noImplicitAny": true,
"allowJs": true
在许多项目中，我面临着许多包的相同问题。所以我创建了Declarator，一个自动生成类型声明的npm包。
它基本上通过在后台运行tsc-emitDeclarationOnly来工作。
您可以从npm安装它：
npm install --save-dev declarator
yarn add -D declarator
然后创建一个简单的声明器.json文件：
{
"$schema": "https://raw.githubusercontent.com/ArthurFiorette/declarator/master/schema.json",
"packages": ["package1","package2"]
}
并创建一个脚本来运行它：
使用postinstall脚本将在每次安装包时运行它，这可能很有用
{
"scripts": {
"postinstall": "declarator"
}
}
它不会生成强大的类型，在这一过程中您可能会遇到许多类型，但使用它比不使用它要好得多
阅读更多信息：https://github.com/ArthurFiorette/declarator#readme
这就是我工作的方式。
在我的例子中，我使用了一个没有定义类型的库：react mobile datepicker
a.在/src中创建文件夹。在我的例子中，我使用了以下路径：/src/typengs/。
b.创建.dts文件。例如：/src/typerings/react-mobile-datepicker.dts
c.我使用以下代码扩展其财产并使其类型安全：
declare module 'react-mobile-datepicker' {
class DatePicker extends React.Component<DatePickerProps, any> {}
interface DatePickerProps {
isPopup?: boolean;
theme?: string;
dateConfig?: DatePickerConfig;
}
export interface DatePickerConfig {
prop1: number;
pro2: string;
}
export default DatePicker;
}
d.按照通常使用第三方库的方式导入类型。
import DatePicker, { DatePickerConfig, DatePickerConfigDate } from 'react-mobile-datepicker';
e.更改tsconfig.json并添加以下代码：
{
"compilerOptions": {
//...other properties
"typeRoots": [
"src/typings",
"node_modules/@types"
]
}}
链接到我用作来源的文章：
https://templecoding.com/blog/2016/03/31/creating-typescript-typings-for-existing-react-components
https://www.credera.com/insights/typescript-adding-custom-type-definitions-for-existing-libraries
