CODEWITHSUNDEEP
javascripttypescripttypescript-typings
Musterknabe
Musterknabe

Reputation: 6101

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.

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

I would have one UserClient which offers both methods

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

{
  "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

{
  "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

So I have multiple questions

I basically want to have typings for every class I create and then use it in another library like

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

Upvotes: 2

Views: 2079

Answers (1)

Musterknabe
Musterknabe

Reputation: 6101

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

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

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

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

Upvotes: 3

Related Questions