<p dir="auto">Hi,<br>
I'm working on node.js with npm. I've written a TS library and I want to use it in another project by doing npm install.<br>
I'm not sure what will should be the contents in my npm package:<br>
should it be only .js, only .ts, or .js with additional declaration files (d.ts)?</p>
<p dir="auto">Furthermore if I'm using the third option, what exactly am I writing in the definition file? how exactly am I using it?I'm not sure what's the connection between d.ts and the actual javascript.<br>
I see a lot of different answers but most them didn't help me.</p>
<p dir="auto">Thanks,<br>
Omer</p>
<p dir="auto"><strong>TypeScript Version:</strong></p>
<p dir="auto">1.8.0</p>
<p dir="auto"><strong>Code</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="interface Class&lt;T&gt; {
    new(): T;
}
declare function create1&lt;T&gt;(ctor: Class&lt;T&gt;): T;
declare function create2&lt;T, C extends Class&lt;T&gt;&gt;(ctor: C): T;

class A {}
let a1 = create1(A); // a: A --&gt; OK
let a2 = create2(A); // a: {} --&gt; Should be A"><pre class="notranslate"><span class="pl-k">interface</span> <span class="pl-smi">Class</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">new</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">T</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-k">declare</span> <span class="pl-k">function</span> <span class="pl-s1">create1</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">ctor</span>: <span class="pl-smi">Class</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">&gt;</span><span class="pl-kos">)</span>: <span class="pl-smi">T</span><span class="pl-kos">;</span>
<span class="pl-k">declare</span> <span class="pl-k">function</span> <span class="pl-s1">create2</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-smi">C</span> <span class="pl-k">extends</span> <span class="pl-smi">Class</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">&gt;</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">ctor</span>: <span class="pl-smi">C</span><span class="pl-kos">)</span>: <span class="pl-smi">T</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-smi">A</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>
<span class="pl-k">let</span> <span class="pl-s1">a1</span> <span class="pl-c1">=</span> <span class="pl-en">create1</span><span class="pl-kos">(</span><span class="pl-smi">A</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// a: A --&gt; OK</span>
<span class="pl-k">let</span> <span class="pl-s1">a2</span> <span class="pl-c1">=</span> <span class="pl-en">create2</span><span class="pl-kos">(</span><span class="pl-smi">A</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// a: {} --&gt; Should be A</span></pre></div>
<p dir="auto"><strong>Context</strong></p>
<p dir="auto">The example above is simplified to illustrate the difference between <code class="notranslate">create1</code> and <code class="notranslate">create2</code>. I need both type parameters for the use case I have in mind (React) because it returns a type which is parameterized by both <code class="notranslate">T</code> and <code class="notranslate">C</code>:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="declare function createElement&lt;T, C extends Class&lt;T&gt;&gt;(type: C): Element&lt;T, C&gt;;
var e = createElement(A); // e: Element&lt;{}, typeof A&gt; --&gt; Should be Element&lt;A, typeof A&gt;

declare function render&lt;T&gt;(e: Element&lt;T, any&gt;): T;
var a = render(e); // a: {} --&gt; Should be A"><pre class="notranslate"><span class="pl-k">declare</span> <span class="pl-k">function</span> <span class="pl-s1">createElement</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-smi">C</span> <span class="pl-k">extends</span> <span class="pl-smi">Class</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">&gt;</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">type</span>: <span class="pl-smi">C</span><span class="pl-kos">)</span>: <span class="pl-smi">Element</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-smi">C</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">e</span> <span class="pl-c1">=</span> <span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-smi">A</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// e: Element&lt;{}, typeof A&gt; --&gt; Should be Element&lt;A, typeof A&gt;</span>

<span class="pl-k">declare</span> <span class="pl-k">function</span> <span class="pl-s1">render</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">e</span>: <span class="pl-smi">Element</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-smi">any</span><span class="pl-kos">&gt;</span><span class="pl-kos">)</span>: <span class="pl-smi">T</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">a</span> <span class="pl-c1">=</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// a: {} --&gt; Should be A</span></pre></div>
<p dir="auto">Again, this is simplified, but the motivation is to improve the return type inference of <code class="notranslate">ReactDOM.render</code>.</p>