在本地链接 Vue 应用程序和 Vue 库 --> d.ts 问题；

Question

我在尝试将我的代码拆分为库和应用程序时遇到问题。我想用Vuejs + TypeScript + WebPack，看起来是个不错的组合。我在尝试从库中调用应用程序时遇到一些问题。这似乎是关于 d.ts 文件.

// powershell output
13:22 Could not find a declaration file for module 'my-lib'. 'path/my-lib.common.js' implicitly has an 'any' type.
  Try `npm install @types/my-lib` if it exists or add a new declaration (.d.ts) file containing `declare module 'my-lib';`
    11 | // import HelloWorld from "./components/HelloWorld.vue";
    12 |
  > 13 | import sayHello from "my-lib";
       |                      ^
    14 |
    15 | export default Vue.extend({
    16 |   name: "App",

我不想通过设置 strict=true 来绕过问题。我想在我的库中正确导出我的符号。

我的测试场景非常简单：

lib 导出了一个 sayHello 方法

// helloworld.ts
export function sayHello() {
    console.log('hi')
}

// index.ts
export {sayHello} from './helloworld';

应用程序调用 sayHello 方法

// App.vue
<template>
  <div id="app">
    <button v-on:click="showMsg">Click Me</button>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import sayHello from "my-lib";

export default Vue.extend({
  name: "App",
  components: {},
  methods: {
    showMsg: function() {
      sayHello();
    }
  }
});
</script>

（如果我通过直接调用 console.log 替换 sayHello，应用程序工作正常）

为了生成这两个项目，我使用了 vue create。

在库端，我设置了以下配置：

// package.json
  "name": "my-lib",
  ...
  "private": true,
  "main": "dist/my-lib.common.js",
  "scripts": {
    ...
    "build-lib": "vue-cli-service build --target lib src/index.ts",
    ...

// tsconfig.json
  ...
  "declaration": true,
  "noImplicitAny": true,
  "outDir": "./dist",
  ...

在应用程序端，我已经使用npm install "../my-lib" 在本地安装应用程序（路径没问题）。我了解到，在开发版本中，这是一个不错的选择。

我猜问题出在 d.ts 文件生成的某个地方。我认为 tsc 应该自动创建它们，因为我正在编写打字稿文件。但我找不到他们。我没有任何 d.ts 个文件。

我试过很多东西，比如：

手动调用tsc -p tscconfig.json（出现了一些d.ts，但没有lib，不了解vue文件。我需要使用我的build-lib脚本）
添加一个 vue.config.js（完全没有变化）

module.exports = {
  configureWebpack: {
    output: {
      libraryExport: "default"
    }
  }
};

更改名称/检查名称/等
找到一个 old but unanswered message

我有点Web 开发的菜鸟（我是一名经验丰富的软件开发人员）。我正在努力研究这些技术。我有一种强烈的感觉，我在这个 TypeScript 中遗漏了一些东西。当涉及到库中的符号公开时，我可能会有一些 C++ 反应。我不知道。

我可以提供更多信息、更多代码部分等。我不想太具有侵略性:)

提前谢谢大家！

Answer 1

tsconfig.json 中的

declaration: true 应该可以工作，但是有一个突出的阻塞问题 (vue-cli#1081)。

解决方法是运行 tsc 生成类型声明：

更新 tsconfig.json 设置 compilerOptions.outDir="dist":
```
{
  "compilerOptions": {
    "outDir": "dist"
  }
}
```

更新 package.json 的构建脚本以包含用于生成类型声明的 tsc 命令：

{
  "scripts": {
    "build-lib": "vue-cli-service build --target lib src/index.ts && tsc --emitDeclarationOnly -p tsconfig.json"
  }
}

更新package.json指定main脚本，types指定类型声明文件：
```
{
  "main": "dist/my-lib.umd.js",
  "types": "dist/index.d.ts",
}
```

在本地链接 Vue 应用程序和 Vue 库 --> d.ts 问题；

Linking locally a Vue app and a Vue lib --> d.ts issue;

typescript

vue.js

webpack

.d.ts