{"id":1015,"date":"2018-02-07T17:08:23","date_gmt":"2018-02-07T16:08:23","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1015"},"modified":"2023-04-18T09:18:19","modified_gmt":"2023-04-18T08:18:19","slug":"create-new-typescript-enabled-npm-package-from-scratch","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/create-new-typescript-enabled-npm-package-from-scratch\/","title":{"rendered":"Starter: Create new (typescript enabled) NPM package from scratch"},"content":{"rendered":"\n<p>1. Or create a folder with the name of the package you want to use<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:default decode:true\">mkdir &lt;package-name&gt;<\/pre>\n\n\n\n<p>2. Generate a package.json file (answering the questions on de cli)<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:default decode:true\">npm init -y<\/pre>\n\n\n\n<p>3. Install the latest typescript version globally<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:sh decode:true\">npm i -g typescript@latest<\/pre>\n\n\n\n<p>3. Install typescript as development dependency (saving to package.json)<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:default decode:true\">npm install&nbsp; typescript --save-dev<\/pre>\n\n\n\n<p>4. Generate a .tsconfig file<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:default decode:true\">.\\node_modules\\.bin\\tsc --init\nor\n.\/node_modules\/.bin\/tsc --init\nor\ntsc --init<\/pre>\n\n\n\n<p>5. in .tsconfig set:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:default decode:true\">\"declaration\": true, \/* Generates corresponding '.d.ts' file. *\/\n\"sourceMap\": true,&nbsp; \/* Generates corresponding '.map' file. *\/<\/pre>\n\n\n\n<p>6. In package.json set:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:default decode:true\">{ \n\"bin\" : { \"my-executable\" : \".\/dist\/index.js\" } }, \/* when exporting an executable*\/\n\"main\": \"dist\/index.js\", \/* when exporting a library *\/\n\"types\": \"dist\/index.d.ts\", \/* typescript type definition file *\/\n\"scripts\": {\n\"build\": \"tsc --listEmittedFiles\",\n\"install\": \"tsc --listEmittedFiles\", \/* optional: when installing build project  *\/\n\"test\": \"jasmine --config=jasmine.json\",\n}\n}\n<\/pre>\n\n\n\n<p>7. Install dependencies for unit-tests<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:default decode:true\">npm install --save-dev jasmine\n.\/node_modules\/.bin\/jasmine init<\/pre>\n\n\n\n<pre id=\"block-0bf301a2-a91a-4c41-8fe8-2cd4c5f9fc07\" class=\"wp-block-preformatted\">Add a .gitignore file<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># compiled output\n\/dist\n\/tmp\n\/out-tsc\n# dependencies\n\/node_modules\n\n.project\n*.launch\n.settings\/\n.vscode\/\n# misc\nnpm-debug.log\n\/typings\n\n# e2e\n\/e2e\/*.js\n\/e2e\/*.map<\/pre>\n\n\n\n<p>Add an .npmignore file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">src\/\n<\/pre>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"powershell\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\"># Maak een nieuwe map voor het project\nmkdir MyProject\ncd MyProject\n\n# Maak een nieuw TypeScript-project\nnpm init -y\nnpm install typescript --save-dev\nnpx tsc --init\n\n# Maak .gitignore en .npmignore bestanden\nNew-Item -ItemType File -Path .\\.gitignore -Value \"node_modules\/\"\nNew-Item -ItemType File -Path .\\.npmignore -Value \"node_modules\/\"\n\n# Add jasmine\nnpm install --save-dev jasmine\nnpx jasmine init<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>1. Or create a folder with the name of the package you want to use mkdir &lt;package-name&gt; 2. Generate a package.json file (answering the questions on de cli) npm init -y 3. Install the latest typescript version globally npm i -g typescript@latest 3. Install typescript as development dependency (saving to package.json) npm install&nbsp; typescript &#8211;save-dev [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1015","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1015","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1015"}],"version-history":[{"count":15,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1015\/revisions"}],"predecessor-version":[{"id":7690,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1015\/revisions\/7690"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}