如何在 JavaScript 中使用/导入 TypeScript 声明文件？答案

【问题标题】：How to use/import TypeScript declaration files in JavaScript?如何在 JavaScript 中使用/导入 TypeScript 声明文件？
【发布时间】：2021-01-02 06:46:58
【问题描述】：

我正在玩一点 Kotlin Multiplatform。

现在，我尝试开发一个 Kotlin JS 库来导入并在外部 JavaScript 项目中使用它。到目前为止，这工作正常。 Kotlin 从 Kotlin 代码创建 JavaScript 文件，我可以在 JavaScript 项目中导入和使用它们，它会做它应该做的。

但是我的 IDE 显示有一个未解析的函数或方法：

我是 JavaScript 新手，想知道这个警告，因为它有效。

于是我搜索并找到了这个：

Kotlin/JS IR 编译器能够从您的 Kotlin 代码生成 TypeScript 定义。 JavaScript 工具和 IDE 在处理混合应用程序时可以使用这些定义来提供自动完成功能，支持静态分析器，并更容易在 JavaScript 和 TypeScript 项目中包含 Kotlin 代码。 https://kotlinlang.org/docs/reference/js-ir-compiler.html#preview-generation-of-typescript-declaration-files-dts

我假设我需要这些 TypeScript 定义来告诉我的 IDE 这个方法存在。

几小时后，我知道如何告诉 Kotlin 编译器（？）生成这个定义，但警告仍然存在 :-(

生成的shared.d.ts 文件如下所示：

type Nullable<T> = T | null | undefined
export namespace api.model {
    class AuthResponse {
        // lots of code
    }
}
export namespace api {
    function requestToken(): kotlin.js.Promise<api.model.AuthResponse>;
}
export as namespace shared;

这是生成的package.json文件：

{
  "main": "kotlin/shared.js",
  "devDependencies": {
    "webpack": "4.44.1",
    "webpack-cli": "3.3.12",
    "source-map-loader": "1.0.1",
    "dukat": "0.5.8-rc.3"
  },
  "dependencies": {
    // kotlin related imports
  },
  "peerDependencies": {},
  "optionalDependencies": {},
  "bundledDependencies": [],
  "name": "shared",
  "version": "1.0.0"
}

在 JavaScript 项目中，我将此行添加到 package.json 文件 "shared": "file:..<path to the other package.json file>"。

我也发现了这个问题How to use TypeScript declaration files alongside JavaScript，但也许我无法遵循答案，或者它没有解决我的问题。

有没有办法告诉 IDE 这个方法存在？这个 TypeScript 声明文件应该解决它吗？如果是，我该如何使用/导入它？

【问题讨论】：

生成的shared.d.ts文件在生成的shared.js文件旁边

标签： javascript typescript kotlin-js

【解决方案1】：

简单来说，typescript 声明文件就是用来让 typescript 理解 JS 的。不是反过来。 .d.ts 文件仅在 TypeScript 项目中有用，它允许 TypeScript 对 JavaScript 模块进行类型推断。

如果您想解决警告，请在您的 JS 项目中导入 shared.js 文件。

【讨论】：

我用import { api } from 'shared'; 导入了它，但警告仍然存在

【解决方案2】：

以下内容至少适用于 IntelliJ IDEA Ultimate：

将 "@types/shared": "file:../blh_shared/build/js/packages/shared" 添加到我的 React 项目的 package.json 文件中会在我的 IDE 中添加代码完成。

package.json 文件现在如下所示：

{
  "name": "react_app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "shared": "file:../blh_shared/build/js/packages/shared",
  },
  "devDependencies": {
    "@types/shared": "file:../blh_shared/build/js/packages/shared",
  }
}

【讨论】：