[英]Creating a modular TypeScript library with classes
I have a Web API for which I want to build a library so that I don't need to write the same code in every new project I'm talking to this API.我有一个 Web API 我想为其构建一个库,这样我就不需要在我正在与这个 API 交谈的每个新项目中编写相同的代码。
I also want to split my code, so I have one class for each endpoint structure, so, for example, let's say I have multiple User endpoints which do stuff like我也想拆分我的代码,所以我为每个端点结构都有一个 class ,所以,例如,假设我有多个用户端点,它们执行类似的操作
I would have one UserClient which offers both methods我会有一个 UserClient 提供两种方法
export default class UserClient
{
register(email: string, password: string)
{
// code here
}
login(email: string, password: string, remember: bool)
{
// code here
}
}
So, I structured my code like this所以,我像这样构建了我的代码
package.json
tsconfig.json
--src
----api
------user-client.ts
----models
------user
--------logindata.ts
my tsconfig.json looks like this我的 tsconfig.json 看起来像这样
{
"compilerOptions": {
"declaration": true,
"declarationDir": "./dist",
"module": "commonjs",
"noImplicitAny": true,
"lib": ["es2017", "es7", "es6", "dom"],
"outDir": "./dist",
"target": "es2015",
"moduleResolution": "node",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
},
"typedocOptions": {
"mode": "modules",
"out": "docs"
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"dist"
]
}
and my package.json和我的 package.json
{
"name": "xxx",
"version": "1.0.0",
"description": "xxx",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"/dist"
],
"repository": "xxx",
"author": "xxx",
"license": "MIT",
"private": true,
"scripts": {
"build": "tsc",
"prepare": "npm run build",
"test": "echo \"Error: no test specified\" && exit 1"
}
}
So what I can already see is that I say my main is dist/index.js and types are dist/index.d.ts and I don't have an index file所以我已经看到的是我说我的主要是 dist/index.js 类型是 dist/index.d.ts 而我没有索引文件
So I have multiple questions所以我有多个问题
I basically want to have typings for every class I create and then use it in another library like我基本上想为我创建的每个 class 输入类型,然后在另一个库中使用它
import {UserClient} from "myLib"
import {BooksClient} from "myLib"
However, when I now build my library with tsc
it doesn't create an index.d.ts (since I don't have an index.ts) and just creates the user-client.js
and user-client.d.ts
directly in the dist folder (without respecting the existing structure) and I also coannot use them in my other library但是,当我现在使用tsc
构建库时,它不会创建 index.d.ts(因为我没有 index.ts),而只会创建user-client.js
和user-client.d.ts
直接在 dist 文件夹中(不考虑现有结构),我也不能在我的其他库中使用它们
Okay, so I fixed it.好的,所以我修好了。 First of all, what we need is, that the client will be exported首先,我们需要的是,客户端将被导出
so user-client.ts
should look like this所以user-client.ts
应该是这样的
export class UserClient
{
// code
}
Then, what I was missing (or doing wrong) in your index.ts you need to EXPORT instead of import the client然后,我在你的 index.ts 中缺少(或做错了)你需要导出而不是导入客户端
export {UserClient} from "./api/user-client"
Then, I built my files with the tsc
command and then in my consuming library, I was able to use npm link../jsapi
and then simply use然后,我使用tsc
命令构建了我的文件,然后在我的消费库中,我能够使用npm link../jsapi
然后简单地使用
import {UserClient} from 'jsapi'
without any problems.没有任何问题。
I used this tutorial as a help: https://www.tsmean.com/articles/how-to-write-a-typescript-library/ but had to actually look at their https://github.com/bersling/typescript-library-starter/blob/master/library-starter/src/index.ts to get the correct answer我使用本教程作为帮助: https://www.tsmean.com/articles/how-to-write-a-typescript-library/但必须实际查看他们的https://github.com/bersling/typescript -library-starter/blob/master/library-starter/src/index.ts得到正确答案
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.