CODEWITHSUNDEEP
javascripttypescript
lightningund
lightningund

Reputation: 31

How to import a TypeScript file as a library?

So I have a personal "library" that I made that I call methlib, and I have it stored as a .ts file on my computer. Inside it tons of classes, interfaces, functions, etc. that I use a bunch and I like to just have in one place. Now my problem is I want to use the functions and stuff from there in another project that I have that I am making in typescript (as one would usually want to do with a library) but I don't know how. Before I had translated it into typescript I could just include it in the HTML file (usually by just going up into my main web directory and grabbing the local file so that if I made any changes to it it would take effect immediately) but now I don't know what to do. I am also not very familiar (at all) with any of the terminology and I am very new to typescript and more advanced javascript or web development at all. Now when I try to grab something from my library like

import { Collider } from "Methlib/methlib"

with my webpack config (which I mostly stole from a template and don't fully understand) set up like

const path = require('path');
module.exports = {
    entry: "./src/script.ts",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: [".webpack.js", ".web.js", ".ts", ".js"],
        alias: {
            Methlib: "./../Methlib-js/"
        }
    },
    module: {
        rules: [{ test: /\.ts$/, loader: "ts-loader" }]
    }
}

with a file structure like

<root>
 | Methlib-js
 | | methlib.ts
 | <project folder>
 | | node_modules
 | | src
 | | | script.ts
 | | webpack.config.js
 | | package.json
 | | package-lock.json

running >node_modules\.bin\webpack gives me

ERROR in <root>\<project folder>\src\script.ts
./src/script.ts
[tsl] ERROR in <root>\<project folder>\src\script.ts(5,26)
      TS2307: Cannot find module 'Methlib/methlib' or its corresponding type declarations.

Also please mind the whole and thing, it's just so that I don't have to reveal my exact file structure where it isn't completely necessary. I would like to clarify that isn't actually part of the project, just the root of my file structure.

Upvotes: 1

Views: 595

Answers (2)

lightningund
lightningund

Reputation: 31

The solution was to specify the full absolute path to the library in the webpack.config.js file, and upon further testing it would seem that you don't even need to include the path mapping in the tsconfig.json file either.

Upvotes: 0

Elias Schablowski
Elias Schablowski

Reputation: 2812

You need to specify the path mapping for ts as well:

{
  "compilerOptions": {
    "baseUrl": ".", // This must be specified if "paths" is.
    "paths": {
      "Methlib": ["../Methlib-js/methlib.ts"] // This mapping is relative to "baseUrl"
    }
  }
}

Repl.it

Upvotes: 1

Related Questions