For the purpose of learning, I created a small TypeScript library and utilized webpack to generate a JS UMD module from my TypeScript code.
Here is the structure of my project:
|-dist
|-js
|-my-lib.min.js // Minified library as UMD module
|-src
|-ts
|-types
|-interfaces
|-utils
|-components
|-button.ts
|-textField.ts
|-dropdownMenu.ts
|-my-lib.ts // Source file for UMD lib
The my-lib.ts file contains the following code:
import {Button} from './components/button';
import {TextField} from './components/textField';
import {DropdownMenu} from './components/dropdownMenu';
export {
Button,
TextField,
DropdownMenu,
}
By including my-lib.min.js in HTML via src, I can use my components like this: (The UMD module is named with webpack as myLib).
const username = new myLib.TextField();
Now, I want to use my library in a new TypeScript project without delivering the TS files, but using only the declarations to treat it like a JS UMD module:
const username : myLib.TextField = new myLib.TextField();
How can I achieve this?
- Is it possible to generate a declaration file automatically?
- If not, how can I manually create a declaration file? What should be its structure?
I attempted
tsc --declaration src\ts\my-lib.tsmy-lib.d.ts file along with declaration files for all imported components like buttond.d.ts, textfield.d.ts, and dropdownMenu.d.ts.
The declaration file for my-lib.ts appears similar to the original file as it mainly consists of import/export statements without type or function declarations, making it seem ineffective for my purpose.
Here is my .tsconfig file:
{
"compilerOptions": {
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"strict": true,
"noUnusedLocals": true,
"target": "es5",
"sourceMap": true,
"declaration": true,
"emitDeclarationOnly": true,
},
"lib": [
"umd"
],
}