简体   繁体   English

使用类创建模块化 TypeScript 库

[英]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 ,所以,例如,假设我有多个用户端点,它们执行类似的操作

  • Register登记
  • Login登录

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所以我有多个问题

  • Do I need an index.ts in src?我需要 src 中的 index.ts 吗? If yes, what will be in there?如果是的话,里面会有什么?
  • Do I need to change types to something else?我需要将类型更改为其他类型吗?

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.jsuser-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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM